TALAS Checkbox zum ein- und ausblenden von Markers auf dem Map
This commit is contained in:
ISA
@@ -10,14 +10,14 @@ import "leaflet.smooth_marker_bouncing";
|
||||
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
|
||||
import DataSheet from "../components/DataSheet";
|
||||
import { useRecoilState, useRecoilValue } from "recoil";
|
||||
import { gisStationsStaticDistrictState } from "../states/gisStationState";
|
||||
import { gisSystemStaticState } from "../states/gisSystemState";
|
||||
import { mapLayersState } from "../states/mapLayersState";
|
||||
import { gisStationsStaticDistrictState } from "../store/gisStationState";
|
||||
import { gisSystemStaticState } from "../store/gisSystemState";
|
||||
import { mapLayersState } from "../store/mapLayersState";
|
||||
|
||||
const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const layerVisibility = useRecoilValue(mapLayersState);
|
||||
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
|
||||
const [map, setMap] = useState(null); // Zustand der Karteninstanz
|
||||
const [oms, setOms] = useState(null); // State für OMS-Instanz
|
||||
const [online, setOnline] = useState(navigator.onLine); // Zustand der Internetverbindung
|
||||
const [GisStationsStaticDistrict, setGisStationsStaticDistrict] =
|
||||
useRecoilState(gisStationsStaticDistrictState);
|
||||
@@ -37,7 +37,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const mapGisStationsMeasurementsUrl = config.mapGisStationsMeasurementsUrl;
|
||||
const mapGisSystemStaticUrl = config.mapGisSystemStaticUrl;
|
||||
const mapDataIconUrl = config.mapDataIconUrl;
|
||||
const [oms, setOms] = useState(null); // State für OMS-Instanz
|
||||
|
||||
// Funktion zum Aktualisieren der Position in der Datenbank
|
||||
const updateLocationInDatabase = async (id, newLatitude, newLongitude) => {
|
||||
@@ -176,10 +175,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
// Prüfen, ob die Antwort das erwartete Format hat und Daten enthält
|
||||
if (jsonResponse && jsonResponse.Systems) {
|
||||
setGisSystemStatic(jsonResponse.Systems); // Direkter Zugriff auf 'Systems'
|
||||
/* console.log(
|
||||
"GisSystemStatic in MapComponent.js :",
|
||||
jsonResponse.Systems
|
||||
); */
|
||||
console.log("GisSystemStatic:", jsonResponse.Systems);
|
||||
} else {
|
||||
console.error(
|
||||
'Erwartete Daten im "Systems"-Array nicht gefunden',
|
||||
@@ -213,8 +209,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
const Sonstige = new L.layerGroup();
|
||||
const TALASICL = new L.layerGroup();
|
||||
|
||||
let newMap = [];
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
console.log("Window height from config:", config.windowHeight);
|
||||
@@ -227,10 +221,11 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
.then((response) => setOnline(response.ok))
|
||||
.catch(() => setOnline(false));
|
||||
};
|
||||
let initMap = [];
|
||||
// Initialisierung der karte und hinzuügen der Layers
|
||||
useEffect(() => {
|
||||
if (mapRef.current && !map) {
|
||||
newMap = L.map(mapRef.current, {
|
||||
initMap = L.map(mapRef.current, {
|
||||
center: [53.111111, 8.4625],
|
||||
zoom: 8,
|
||||
layers: [
|
||||
@@ -247,7 +242,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
Sonstige,
|
||||
TALASICL,
|
||||
],
|
||||
zoomControl: false, // Deaktiviere die Standard-Zoomsteuerung
|
||||
zoomControl: false,
|
||||
contextmenu: true,
|
||||
contextmenuItems: [
|
||||
{ text: "Station hinzufügen", callback: showAddStationPopup },
|
||||
@@ -276,63 +271,22 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
L.tileLayer(online ? onlineTileLayer : offlineTileLayer, {
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
||||
}).addTo(newMap);
|
||||
}).addTo(initMap);
|
||||
|
||||
const newOms = new window.OverlappingMarkerSpiderfier(newMap, {
|
||||
nearbyDistance: 20, //Radius um einen Marker, innerhalb dessen andere Marker gruppiert werden in Pixel
|
||||
const oms = new window.OverlappingMarkerSpiderfier(initMap, {
|
||||
nearbyDistance: 20,
|
||||
});
|
||||
|
||||
setMap(newMap);
|
||||
setOms(newOms);
|
||||
}
|
||||
}, [mapRef, map]); // Abhängigkeiten prüfen
|
||||
setMap(initMap);
|
||||
setOms(oms);
|
||||
|
||||
// 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(
|
||||
`<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, closeButton: true }
|
||||
);
|
||||
marker.bindTooltip(
|
||||
`<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, direction: "top", offset: [0, -30] }
|
||||
);
|
||||
|
||||
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);
|
||||
// Nach der Initialisierung der Map und Setzen im State kannst du Funktionen aufrufen, die `map` benötigen.
|
||||
initMap.whenReady(() => {
|
||||
console.log("Karte ist jetzt bereit und initialisiert.");
|
||||
// Rufe hier Funktionen auf, die eine initialisierte Karte benötigen.
|
||||
});
|
||||
}
|
||||
}, [map, locations, onLocationUpdate]); */
|
||||
}, [mapRef, map]); // Prüfe die Abhängigkeiten sorgfältig
|
||||
|
||||
//------------------------------------------
|
||||
function parsePoint(pointString) {
|
||||
@@ -378,14 +332,14 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
};
|
||||
|
||||
const zoomIn = (e) => {
|
||||
newMap.flyTo(e.latlng, 12);
|
||||
initMap.flyTo(e.latlng, 12);
|
||||
};
|
||||
|
||||
const zoomOut = (e) => {
|
||||
fly();
|
||||
};
|
||||
const centerHere = (e) => {
|
||||
newMap.panTo(e.latlng);
|
||||
initMap.panTo(e.latlng);
|
||||
};
|
||||
|
||||
const showCoordinates = (e) => {
|
||||
@@ -521,7 +475,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
var y = 7.739617925303934;
|
||||
var zoom = 7;
|
||||
|
||||
newMap.flyTo([x, y], zoom);
|
||||
initMap.flyTo([x, y], zoom);
|
||||
}
|
||||
|
||||
function getIconPath(status, iconNumber, marker) {
|
||||
@@ -553,137 +507,6 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
return path;
|
||||
}
|
||||
|
||||
//------------------------------------------
|
||||
//\talas5\TileMap\img\icons\icon1.png
|
||||
// minor-marker-icon-23.png
|
||||
|
||||
// Marker hinzufügen für GisStationsStaticDistrict
|
||||
/* useEffect(() => {
|
||||
// Stellen Sie sicher, dass sowohl `map` als auch `oms` initialisiert sind
|
||||
if (!map || !oms) {
|
||||
console.error("Map or OMS is not initialized");
|
||||
return;
|
||||
}
|
||||
|
||||
// Alte Marker entfernen, indem alle Marker, die durch OMS verwaltet werden, gelöscht werden
|
||||
oms.clearMarkers();
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
|
||||
// Neue Marker für jede Station hinzufügen
|
||||
GisStationsStaticDistrict.forEach((station) => {
|
||||
// Filter für Statusobjekte dieser spezifischen Station
|
||||
const matchingStatuses = GisStationsStatusDistrict.filter(
|
||||
(status) => status.IdLD === station.IdLD
|
||||
);
|
||||
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: "default-icon.png", // Default, wird geändert
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
}),
|
||||
}).addTo(map);
|
||||
|
||||
// Popup beim Überfahren mit der Maus öffnen
|
||||
marker.on("mouseover", function (e) {
|
||||
this.openPopup();
|
||||
});
|
||||
|
||||
// Popup schließen, wenn die Maus den Marker verlässt
|
||||
marker.on("mouseout", function (e) {
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
// String-Zusammenstellung für das Popup-Infofenster
|
||||
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("");
|
||||
|
||||
// Bestimmen des Icons basierend auf dem Status
|
||||
let iconPath = getIconPath(
|
||||
matchingStatuses[0]?.Na || "",
|
||||
station.Icon,
|
||||
marker
|
||||
);
|
||||
|
||||
marker.setIcon(
|
||||
L.icon({
|
||||
iconUrl: iconPath,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
})
|
||||
);
|
||||
// Check if the icon path includes 'critical' and initiate bouncing
|
||||
if (
|
||||
iconPath.includes("critical") ||
|
||||
iconPath.includes("major") ||
|
||||
iconPath.includes("minor") ||
|
||||
iconPath.includes("system")
|
||||
) {
|
||||
marker.setBouncingOptions({
|
||||
bounceHeight: 15,
|
||||
contractHeight: 12,
|
||||
bounceSpeed: 52,
|
||||
contractSpeed: 52,
|
||||
shadowAngle: null,
|
||||
});
|
||||
marker.bounce(3);
|
||||
}
|
||||
// Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
|
||||
if (station.LD_Name === "GMA Littwin (TEST)") {
|
||||
marker.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
|
||||
{
|
||||
permanent: true,
|
||||
direction: "right",
|
||||
opacity: 1, // Tooltip immer sichtbar
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
).addTo(GMA);
|
||||
} else {
|
||||
marker.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
|
||||
{
|
||||
permanent: false,
|
||||
direction: "right",
|
||||
opacity: 0,
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
).addTo(GMA);
|
||||
}
|
||||
// Marker zu OMS und der Karte hinzufügen
|
||||
oms.addMarker(marker);
|
||||
marker.addTo(map).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}<br>
|
||||
`);
|
||||
let LocID = station.IdLocation;
|
||||
|
||||
});
|
||||
|
||||
}, [map, oms, GisStationsStaticDistrict, GisStationsStatusDistrict]);
|
||||
|
||||
//------------------------------------------ */
|
||||
//------------------------------------------ */
|
||||
//useEffect zusammen von MySQL Daten bank und von APIs
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
@@ -719,451 +542,149 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
//-----------------------------------------------------------------
|
||||
// TALAS Marker hinzufügen
|
||||
//-----------------------------------------------------------------
|
||||
|
||||
const [talasVisible, setTalasVisible] = useRecoilState(mapLayersState);
|
||||
|
||||
const [talasMarkers, setTalasMarkers] = useState([]);
|
||||
// Daten von einer externen Quelle laden
|
||||
useEffect(() => {
|
||||
if (!map) return;
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker) {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
});
|
||||
async function fetchData() {
|
||||
try {
|
||||
const responses = await Promise.all([
|
||||
fetch(config.mapGisStationsStaticDistrictUrl),
|
||||
fetch(config.mapGisStationsStatusDistrictUrl),
|
||||
]);
|
||||
const [jsonResponse, statusResponse] = await Promise.all(
|
||||
responses.map((res) => res.json())
|
||||
);
|
||||
|
||||
// Marker für lokale MySQL-Daten
|
||||
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,
|
||||
});
|
||||
if (
|
||||
jsonResponse &&
|
||||
jsonResponse.Points &&
|
||||
statusResponse &&
|
||||
statusResponse.Statis
|
||||
) {
|
||||
const statisMap = new Map(
|
||||
statusResponse.Statis.map((s) => [s.IdLD, s])
|
||||
);
|
||||
let markersData = jsonResponse.Points.filter(
|
||||
(p) => p.System === 1
|
||||
).map((p) => {
|
||||
const statis = statisMap.get(p.IdLD);
|
||||
const marker = L.marker([p.X, p.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: statis
|
||||
? `img/icons/${statis.Na}-marker-icon-${p.Icon}.png`
|
||||
: `img/icons/marker-icon-${p.Icon}.png`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
}),
|
||||
bounceOnAdd: !!statis,
|
||||
});
|
||||
|
||||
marker.bindPopup(
|
||||
`<div class="bg-red-500 text-red p-2 translate-y-8"><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, closeButton: true }
|
||||
);
|
||||
marker.bindTooltip(
|
||||
`<div class=" text-red p-2 "><b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}</div>`,
|
||||
{ permanent: false, direction: "top", offset: [0, -30] }
|
||||
);
|
||||
|
||||
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);
|
||||
|
||||
/* if (marker[GisStationsStatusDistrict.IdLD].options.system === 1) {
|
||||
if (namesArray.includes("TALAS")) {
|
||||
marker[GisStationsStatusDistrict.IdLD].addTo(TALAS);
|
||||
console.log("TALAS system added");
|
||||
}
|
||||
} */
|
||||
});
|
||||
|
||||
// Marker für GisStationsStaticDistrict
|
||||
GisStationsStaticDistrict.forEach((station) => {
|
||||
//console.log("station 222:", station);
|
||||
// Filter für Statusobjekte dieser spezifischen Station
|
||||
const matchingStatuses = GisStationsStatusDistrict.filter(
|
||||
(status) => status.IdLD === station.IdLD
|
||||
);
|
||||
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: "default-icon.png", // Default, wird geändert
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
}),
|
||||
}).addTo(map);
|
||||
|
||||
// Popup beim Überfahren mit der Maus öffnen
|
||||
marker.on("mouseover", function (e) {
|
||||
this.openPopup();
|
||||
});
|
||||
|
||||
// Popup schließen, wenn die Maus den Marker verlässt
|
||||
marker.on("mouseout", function (e) {
|
||||
this.closePopup();
|
||||
});
|
||||
|
||||
// String-Zusammenstellung für das Popup-Infofenster
|
||||
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("");
|
||||
|
||||
// Bestimmen des Icons basierend auf dem Status
|
||||
let iconPath = getIconPath(
|
||||
matchingStatuses[0]?.Na || "",
|
||||
station.Icon,
|
||||
marker
|
||||
);
|
||||
|
||||
marker.setIcon(
|
||||
L.icon({
|
||||
iconUrl: iconPath,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
})
|
||||
);
|
||||
// Check if the icon path includes 'critical' and initiate bouncing
|
||||
if (
|
||||
iconPath.includes("critical") ||
|
||||
iconPath.includes("major") ||
|
||||
iconPath.includes("minor") ||
|
||||
iconPath.includes("system")
|
||||
) {
|
||||
marker.setBouncingOptions({
|
||||
bounceHeight: 15,
|
||||
contractHeight: 12,
|
||||
bounceSpeed: 52,
|
||||
contractSpeed: 52,
|
||||
shadowAngle: null,
|
||||
});
|
||||
marker.bounce(3);
|
||||
}
|
||||
//-------------------------------------------------------------------------------------------------------------------------
|
||||
//-------------------------------------------------------------------------------------------------------------------------
|
||||
|
||||
// Prüfen, ob der Name der Station "GMA Littwin (TEST)" entspricht
|
||||
if (station.LD_Name === "GMA Littwin (TEST)") {
|
||||
marker
|
||||
.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.Area_Name}</div>`,
|
||||
{
|
||||
permanent: true,
|
||||
direction: "right",
|
||||
opacity: 1, // Tooltip immer sichtbar
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
if (statis) {
|
||||
marker.on("add", () => marker.bounce(3));
|
||||
}
|
||||
)
|
||||
.addTo(GMA);
|
||||
|
||||
// Ein Popup und Tooltip mit Informationen zur Station binden
|
||||
marker.bindPopup(
|
||||
`<b>Station: ${p.LD_Name}</b><br>Device: ${p.Device}`
|
||||
);
|
||||
/* marker.bindTooltip(
|
||||
`<div class="tooltip-content">Station: ${p.LD_Name}</div>`,
|
||||
{
|
||||
permanent: false,
|
||||
direction: "top",
|
||||
}
|
||||
); */
|
||||
|
||||
return marker;
|
||||
});
|
||||
setTalasMarkers(markersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error fetching data: ", error);
|
||||
}
|
||||
}
|
||||
|
||||
if (!map) return;
|
||||
|
||||
fetchData();
|
||||
}, [map]); // Abhängigkeit nur auf `map` setzen
|
||||
|
||||
useEffect(() => {
|
||||
if (map && talasMarkers.length) {
|
||||
talasMarkers.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(TALAS);
|
||||
}
|
||||
}, [map, talasMarkers]); // Abhängigkeiten auf `map` und `talasMarkers` beschränken
|
||||
|
||||
console.log("talasMarkers", talasMarkers);
|
||||
//-------------------------------------------
|
||||
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 {
|
||||
marker
|
||||
.bindTooltip(
|
||||
`<div class="bg-white text-black p-2 border border-gray-300 rounded shadow">${station.LD_Name}</div>`,
|
||||
{
|
||||
permanent: false,
|
||||
direction: "right",
|
||||
opacity: 0,
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
)
|
||||
.addTo(GMA);
|
||||
talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
|
||||
}
|
||||
};
|
||||
|
||||
//console.log("station.System:", station.System);
|
||||
//Durchsuche GisSystemStatic und gib in der console den Attribute Name aus
|
||||
// Apply visibility state to the TALAS layer
|
||||
toggleLayer(mapLayersVisibility.TALAS);
|
||||
}, [map, talasMarkers, mapLayersVisibility.TALAS]); // Depend on map, markers array, and visibility state
|
||||
|
||||
//console.log("GisSystem:", GisSystemStatic);
|
||||
//-------------------------------------------------------------------------------------------------------------------------
|
||||
//-------------------------------------------------------------------------------------------------------------------------
|
||||
// Marker zu OMS und der Karte hinzufügen
|
||||
oms.addMarker(marker);
|
||||
marker.addTo(map).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}<br>
|
||||
`);
|
||||
let LocID = station.IdLocation;
|
||||
//console.log("station test :", station);
|
||||
|
||||
//alle Layers anzeigen unter GMA sind alle
|
||||
// console.log("TALAS Layers:", TALAS);
|
||||
|
||||
//TALAS Layer entfernen
|
||||
// map.removeLayer(layers.TALAS);
|
||||
// wenn station.LD_Name = "GMA Littwin (TEST)" dann entferne den Marker
|
||||
/* if (station.LD_Name === "GMA Littwin (TEST)") {
|
||||
map.removeLayer(marker);
|
||||
}
|
||||
// wenn station.LD_Name = "CPL Bentheim" dann entferne den Marker
|
||||
if (station.LD_Name === "CPL Bentheim") {
|
||||
map.removeLayer(marker);
|
||||
} */
|
||||
map.removeLayer(marker);
|
||||
});
|
||||
}, [map, locations, GisStationsStaticDistrict]); // Fügen Sie weitere Abhängigkeiten hinzu, falls erforderlich
|
||||
|
||||
//-------------------------------------------------------------------------------------------------------------------------
|
||||
//GMA Layer
|
||||
const [layerGMA, setLayerGMA] = useState([]);
|
||||
const [showGMA, setShowGMA] = useState(true);
|
||||
useEffect(() => {
|
||||
if (!map || !GisStationsStaticDistrict) return;
|
||||
|
||||
// Clear existing markers to prevent duplicates
|
||||
GMA.clearLayers();
|
||||
|
||||
// Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
|
||||
if (!oms) {
|
||||
setOms(
|
||||
new OverlappingMarkerSpiderfier(map, {
|
||||
// Konfigurationen für OverlappingMarkerSpiderfier
|
||||
keepSpiderfied: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
GisStationsStaticDistrict.forEach((station) => {
|
||||
if (parseInt(station.System) === 11) {
|
||||
const icon = L.icon({
|
||||
iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41], // iconAnchor set to the tip of the icon
|
||||
});
|
||||
|
||||
const marker = L.marker([station.X, station.Y], { icon });
|
||||
|
||||
// Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
|
||||
marker.addTo(GMA);
|
||||
oms.addMarker(marker);
|
||||
|
||||
// Adjust the popup anchor based on your icon's appearance
|
||||
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>
|
||||
`,
|
||||
{
|
||||
offset: L.point(0, -20),
|
||||
autoClose: false,
|
||||
}
|
||||
);
|
||||
|
||||
// Events for mouse interactions
|
||||
marker.on("mouseover", () => marker.openPopup());
|
||||
marker.on("mouseout", () => marker.closePopup());
|
||||
}
|
||||
});
|
||||
|
||||
// Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
|
||||
//GMA.addTo(map);
|
||||
if (!map) return;
|
||||
if (showGMA) {
|
||||
GMA.addTo(map);
|
||||
} else {
|
||||
GMA.remove();
|
||||
}
|
||||
setLayerGMA(GMA);
|
||||
//console.log("layerGMA:", layerGMA);
|
||||
console.log("GMA layerGroup:", GMA);
|
||||
}, [map, GisStationsStaticDistrict, oms]);
|
||||
//---------------------------------------------------------------------------------
|
||||
//-------------------------------------------------------------------------------------------------------------------------
|
||||
//TALAS Layer
|
||||
const [layerTALAS, setLayerTALAS] = useState([]);
|
||||
const [showTALAS, setShowTALAS] = useState(true);
|
||||
useEffect(() => {
|
||||
if (!map || !GisStationsStaticDistrict) return;
|
||||
|
||||
// Clear existing markers to prevent duplicates
|
||||
TALAS.clearLayers();
|
||||
|
||||
// Wenn nicht schon vorhanden, erstellen Sie eine Instanz von OverlappingMarkerSpiderfier
|
||||
if (!oms) {
|
||||
setOms(
|
||||
new OverlappingMarkerSpiderfier(map, {
|
||||
// Konfigurationen für OverlappingMarkerSpiderfier
|
||||
keepSpiderfied: true,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
GisStationsStaticDistrict.forEach((station) => {
|
||||
if (parseInt(station.System) === 1) {
|
||||
const icon = L.icon({
|
||||
iconUrl: `TileMap/img/icons/marker-icon-${station.Icon}.png`,
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41], // iconAnchor set to the tip of the icon
|
||||
});
|
||||
|
||||
const marker = L.marker([station.X, station.Y], { icon });
|
||||
|
||||
// Hier fügen wir den Marker sowohl zum Layer als auch zu OverlappingMarkerSpiderfier hinzu
|
||||
marker.addTo(TALAS);
|
||||
oms.addMarker(marker);
|
||||
|
||||
// Adjust the popup anchor based on your icon's appearance
|
||||
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>
|
||||
`,
|
||||
{
|
||||
offset: L.point(0, -20),
|
||||
autoClose: false,
|
||||
}
|
||||
);
|
||||
|
||||
// Events for mouse interactions
|
||||
marker.on("mouseover", () => marker.openPopup());
|
||||
marker.on("mouseout", () => marker.closePopup());
|
||||
}
|
||||
});
|
||||
|
||||
// Hier fügen wir den Layer zur Karte hinzu, nachdem alle Marker hinzugefügt wurden
|
||||
//TALAS.addTo(map);
|
||||
if (showTALAS) {
|
||||
TALAS.addTo(map);
|
||||
} else {
|
||||
console.log("Removing TALAS from map");
|
||||
TALAS.remove();
|
||||
}
|
||||
setLayerTALAS(TALAS);
|
||||
//console.log("layerTALAS:", layerTALAS);
|
||||
console.log("TALAS layerGroup:", TALAS);
|
||||
}, [map, GisStationsStaticDistrict, oms, showTALAS]);
|
||||
//---------------------------------------------------------------------------------
|
||||
|
||||
//console.log("GisStationsStatusDistrict:", GisStationsStatusDistrict);
|
||||
const handleCheckboxChange = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
TALAS: checked,
|
||||
}));
|
||||
};
|
||||
//------------------------------------------
|
||||
/* useEffect(() => {
|
||||
if (!map || !GisStationsStaticDistrict.length || !GisSystemStatic.length)
|
||||
return;
|
||||
|
||||
// Alte Marker löschen
|
||||
map.eachLayer((layer) => {
|
||||
if (layer instanceof L.Marker) {
|
||||
map.removeLayer(layer);
|
||||
// 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
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
// Neuen Markern basierend auf den System IDs zuordnen
|
||||
GisStationsStaticDistrict.forEach((station) => {
|
||||
// Finden des entsprechenden System-Objekts
|
||||
const system = GisSystemStatic.find((s) => s.IdSystem === station.System);
|
||||
console.log("System idsystem:", system);
|
||||
console.log("Station system:", station);
|
||||
//station Object zu layerGroup hinzufügen
|
||||
|
||||
if (system) {
|
||||
const marker = L.marker([station.X, station.Y], {
|
||||
icon: L.icon({
|
||||
iconUrl: "default-icon.png",
|
||||
iconSize: [25, 41],
|
||||
iconAnchor: [12, 41],
|
||||
popupAnchor: [1, -34],
|
||||
shadowSize: [41, 41],
|
||||
}),
|
||||
});
|
||||
|
||||
// Marker dem entsprechenden Layer hinzufügen
|
||||
if (layers[system.LayerName]) {
|
||||
layers[system.LayerName].addLayer(marker);
|
||||
}
|
||||
//zeige alle Marker des Layers an
|
||||
//console.log("Layer GMA:", TALAS);
|
||||
|
||||
// Optional: Popup oder Tooltip hinzufügen
|
||||
marker.bindPopup(
|
||||
`Station: ${station.LD_Name}<br>System: ${system.Name}`
|
||||
);
|
||||
}
|
||||
});
|
||||
console.log("layerGroup GMA :", GMA._layers);
|
||||
console.log("layer TALAS :", layers.GMA._layers);
|
||||
}, [map, GisStationsStaticDistrict, GisSystemStatic]); */
|
||||
|
||||
//------------------------------------------
|
||||
/* useEffect(() => {
|
||||
if (map) {
|
||||
Object.keys(layerVisibility).forEach((layerName) => {
|
||||
const layer = layers[layerName];
|
||||
if (layer) {
|
||||
console.log(
|
||||
`Updating layer ${layerName}: ${layerVisibility[layerName] ? "add" : "remove"}`
|
||||
);
|
||||
if (layerVisibility[layerName]) {
|
||||
map.addLayer(layer);
|
||||
} else {
|
||||
map.removeLayer(layer);
|
||||
}
|
||||
} else {
|
||||
console.error(
|
||||
"Versuch, nicht definierten Layer zu manipulieren:",
|
||||
layerName
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
}, [layerVisibility, map]); */
|
||||
// Apply visibility state to the TALAS layer
|
||||
toggleLayer(mapLayersVisibility.TALAS);
|
||||
}, [map, talasMarkers, mapLayersVisibility.TALAS]);
|
||||
|
||||
//------------------------------------------ */
|
||||
/* let uniqueIdLDsData = [];
|
||||
let Tooltip = [];
|
||||
|
||||
for (let index = 0; index < uniqueIdLDsData.length; index++) {
|
||||
let element = uniqueIdLDsData[index].split(",");
|
||||
let lat = element[0];
|
||||
let lng = element[1];
|
||||
let ID = element[2];
|
||||
let IdLD = element[3];
|
||||
let LocID = element[4];
|
||||
|
||||
Tooltip[LocID] = L.marker([lat, lng], { icon: invisibleMarker })
|
||||
.bindTooltip(
|
||||
'<div id="tip-' +
|
||||
LocID +
|
||||
'">' +
|
||||
'<div id="areaname' +
|
||||
LocID +
|
||||
'" style="font-weight:700;font-size:0.9rem">---</div>' +
|
||||
'<div id="value1-' +
|
||||
LocID +
|
||||
'" style="font-weight:700;color:blue">---</div>' +
|
||||
'<div id="value2-' +
|
||||
LocID +
|
||||
'" style="font-weight:700;color:red">---</div>' +
|
||||
'<div id="value3-' +
|
||||
LocID +
|
||||
'" style="font-weight:700;color:#ECC5C0">---</div>' +
|
||||
'<div id="value4-' +
|
||||
LocID +
|
||||
'" style="font-weight:700;color:green">---</div>' +
|
||||
"</div>",
|
||||
{
|
||||
permanent: true,
|
||||
direction: "right",
|
||||
opacity: 0,
|
||||
offset: L.point({ x: 10, y: 0 }),
|
||||
}
|
||||
)
|
||||
.openTooltip()
|
||||
.addTo(GMA);
|
||||
} */
|
||||
|
||||
//------------------------------------------
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataSheet className="z-50" />
|
||||
|
||||
<div
|
||||
id="map"
|
||||
ref={mapRef}
|
||||
|
||||
Reference in New Issue
Block a user