From ee0118244b4586404dc6c4e32b034620fac1951c Mon Sep 17 00:00:00 2001 From: ISA Date: Tue, 28 May 2024 14:15:00 +0200 Subject: [PATCH] =?UTF-8?q?Linie=20zu=20TALAS=20Layer=20hinzugef=C3=BCgt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/MapComponent.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/components/MapComponent.js b/components/MapComponent.js index 2ab11e12f..e971f5341 100644 --- a/components/MapComponent.js +++ b/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 }