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

cleanup: MapComponent.js

Browse Source
This commit is contained in:
ISA
2025-05-23 11:34:53 +02:00
parent cb2e038a84
commit 62c508e2c3
2 changed files with 19 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/mainComponent/MapComponent.js
View File

@@ -7,8 +7,6 @@ import "leaflet-contextmenu";
import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet"; //sieht deaktiviert aber ist das nicht so und wird benötigt
import "react-toastify/dist/ReactToastify.css";
import MapLayersControlPanel from "../uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
import { InformationCircleIcon } from "@heroicons/react/20/solid";
import PoiUpdateModal from "../pois/PoiUpdateModal.js";
import { ToastContainer, toast } from "react-toastify";
@@ -23,7 +21,6 @@ import useSmsfunkmodemMarkersLayer from "../../hooks/layers/useSmsfunkmodemMarke
import useBereicheMarkersLayer from "../../hooks/layers/useBereicheMarkersLayer.js";
import { setupPolylines } from "../../utils/polylines/setupPolylines.js";
import { setupPOIs } from "../../utils/setupPOIs.js";
import VersionInfoModal from "../uiWidgets/VersionInfoModal.js";
import useLayerVisibility from "../../hooks/useLayerVisibility.js";
import useLineData from "../../hooks/useLineData.js";
import { useMapComponentState } from "../../hooks/useMapComponentState.js";
@@ -31,8 +28,11 @@ import { updateLocation } from "../../utils/updateBereichUtil.js";
import { selectMapLayersState } from "../../redux/slices/mapLayersSlice";
import { useSelector, useDispatch } from "react-redux";
import { setCurrentPoi } from "../../redux/slices/currentPoiSlice.js";
import CoordinateInput from "../uiWidgets/CoordinateInput.js";
import CoordinatePopup from "../contextmenu/CoordinatePopup.js";
//----------Ui Widgets----------------
import MapLayersControlPanel from "../uiWidgets/mapLayersControlPanel/MapLayersControlPanel.js";
import VersionInfoModal from "../uiWidgets/VersionInfoModal.js";
import CoordinateInput from "../uiWidgets/CoordinateInput.js";
//------------------------Daten aus API--------------------
import { fetchPoiDataService } from "../../services/database/fetchPoiDataByIdService.js";
import { selectPolylineVisible, setPolylineVisible } from "../../redux/slices/polylineLayerVisibleSlice.js";
@@ -63,7 +63,6 @@ import { selectGisLines } from "../../redux/slices/database/gisLinesSlice";
import { selectGisLinesStatus } from "../../redux/slices/webservice/gisLinesStatusSlice";
import { selectGisLinesStatusFromWebservice } from "../../redux/slices/webservice/gisLinesStatusSlice";
import { selectGisUserRightsFromWebservice } from "../../redux/slices/webservice/userRightsSlice";
import { fetchPoiIconsDataThunk } from "../../redux/thunks/database/fetchPoiIconsDataThunk";
import { fetchPoiTypThunk } from "../../redux/thunks/database/fetchPoiTypThunk";
import { selectPoiIconsData, selectPoiIconsStatus } from "../../redux/slices/database/poiIconsDataSlice";
@@ -94,20 +93,13 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const selectedArea = useSelector((state) => state.selectedArea.area);
const linesData = useSelector((state) => state.gisLinesFromDatabase.data);
const gisLinesStatus = useSelector((state) => state.gisLinesStatusFromWebservice.status);
const { data: gisLinesStatusData, status: statusGisLinesStatus } = useSelector(selectGisLinesStatusFromWebservice);
const poiIconsData = useSelector(selectPoiIconsData);
const poiIconsStatus = useSelector(selectPoiIconsStatus);
const poiTypData = useSelector(selectPoiTypData);
const poiTypStatus = useSelector((state) => state.poiTypes.status);
//const poiTypStatus = useSelector(selectPoiTypStatus);
/* useEffect(() => {
console.log("✅ Redux: gisLinesStatusData:", gisLinesStatusData);
}, [gisLinesStatusData]);
*/
//-------------------------------
const { deviceName, setDeviceName } = useMapComponentState();
const [locationDeviceData, setLocationDeviceData] = useState([]);
@@ -228,8 +220,20 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
const ulafMarkersLayerRef = useRef(null);
const sonstigeMarkersLayerRef = useRef(null);
const tkComponentsMarkersRef = useRef(null);
useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, (value) => dispatch(setDisabled(value)));
//------------------------------
const [poiData, setPoiData] = useState([]);
//--------------------------------------------
const handleCoordinatesSubmit = (coords) => {
const [lat, lng] = coords.split(",").map(Number);
if (map && lat && lng) {
map.flyTo([lat, lng], 12); // Zentriere die Karte auf die Koordinaten
}
};
//-----------------------------Map Initialisierung----------------
useInitializeMap(map, mapRef, setMap, setOms, setMenuItemAdded, addItemsToMapContextMenu, hasRights, (value) => dispatch(setDisabled(value)));
//--------------------------------------------------------------------
//-------------------------React Hooks--------------------------------
useEffect(() => {
if (linesData && Array.isArray(linesData)) {
const transformed = linesData.map((item) => ({
@@ -241,9 +245,6 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
}
}, [linesData]);
//--------------------------------------------
const [poiData, setPoiData] = useState([]);
// POIs Popup Informationen anzeigen
useEffect(() => {
dispatch(fetchPoiIconsDataThunk());
dispatch(fetchPoiTypThunk());
@@ -531,7 +532,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
initializeContextMenu();
}, [map]);
//--------------hokks-------------------------------------------
//--------------hooks-------------------------------------------
useGmaMarkersLayer(
map,
@@ -722,14 +723,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
// initGeocoderFeature(map); // Geocoder-Feature initialisieren, kann von .env.local ausgeschaltet werden
}
}, [map]);
//--------------------------------------------
const handleCoordinatesSubmit = (coords) => {
const [lat, lng] = coords.split(",").map(Number);
if (map && lat && lng) {
map.flyTo([lat, lng], 12); // Zentriere die Karte auf die Koordinaten
}
};
//--------------------------------------------
useEffect(() => {