TALAS Checkbox zum ein- und ausblenden von Markers auf dem Map
This commit is contained in:
ISA
@@ -1,12 +1,13 @@
|
||||
// components/DataSheet.js
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useRecoilValue, useRecoilState } from "recoil";
|
||||
import { gisStationsStaticDistrictState } from "../states/gisStationState";
|
||||
import { gisSystemStaticState } from "../states/gisSystemState";
|
||||
import { mapLayersState } from "../states/mapLayersState";
|
||||
|
||||
import { useRecoilState, useRecoilValue } from "recoil";
|
||||
import { gisStationsStaticDistrictState } from "../store/gisStationState";
|
||||
import { gisSystemStaticState } from "../store/gisSystemState";
|
||||
import { mapLayersState } from "../store/mapLayersState";
|
||||
function DataSheet() {
|
||||
const [layers, setLayers] = useRecoilState(mapLayersState);
|
||||
const [mapLayersVisibility, setMapLayersVisibility] =
|
||||
useRecoilState(mapLayersState);
|
||||
// useState für uniqueAreas und stationListing
|
||||
const [uniqueAreas, setUniqueAreas] = useState([]);
|
||||
const [uniqueSystems, setUniqueSystems] = useState([]);
|
||||
const [stationListing, setStationListing] = useState([]);
|
||||
@@ -17,6 +18,13 @@ function DataSheet() {
|
||||
const GisSystemStatic = useRecoilValue(gisSystemStaticState);
|
||||
|
||||
useEffect(() => {
|
||||
console.log(
|
||||
"GisStationsStaticDistrict in DataSheet:",
|
||||
GisStationsStaticDistrict
|
||||
);
|
||||
console.log("GisSystemStatic in DataSheet:", GisSystemStatic);
|
||||
|
||||
// Filtern der eindeutigen Gebiete (Areas) und alphabetisches Sortieren
|
||||
const seenNames = new Set();
|
||||
const filteredAreas = GisStationsStaticDistrict.filter((item) => {
|
||||
const isUnique = !seenNames.has(item.Area_Name);
|
||||
@@ -25,6 +33,7 @@ function DataSheet() {
|
||||
}
|
||||
return isUnique;
|
||||
});
|
||||
|
||||
setUniqueAreas(filteredAreas);
|
||||
|
||||
const seenSystemNames = new Set();
|
||||
@@ -35,45 +44,58 @@ function DataSheet() {
|
||||
}
|
||||
return isUnique;
|
||||
});
|
||||
|
||||
setUniqueSystems(filteredSystems);
|
||||
|
||||
// Erzeugen von stationListing aus uniqueAreas und alphabetisches Sortieren
|
||||
const newStationListing = filteredAreas
|
||||
.map((area, index) => ({ id: index + 1, name: area.Area_Name }))
|
||||
.sort((a, b) => a.name.localeCompare(b.name));
|
||||
.map((area, index) => ({
|
||||
id: index + 1, // Zuweisung einer eindeutigen ID
|
||||
name: area.Area_Name,
|
||||
}))
|
||||
.sort((a, b) => a.name.localeCompare(b.name)); // Alphabetisches Sortieren der Namen
|
||||
|
||||
setStationListing(newStationListing);
|
||||
|
||||
const newSystemListing = filteredSystems.map((system, index) => ({
|
||||
id: index + 1,
|
||||
name: system.Name.replace(/[^a-zA-Z0-9]/g, ""), // Ersetzen von Sonderzeichen
|
||||
displayName: system.Name, // Beibehalten des originalen Namens für die Anzeige
|
||||
//----------
|
||||
const newSystemListing = filteredSystems.map((area, index) => ({
|
||||
id: index + 1, // Zuweisung einer eindeutigen ID
|
||||
name: area.Name,
|
||||
}));
|
||||
setSystemListing(newSystemListing);
|
||||
console.log("System Listing:", systemListing);
|
||||
}, [GisStationsStaticDistrict]);
|
||||
|
||||
console.log("Station Listing:", newStationListing);
|
||||
console.log("System Listing:", newSystemListing);
|
||||
}, [GisStationsStaticDistrict, GisSystemStatic]);
|
||||
const [checkedStations, setCheckedStations] = useState({});
|
||||
|
||||
const handleCheckboxChange = (layerKey) => {
|
||||
console.log(
|
||||
`Ändern der Sichtbarkeit für: ${layerKey}, aktueller Wert: ${layers[layerKey]}`
|
||||
);
|
||||
setLayers((prevLayers) => {
|
||||
const newLayers = {
|
||||
...prevLayers,
|
||||
[layerKey]: !prevLayers[layerKey],
|
||||
};
|
||||
console.log(`Neuer Wert für ${layerKey}: ${newLayers[layerKey]}`);
|
||||
return newLayers;
|
||||
});
|
||||
const handleCheckboxChangeTALAS = (event) => {
|
||||
const { checked } = event.target;
|
||||
setMapLayersVisibility((prev) => ({
|
||||
...prev,
|
||||
TALAS: checked,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleStationChange = (event) => {
|
||||
console.log("Ausgewählte Station:", event.target.value);
|
||||
console.log("Station selected:", event.target.value);
|
||||
};
|
||||
|
||||
const resetView = () => {
|
||||
console.log("Ansicht wird zurückgesetzt.");
|
||||
console.log("View has been reset");
|
||||
};
|
||||
useEffect(() => {
|
||||
console.log("Checked Stations:", checkedStations);
|
||||
// Wenn systemListing.name == "TALAS" ist, gib in der Konsole aus
|
||||
const talasStation = systemListing.find(
|
||||
(station) => station.name === "TALAS"
|
||||
);
|
||||
if (talasStation) {
|
||||
console.log(
|
||||
"TALAS Station ist gecheckt:",
|
||||
checkedStations[talasStation.id]
|
||||
);
|
||||
}
|
||||
}, [checkedStations, systemListing]);
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -82,6 +104,7 @@ function DataSheet() {
|
||||
>
|
||||
<div className="flex flex-col gap-4 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Dropdown */}
|
||||
<select
|
||||
onChange={handleStationChange}
|
||||
id="stationListing"
|
||||
@@ -94,29 +117,25 @@ function DataSheet() {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{/* Icon */}
|
||||
<img
|
||||
src="/img/expand-icon.svg"
|
||||
alt="Expand"
|
||||
className="h-6 w-6 ml-2"
|
||||
/>
|
||||
</div>
|
||||
{systemListing.map((station) => (
|
||||
<div key={station.id} className="flex items-center">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`box-${station.id}`}
|
||||
className="accent-blue-500 checked:bg-blue-500"
|
||||
checked={layers[`show_${station.name}`] || false}
|
||||
onChange={() => handleCheckboxChange(`show_${station.name}`)}
|
||||
/>
|
||||
<label
|
||||
htmlFor={`box-${station.id}`}
|
||||
className="text-sm font-bold ml-2"
|
||||
>
|
||||
{station.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Liste der Stationen mit Checkboxen */}
|
||||
|
||||
<div>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={mapLayersVisibility.TALAS}
|
||||
onChange={handleCheckboxChangeTALAS}
|
||||
/>
|
||||
<label className="text-sm font-bold ml-2">TALAS</label>
|
||||
{/* Weitere Inhalte der Datenblattkomponente */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -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