Alle Marker von layerGroups sind im Map, Priorität muss noch setzen, damit die Marker hanz oben ist, oms muss bei allen noch funktionieren
This commit is contained in:
ISA
@@ -373,6 +373,29 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const popupContent = L.DomUtil.create("div");
|
||||
popupContent.innerHTML = `
|
||||
<form id="addStationForm" class="m-0 p-2 w-full">
|
||||
<!-- Kommantar von hier
|
||||
<div class="flex items-center mb-4">
|
||||
|
||||
<label for="idPoi" class="block mr-2 flex-none">ID Poi:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="idPoi"
|
||||
name="idPoi"
|
||||
value="2"
|
||||
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center mb-4">
|
||||
<label for="idPoiTyp" class="block mr-2 flex-none">ID idPoiTyp:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="idPoiTyp"
|
||||
name="idPoiTyp"
|
||||
value="2"
|
||||
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
Kommantar bis hier-->
|
||||
<div class="flex items-center mb-4">
|
||||
<label for="name" class="block mr-2 flex-none">Name:</label>
|
||||
<input
|
||||
@@ -385,7 +408,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
</div>
|
||||
|
||||
<div class="flex items-center mb-4">
|
||||
<label for="type" class="block mr-3 flex-none">Type:</label>
|
||||
<label for="idPoi" class="block mr-3 flex-none">Type:</label>
|
||||
<input
|
||||
type="text"
|
||||
id="type"
|
||||
@@ -418,6 +441,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
class="block p-2 flex-grow border-2 border-gray-200 rounded-md text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
@@ -434,43 +458,46 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
L.DomEvent.on(popupContent, "submit", handleSubmit);
|
||||
};
|
||||
|
||||
// Funktion zum Hinzufügen eines neuen Standorts
|
||||
// Hinzufügen eines neuen Standorts (Marker) in MySQL-DB-Tabelle (poi)
|
||||
async function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
const form = event.target;
|
||||
|
||||
// Einfache Validierung, um sicherzustellen, dass idPoiTyp eine Zahl ist
|
||||
if (!form.idPoiTyp.value || isNaN(form.idPoiTyp.value)) {
|
||||
alert("Bitte geben Sie eine gültige ID für den Poi-Typ ein.");
|
||||
return; // Beendet die Funktion, um das Senden von ungültigen Daten zu verhindern
|
||||
}
|
||||
|
||||
const data = {
|
||||
name: form.name.value,
|
||||
type: form.type.value,
|
||||
idPoi: form.idPoi.value,
|
||||
idPoiTyp: form.idPoiTyp.value,
|
||||
latitude: form.lat.value,
|
||||
longitude: form.lng.value,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/addLocation", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
// Senden der Daten an den Server
|
||||
const response = await fetch("/api/addLocation", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
alert("Standort erfolgreich hinzugefügt!");
|
||||
form.reset(); // Formular zurücksetzen
|
||||
// Hier könntest du weitere Aktionen durchführen, wie das Schließen des Popups oder das Aktualisieren der Marker auf der Karte
|
||||
} else {
|
||||
throw new Error(
|
||||
result.error || "Ein unbekannter Fehler ist aufgetreten."
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Hinzufügen des Standorts:", error);
|
||||
alert(error.message);
|
||||
if (response.ok) {
|
||||
console.log("Station erfolgreich hinzugefügt");
|
||||
// Weitere Aktionen nach erfolgreichem Hinzufügen
|
||||
} else {
|
||||
console.error("Fehler beim Hinzufügen der Station");
|
||||
// Fehlerbehandlung
|
||||
}
|
||||
}
|
||||
|
||||
//---------------------------------------
|
||||
|
||||
function fly(stationValue) {
|
||||
var x = 51.41321407879154;
|
||||
var y = 7.739617925303934;
|
||||
@@ -508,40 +535,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
return path;
|
||||
}
|
||||
|
||||
//useEffect zusammen von MySQL Daten bank und von APIs
|
||||
/* useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const responses = await Promise.all([
|
||||
fetch(mapGisStationsStaticDistrictUrl),
|
||||
fetch(mapGisStationsStatusDistrictUrl),
|
||||
// Andere relevante API-Anfragen
|
||||
]);
|
||||
const data = await Promise.all(responses.map((res) => res.json()));
|
||||
|
||||
if (data[0] && data[0].Points) {
|
||||
setGisStationsStaticDistrict(data[0].Points);
|
||||
} else {
|
||||
console.error("Daten für GisStationsStaticDistrict nicht gefunden");
|
||||
setGisStationsStaticDistrict([]);
|
||||
}
|
||||
|
||||
if (data[1] && data[1].Statis) {
|
||||
setGisStationsStatusDistrict(data[1].Statis);
|
||||
} else {
|
||||
console.error("Daten für GisStationsStatusDistrict nicht gefunden");
|
||||
setGisStationsStatusDistrict([]);
|
||||
}
|
||||
|
||||
// Weitere Datenverarbeitung...
|
||||
} catch (error) {
|
||||
console.error("Fehler beim Laden der Daten: ", error);
|
||||
// Setzen Sie Zustände auf leere Arrays oder Fehlerzustände
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []); */
|
||||
//------------------------------------------
|
||||
let dbLayer = null;
|
||||
useEffect(() => {
|
||||
@@ -559,7 +552,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}, [map]);
|
||||
//-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt
|
||||
// Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
|
||||
/* useEffect(() => {
|
||||
useEffect(() => {
|
||||
// Remove old markers
|
||||
if (map) {
|
||||
// Entfernen der alten DBLayer und Erstellung einer neuen
|
||||
@@ -598,55 +591,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
});
|
||||
}
|
||||
}, [map, locations, onLocationUpdate]);
|
||||
*/
|
||||
//------------------------------------------
|
||||
// Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
|
||||
/* useEffect(() => {
|
||||
// Remove old markers
|
||||
if (map) {
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
|
||||
// Add new markers
|
||||
locations.forEach((location) => {
|
||||
const { latitude, longitude } = parsePoint(location.position);
|
||||
const marker = L.marker([latitude, longitude], {
|
||||
icon: L.icon({
|
||||
iconUrl: "/location.svg",
|
||||
iconSize: [34, 34],
|
||||
iconAnchor: [17, 34],
|
||||
popupAnchor: [0, -34],
|
||||
}),
|
||||
draggable: true,
|
||||
id: location.idPoi,
|
||||
});
|
||||
|
||||
marker.bindPopup(
|
||||
`<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
|
||||
);
|
||||
marker.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${location.description}</div>`,
|
||||
{ permanent: false, direction: "top" }
|
||||
);
|
||||
|
||||
marker.on("dragend", function (e) {
|
||||
const newLat = e.target.getLatLng().lat;
|
||||
const newLng = e.target.getLatLng().lng;
|
||||
const markerId = e.target.options.id;
|
||||
updateLocationInDatabase(markerId, newLat, newLng).then(() => {
|
||||
onLocationUpdate(markerId, newLat, newLng);
|
||||
});
|
||||
});
|
||||
|
||||
marker.addTo(map);
|
||||
});
|
||||
}
|
||||
}, [map, locations, onLocationUpdate]); */
|
||||
|
||||
//------------------------------------------
|
||||
|
||||
useEffect(() => {
|
||||
// Initialisierung der dbLayer, wenn die Karte verfügbar ist
|
||||
if (map && !dbLayerRef.current) {
|
||||
@@ -661,7 +608,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
}
|
||||
};
|
||||
}, [map]); // Dieser Effekt läuft nur, wenn sich `map` ändert
|
||||
|
||||
//------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && dbLayerRef.current) {
|
||||
// Sicherstellen, dass die alte dbLayer entfernt wird
|
||||
@@ -702,83 +649,123 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
//-----------------------------------------------------------------
|
||||
// TALAS Marker hinzufügen
|
||||
//-----------------------------------------------------------------
|
||||
|
||||
// Reihenfolge nach API sortiert mit der Attribute "System"
|
||||
const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
|
||||
const [eciVisible, setEciVisible] = useRecoilState(mapLayersState);
|
||||
const [gsmModemVisible, setGsmModemVisible] = useRecoilState(mapLayersState);
|
||||
const [ciscoRouterVisible, setCiscoRouterVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [wagoVisible, setWagoVisible] = useRecoilState(mapLayersState);
|
||||
const [siemensVisible, setSiemensVisible] = useRecoilState(mapLayersState);
|
||||
const [otdrVisible, setOtdrVisible] = useRecoilState(mapLayersState);
|
||||
const [wdmVisible, setWdmVisible] = useRecoilState(mapLayersState);
|
||||
const [gmaVisible, setGmaVisible] = useRecoilState(mapLayersState);
|
||||
const [messstellenVisible, setMessstellenVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [talasiclVisible, setTalasiclVisible] = useRecoilState(mapLayersState);
|
||||
const [dauzVisible, setDauzVisible] = useRecoilState(mapLayersState);
|
||||
const [smsfunkmodemVisible, setSmsfunkmodemVisible] =
|
||||
useRecoilState(mapLayersState);
|
||||
const [sonstigeVisible, setSonstigeVisible] = useRecoilState(mapLayersState);
|
||||
const [ulafVisible, setUlafVisible] = useRecoilState(mapLayersState);
|
||||
|
||||
const [talasMarkers, setTalasMarkers] = useState([]);
|
||||
const [talasMarkers, setTalasMarkers] = useState([]); //----------------station.System === 1
|
||||
const [eciMarkers, setEciMarkers] = useState([]); //--------------------station.System === 2
|
||||
const [gsmModemMarkers, setGsmModemMarkers] = useState([]); //----------station.System === 5
|
||||
const [ciscoRouterMarkers, setCiscoRouterMarkers] = useState([]); //----station.System === 6
|
||||
const [wagoMarkers, setWagoMarkers] = useState([]); //------------------station.System === 7
|
||||
const [siemensMarkers, setSiemensMarkers] = useState([]); //------------station.System === 8
|
||||
const [otdrMarkers, setOtdrMarkers] = useState([]); //------------------station.System === 9
|
||||
const [wdmMarkers, setWdmMarkers] = useState([]); //--------------------station.System === 10
|
||||
const [gmaMarkers, setGmaMarkers] = useState([]); //--------------------station.System === 11
|
||||
const [messstellenMarkers, setMessstellenMarkers] = useState([]); //----station.System === 13
|
||||
const [talasiclMarkers, setTalasiclMarkers] = useState([]); //----------station.System === 100
|
||||
const [dauzMarkers, setDauzMarkers] = useState([]); //------------------station.System === 110
|
||||
const [smsfunkmodemMarkers, setSmsfunkmodemMarkers] = useState([]); //--station.System === 111
|
||||
const [sonstigeMarkers, setSonstigeMarkers] = useState([]); //----------station.System === 200
|
||||
const [ulafMarkers, setUlafMarkers] = useState([]); //------------------ no exist
|
||||
//--------------------------------------------------------------------------------
|
||||
// Daten von einer externen Quelle laden
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
if (!map) return;
|
||||
try {
|
||||
// Erster Fetch-Aufruf
|
||||
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
||||
const jsonResponse = await response1.json();
|
||||
const createAndSetMarkers = async (systemId, setMarkersFunction) => {
|
||||
try {
|
||||
const response1 = await fetch(config.mapGisStationsStaticDistrictUrl);
|
||||
const jsonResponse = await response1.json();
|
||||
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
||||
const statusResponse = await response2.json();
|
||||
|
||||
// Zweiter Fetch-Aufruf
|
||||
const response2 = await fetch(config.mapGisStationsStatusDistrictUrl);
|
||||
const statusResponse = await response2.json();
|
||||
|
||||
if (jsonResponse.Points && statusResponse.Statis) {
|
||||
const statisMap = new Map(
|
||||
statusResponse.Statis.map((s) => [s.IdLD, s])
|
||||
);
|
||||
console.log("statisMap", statisMap);
|
||||
|
||||
let markersData = jsonResponse.Points.filter(
|
||||
(station) => station.System === 1
|
||||
).map((station) => {
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: statis
|
||||
? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
|
||||
: `img/icons/marker-icon-${station.Icon}.png`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
bounceOnAdd: !!statis,
|
||||
});
|
||||
|
||||
if (statis) {
|
||||
marker.on("add", () => marker.bounce(3));
|
||||
}
|
||||
// String-Zusammenstellung für das Popup-Infofenster
|
||||
const matchingStatuses = statusResponse.Statis.filter(
|
||||
(status) => status.IdLD === station.IdLD
|
||||
);
|
||||
let statusInfo = matchingStatuses
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
// Ein Popup und Tooltip mit Informationen zur Station binden
|
||||
marker.bindPopup(
|
||||
`<b>${station.LD_Name}</b><br>
|
||||
${station.Device}<br>
|
||||
${station.Area_Short} (${station.Area_Name})<br>
|
||||
${station.Location_Short} (${station.Location_Name})<br>${statusInfo}`
|
||||
);
|
||||
|
||||
return marker;
|
||||
if (jsonResponse.Points && statusResponse.Statis) {
|
||||
const statisMap = new Map(
|
||||
statusResponse.Statis.map((s) => [s.IdLD, s])
|
||||
);
|
||||
let markersData = jsonResponse.Points.filter(
|
||||
(station) => station.System === systemId
|
||||
).map((station) => {
|
||||
const statis = statisMap.get(station.IdLD);
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: statis
|
||||
? `img/icons/${statis.Na}-marker-icon-${station.Icon}.png`
|
||||
: `img/icons/marker-icon-${station.Icon}.png`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
bounceOnAdd: !!statis,
|
||||
});
|
||||
|
||||
setTalasMarkers(markersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data: ", error);
|
||||
}
|
||||
}
|
||||
if (statis) {
|
||||
marker.on("add", () => marker.bounce(3));
|
||||
}
|
||||
|
||||
fetchData();
|
||||
}, [map]); // Abhängigkeit nur auf `map` setzen
|
||||
const statusInfo = statusResponse.Statis.filter(
|
||||
(status) => status.IdLD === station.IdLD
|
||||
)
|
||||
.reverse()
|
||||
.map(
|
||||
(status) => `
|
||||
<div class="flex items-center my-1">
|
||||
<div class="w-2 h-2 mr-2 inline-block rounded-full" style="background-color: ${status.Co};"></div>
|
||||
${status.Me} <span style="color: ${status.Co};">(${status.Na})</span>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("");
|
||||
|
||||
marker.bindPopup(`
|
||||
<b>${station.LD_Name}</b><br>
|
||||
${station.Device}<br>
|
||||
${station.Area_Short} (${station.Area_Name})<br>
|
||||
${station.Location_Short} (${station.Location_Name})<br>
|
||||
${statusInfo}
|
||||
`);
|
||||
|
||||
return marker;
|
||||
});
|
||||
|
||||
setMarkersFunction(markersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data: ", error);
|
||||
}
|
||||
};
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
createAndSetMarkers(1, setTalasMarkers); // TALAS-System
|
||||
createAndSetMarkers(2, setEciMarkers); // ECI-System
|
||||
createAndSetMarkers(5, setGsmModemMarkers); // GSM-Modem-System
|
||||
createAndSetMarkers(6, setCiscoRouterMarkers); // Cisco-Router-System
|
||||
createAndSetMarkers(7, setWagoMarkers); // WAGO-System
|
||||
createAndSetMarkers(8, setSiemensMarkers); // Siemens-System
|
||||
createAndSetMarkers(9, setOtdrMarkers); // OTDR-System
|
||||
createAndSetMarkers(10, setWdmMarkers); // WDM-System
|
||||
createAndSetMarkers(11, setGmaMarkers); // GMA-System
|
||||
createAndSetMarkers(13, setMessstellenMarkers); // Messstellen-System
|
||||
createAndSetMarkers(100, setTalasiclMarkers); // TALASICL-System
|
||||
createAndSetMarkers(110, setDauzMarkers); // DAUZ-System
|
||||
createAndSetMarkers(111, setSmsfunkmodemMarkers); // SMS-Funkmodem-System
|
||||
createAndSetMarkers(200, setSonstigeMarkers); // Sonstige-System
|
||||
createAndSetMarkers(0, setUlafMarkers); // ULAF-System
|
||||
}, [map]);
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && talasMarkers.length) {
|
||||
@@ -800,9 +787,300 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
|
||||
console.log("talasMarkers", talasMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && eciMarkers.length) {
|
||||
eciMarkers.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(ECI);
|
||||
}
|
||||
}, [map, eciMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
|
||||
console.log("eciMarkers", eciMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && gsmModemMarkers.length) {
|
||||
gsmModemMarkers.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(GSMModem);
|
||||
}
|
||||
}, [map, gsmModemMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
|
||||
console.log("gsmModemMarkers", gsmModemMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && ciscoRouterMarkers.length) {
|
||||
ciscoRouterMarkers.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(CiscoRouter);
|
||||
}
|
||||
}, [map, ciscoRouterMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
|
||||
console.log("ciscoRouterMarkers", ciscoRouterMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && wagoMarkers.length) {
|
||||
wagoMarkers.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(WAGO);
|
||||
|
||||
//toggleLayer(mapLayersVisibility.WAGO);
|
||||
}
|
||||
// }, [map, wagoMarkers, mapLayersVisibility.WAGO]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
}, [map, wagoMarkers]);
|
||||
console.log("wagoMarkers", wagoMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && siemensMarkers.length) {
|
||||
siemensMarkers.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(Siemens);
|
||||
}
|
||||
}, [map, siemensMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
|
||||
console.log("siemensMarkers", siemensMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && otdrMarkers.length) {
|
||||
otdrMarkers.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(OTDR);
|
||||
}
|
||||
}, [map, otdrMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
|
||||
console.log("otdrMarkers", otdrMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && wdmMarkers.length) {
|
||||
wdmMarkers.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(WDM);
|
||||
}
|
||||
}, [map, wdmMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
|
||||
console.log("wdmMarkers", wdmMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && gmaMarkers.length) {
|
||||
gmaMarkers.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, gmaMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` 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);
|
||||
|
||||
// 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);
|
||||
|
||||
// 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(() => {
|
||||
// Drucker ist hier und noch eine Marker "SNMP"
|
||||
if (map && sonstigeMarkers.length) {
|
||||
sonstigeMarkers.forEach((marker) => {
|
||||
marker.addTo(map);
|
||||
|
||||
// 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("sonstigeMarkers", sonstigeMarkers);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
useEffect(() => {
|
||||
if (map && ulafMarkers.length) {
|
||||
ulafMarkers.forEach((marker) => {
|
||||
marker.addTo(map);
|
||||
|
||||
// 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);
|
||||
//-------------------------------------------
|
||||
//--------------------------------------------------------------------------------
|
||||
|
||||
const mapLayersVisibility = useRecoilValue(mapLayersState);
|
||||
|
||||
useEffect(() => {
|
||||
/* useEffect(() => {
|
||||
if (!map || !talasMarkers) return;
|
||||
|
||||
const toggleLayer = (isVisible) => {
|
||||
@@ -815,7 +1093,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
|
||||
// Apply visibility state to the TALAS layer
|
||||
toggleLayer(mapLayersVisibility.TALAS);
|
||||
}, [map, talasMarkers, mapLayersVisibility.TALAS]); // Depend on map, markers array, and visibility state
|
||||
}, [map, talasMarkers, mapLayersVisibility.TALAS]); */ // Depend on map, markers array, and visibility state
|
||||
|
||||
const handleCheckboxChange = (event) => {
|
||||
const { checked } = event.target;
|
||||
|
||||
Reference in New Issue
Block a user