Ismail/nodeMap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Marker-Duplikate & Spiderfy repariert | version 1.1.230

Browse Source
This commit is contained in:
ISA
2025-06-04 08:23:55 +02:00
parent 66afc1cee7
commit 569790d35f
6 changed files with 273 additions and 174 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
View File

@@ -1,19 +1,22 @@
// /components/uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js
import React, { useEffect, useState } from "react";
import { setSelectedArea } from "../../../redux/slices/selectedAreaSlice";
import EditModeToggle from "./EditModeToggle";
import { setSelectedArea } from "@/redux/slices/selectedAreaSlice";
import EditModeToggle from "@/components/uiWidgets/mapLayersControlPanel/EditModeToggle";
import { useSelector, useDispatch } from "react-redux";
import { selectPolylineVisible, setPolylineVisible } from "../../../redux/slices/database/polylines/polylineLayerVisibleSlice";
import { selectGisSystemStatic } from "../../../redux/slices/webservice/gisSystemStaticSlice";
import { selectGisStationsStaticDistrict } from "../../../redux/slices/webservice/gisStationsStaticDistrictSlice";
import { selectMapLayersState, setLayerVisibility } from "../../../redux/slices/mapLayersSlice";
import { setVisible } from "../../../redux/slices/database/pois/poiLayerVisibleSlice";
import { incrementZoomTrigger } from "../../../redux/slices/zoomTriggerSlice";
import {
selectPolylineVisible,
setPolylineVisible,
} from "@/redux/slices/database/polylines/polylineLayerVisibleSlice";
import { selectGisSystemStatic } from "@/redux/slices/webservice/gisSystemStaticSlice";
import { selectGisStationsStaticDistrict } from "@/redux/slices/webservice/gisStationsStaticDistrictSlice";
import { selectMapLayersState, setLayerVisibility } from "@/redux/slices/mapLayersSlice";
import { setVisible } from "@/redux/slices/database/pois/poiLayerVisibleSlice";
import { incrementZoomTrigger } from "@/redux/slices/zoomTriggerSlice";
function MapLayersControlPanel() {
const [editMode, setEditMode] = useState(false); // Zustand für editMode
const poiVisible = useSelector((state) => state.poiLayerVisible.visible);
const setPoiVisible = (value) => dispatch(setVisible(value));
const poiVisible = useSelector(state => state.poiLayerVisible.visible);
const setPoiVisible = value => dispatch(setVisible(value));
const dispatch = useDispatch();
const mapLayersVisibility = useSelector(selectMapLayersState);
const [stationListing, setStationListing] = useState([]);
@@ -23,14 +26,17 @@ function MapLayersControlPanel() {
const polylineVisible = useSelector(selectPolylineVisible);
const handlePolylineCheckboxChange = (event) => {
const handlePolylineCheckboxChange = event => {
const checked = event.target.checked;
dispatch(setPolylineVisible(checked));
localStorage.setItem("polylineVisible", checked);
if (checked) {
dispatch(setLayerVisibility({ layer: "TALAS", visibility: true }));
localStorage.setItem("mapLayersVisibility", JSON.stringify({ ...mapLayersVisibility, TALAS: true }));
localStorage.setItem(
"mapLayersVisibility",
JSON.stringify({ ...mapLayersVisibility, TALAS: true })
);
}
};
@@ -49,7 +55,7 @@ function MapLayersControlPanel() {
const storedMapLayersVisibility = localStorage.getItem("mapLayersVisibility");
if (storedMapLayersVisibility) {
const parsedVisibility = JSON.parse(storedMapLayersVisibility);
Object.keys(parsedVisibility).forEach((key) => {
Object.keys(parsedVisibility).forEach(key => {
dispatch(setLayerVisibility({ layer: key, visibility: parsedVisibility[key] }));
});
}
@@ -59,18 +65,20 @@ function MapLayersControlPanel() {
setEditMode(storedEditMode === "true");
}, [setPoiVisible, dispatch]); // ✅ `setMapLayersVisibility` entfernt
const handleAreaChange = (event) => {
const handleAreaChange = event => {
const selectedIndex = event.target.options.selectedIndex;
const areaName = event.target.options[selectedIndex].text;
dispatch(setSelectedArea(areaName));
};
useEffect(() => {
const allowedSystems = Array.isArray(GisSystemStatic) ? new Set(GisSystemStatic.filter((system) => system.Allow === 1).map((system) => system.IdSystem)) : new Set();
const allowedSystems = Array.isArray(GisSystemStatic)
? new Set(GisSystemStatic.filter(system => system.Allow === 1).map(system => system.IdSystem))
: new Set();
const seenNames = new Set();
const filteredAreas = GisStationsStaticDistrict?.Points?.length
? GisStationsStaticDistrict.Points.filter((item) => {
? GisStationsStaticDistrict.Points.filter(item => {
const isUnique = !seenNames.has(item.Area_Name) && allowedSystems.has(item.System);
if (isUnique) {
seenNames.add(item.Area_Name);
@@ -88,7 +96,7 @@ function MapLayersControlPanel() {
const seenSystemNames = new Set();
const filteredSystems = Array.isArray(GisSystemStatic)
? GisSystemStatic.filter((item) => {
? GisSystemStatic.filter(item => {
const isUnique = !seenSystemNames.has(item.Name) && item.Allow === 1;
if (isUnique) {
seenSystemNames.add(item.Name);
@@ -111,7 +119,10 @@ function MapLayersControlPanel() {
const { checked } = event.target;
dispatch(setLayerVisibility({ layer: key, visibility: checked }));
localStorage.setItem("mapLayersVisibility", JSON.stringify({ ...mapLayersVisibility, [key]: checked }));
localStorage.setItem(
"mapLayersVisibility",
JSON.stringify({ ...mapLayersVisibility, [key]: checked })
);
setTimeout(() => {
const event = new Event("visibilityChanged");
@@ -119,7 +130,7 @@ function MapLayersControlPanel() {
}, 0);
};
const handlePoiCheckboxChange = (event) => {
const handlePoiCheckboxChange = event => {
const { checked } = event.target;
setPoiVisible(checked);
localStorage.setItem("poiVisible", checked); // Store POI visibility in localStorage
@@ -145,12 +156,15 @@ function MapLayersControlPanel() {
}
if (!GisStationsStaticDistrict.Points || !Array.isArray(GisStationsStaticDistrict.Points)) {
console.warn("⚠️ GisStationsStaticDistrict.Points ist nicht vorhanden oder kein Array.", GisStationsStaticDistrict);
console.warn(
"⚠️ GisStationsStaticDistrict.Points ist nicht vorhanden oder kein Array.",
GisStationsStaticDistrict
);
return;
}
const seenNames = new Set();
const filteredAreas = GisStationsStaticDistrict.Points.filter((item) => {
const filteredAreas = GisStationsStaticDistrict.Points.filter(item => {
if (!item.Area_Name) return false; // Sicherstellen, dass Area_Name existiert
const isUnique = !seenNames.has(item.Area_Name);
if (isUnique) {
@@ -164,12 +178,20 @@ function MapLayersControlPanel() {
//---------------------------
return (
<div id="mainDataSheet" className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg">
<div
id="mainDataSheet"
className="absolute top-3 right-3 w-1/6 min-w-[300px] max-w-[400px] z-10 bg-white p-2 rounded-lg shadow-lg"
>
<div className="flex flex-col gap-4 p-4">
<div className="flex items-center justify-between space-x-2">
<select onChange={handleAreaChange} id="stationListing" className="border-solid-1 p-2 rounded ml-1 font-semibold" style={{ minWidth: "150px", maxWidth: "200px" }}>
<select
onChange={handleAreaChange}
id="stationListing"
className="border-solid-1 p-2 rounded ml-1 font-semibold"
style={{ minWidth: "150px", maxWidth: "200px" }}
>
<option value="Station wählen">Station wählen</option>
{stationListing.map((station) => (
{stationListing.map(station => (
<option key={station.id} value={station.id}>
{station.name}
</option>
@@ -177,19 +199,24 @@ function MapLayersControlPanel() {
</select>
<div className="flex items-center space-x-2">
<EditModeToggle />
<img src="/img/expand-icon.svg" alt="Expand" className="h-6 w-6 cursor-pointer" onClick={handleIconClick} />
<img
src="/img/expand-icon.svg"
alt="Expand"
className="h-6 w-6 cursor-pointer"
onClick={handleIconClick}
/>
</div>
</div>
{/* Checkboxen mit Untermenüs */}
<div className="flex flex-col gap-2">
{systemListing.map((system) => (
{systemListing.map(system => (
<div key={system.id} className="flex flex-col">
<div className="flex items-center">
<input
type="checkbox"
checked={mapLayersVisibility[system.key] || false}
onChange={(e) => handleCheckboxChange(system.key, e)}
onChange={e => handleCheckboxChange(system.key, e)}
id={`system-${system.id}`}
disabled={editMode} // Checkbox deaktiviert, wenn editMode aktiv ist
/>
@@ -218,7 +245,12 @@ function MapLayersControlPanel() {
))}
<div className="flex items-center">
<input type="checkbox" checked={poiVisible} onChange={handlePoiCheckboxChange} id="poi-checkbox" />
<input
type="checkbox"
checked={poiVisible}
onChange={handlePoiCheckboxChange}
id="poi-checkbox"
/>
<label htmlFor="poi-checkbox" className="text-sm ml-2">
POIs
</label>