Icons für die Stationen für GisStationsStaticDistrict anzeigen von TALAS Server

components/MapComponent.js

@@ -58,6 +58,43 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     fetchData();
   }, []); // Dependency-Array ist leer, um den Effekt nur beim Mount auszuführen
 
+  //------------------------------------------
+  //\talas5\TileMap\img\icons\icon1.png
+  // minor-marker-icon-23.png
+  function getIconPath(iconNumber) {
+    return `http://10.10.0.13/talas5/TileMap/img/icons/minor-marker-icon-${iconNumber}.png`;
+  }
+  // Marker hinzufügen für GisStationsStaticDistrict
+  useEffect(() => {
+    if (map && GisStationsStaticDistrict.length > 0) {
+      // Zuerst alte Marker entfernen
+      map.eachLayer((layer) => {
+        if (layer instanceof L.Marker) {
+          map.removeLayer(layer);
+        }
+      });
+
+      // Neue Marker für jede Station hinzufügen
+      GisStationsStaticDistrict.forEach((station) => {
+        const marker = L.marker([station.X, station.Y], {
+          // X als Breitengrad, Y als Längengrad
+          icon: L.icon({
+            iconUrl: getIconPath(station.Icon),
+            iconSize: [25, 41],
+            iconAnchor: [12, 41],
+            popupAnchor: [1, -34],
+            shadowSize: [41, 41],
+          }),
+        }).addTo(map);
+
+        // Ein Popup mit Informationen zur Station hinzufügen
+        marker
+          .bindPopup(`<b>${station.LD_Name}</b><br>${station.Device}`)
+          .openPopup();
+      });
+    }
+  }, [map, GisStationsStaticDistrict]); // Abhängigkeiten hinzufügen, um sicherzustellen, dass Effekt bei Änderungen neu ausgeführt wird
+
   //------------------------------------------
   useEffect(() => {
     // Prüfen der Internetverbindung beim Start