Linie zu TALAS Layer hinzugefügt

components/MapComponent.js

@@ -1,6 +1,7 @@
 // components/MapComponent.js
 
 import React, { useEffect, useRef, useState, useMemo, use } from "react";
+import { MapContainer, TileLayer, Polyline, LayerGroup } from "react-leaflet";
 import L, { marker } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import "leaflet-contextmenu/dist/leaflet.contextmenu.css";
@@ -36,7 +37,11 @@ const plusRoundIcon = L.icon({
   className: "absolute top-0 left-0 z-10", // Adjust with Tailwind CSS classes
 });
 
-const MapComponent = ({ locations, onLocationUpdate }) => {
+const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
+  const linePositions = lineCoordinates || [
+    [52.505, 8],
+    [52, 8.5],
+  ];
   const [showAddStationPopup, setShowAddStationPopup] = useState(false);
   const [userRights, setUserRights] = useState(null);
   const setSelectedPoi = useSetRecoilState(selectedPoiState);
@@ -117,6 +122,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
   const GMA = new L.layerGroup();
   const Sonstige = new L.layerGroup();
   const TALASICL = new L.layerGroup();
+  const lineLayer = new L.LayerGroup();
 
   const [gisSystemStaticLoaded, setGisSystemStaticLoaded] = useState(false);
   const baseUrl = "http://10.10.0.13/talas5/devices/";
@@ -1488,6 +1494,9 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
     const toggleLayer = (isVisible) => {
       if (isVisible) {
         talasMarkers.forEach((marker) => marker.addTo(map)); // Ensure markers are added
+        const polyline = L.polyline(linePositions, { color: "red" }).addTo(
+          TALAS
+        );
       } else {
         talasMarkers.forEach((marker) => map.removeLayer(marker)); // Remove markers individually
       }