diff --git a/components/CoordinatePopup.js b/components/CoordinatePopup.js new file mode 100644 index 000000000..285a349e4 --- /dev/null +++ b/components/CoordinatePopup.js @@ -0,0 +1,34 @@ +// components/CoordinatePopup.js +import React from "react"; + +const CoordinatePopup = ({ isOpen, coordinates, onClose }) => { + if (!isOpen) return null; + + return ( +
+

Koordinaten

+

{coordinates}

+ + +
+ ); +}; + +export default CoordinatePopup; diff --git a/components/MapComponent.js b/components/MapComponent.js index 674c773e7..09e342b38 100644 --- a/components/MapComponent.js +++ b/components/MapComponent.js @@ -64,6 +64,7 @@ import { useSelector, useDispatch } from "react-redux"; import { selectCurrentPoi, setCurrentPoi, clearCurrentPoi } from "../redux/slices/currentPoiSlice"; import CoordinateInput from "./CoordinateInput"; import CoordinateModal from "./CoordinateModal"; +import CoordinatePopup from "./CoordinatePopup"; const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const dispatch = useDispatch(); @@ -84,6 +85,16 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { setCurrentCoordinates(coordinates); setIsModalOpen(true); }; + + const [isPopupOpen, setIsPopupOpen] = useState(false); + + const openPopupWithCoordinates = (e) => { + const coordinates = `${e.latlng.lat.toFixed(5)}, ${e.latlng.lng.toFixed(5)}`; + setCurrentCoordinates(coordinates); + setIsPopupOpen(true); + }; + + const closePopup = () => setIsPopupOpen(false); const [currentCoordinates, setCurrentCoordinates] = useState(""); const poiLayerVisible = useRecoilValue(poiLayerVisibleState); const [isRightsLoaded, setIsRightsLoaded] = useState(false); @@ -147,7 +158,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { const { lineColors, tooltipContents } = useLineData(webserviceGisLinesStatusUrl, setLineStatusData); const [polylines, setPolylines] = useState([]); const [markers, setMarkers] = useState([]); - const closePopup = () => setShowPopup(false); + const [newPoint, setNewPoint] = useState(null); const [newCoords, setNewCoords] = useState(null); const [tempMarker, setTempMarker] = useState(null); @@ -921,11 +932,18 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => { } }; //-------------------------------------------- - useEffect(() => { + /* useEffect(() => { if (map && !menuItemAdded) { addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, openModalWithCoordinates, hasRights, setShowPopup, setPopupCoordinates); } - }, [map, menuItemAdded, hasRights]); + }, [map, menuItemAdded, hasRights]); */ + //-------------------------------------------- + + useEffect(() => { + if (map && !menuItemAdded) { + addItemsToMapContextMenu(map, menuItemAdded, setMenuItemAdded, openPopupWithCoordinates); + } + }, [map, menuItemAdded]); //-------------------------------------------- return ( @@ -952,7 +970,7 @@ const MapComponent = ({ locations, onLocationUpdate, lineCoordinates }) => {
- +
diff --git a/components/useMapContextMenu.js b/components/useMapContextMenu.js index b65db4175..f39996a5a 100644 --- a/components/useMapContextMenu.js +++ b/components/useMapContextMenu.js @@ -2,12 +2,13 @@ import { toast } from "react-toastify"; import { zoomIn, zoomOut, centerHere } from "../utils/zoomAndCenterUtils"; -const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openModalWithCoordinates, hasRights, setShowPopup, setPopupCoordinates) => { +// components/useMapContextMenu.js +const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openPopupWithCoordinates) => { if (!menuItemAdded && map && map.contextmenu) { map.contextmenu.addItem({ text: "Koordinaten anzeigen", icon: "img/not_listed_location.png", - callback: openModalWithCoordinates, + callback: openPopupWithCoordinates, // Aufruf des Popup-Callbacks }); map.contextmenu.addItem({ separator: true }); @@ -15,39 +16,27 @@ const addItemsToMapContextMenu = (map, menuItemAdded, setMenuItemAdded, openModa map.contextmenu.addItem({ text: "Reinzoomen", icon: "img/zoom_in.png", - callback: (e) => zoomIn(e, map), + callback: (e) => { + map.setZoom(map.getZoom() + 1); + }, }); map.contextmenu.addItem({ text: "Rauszoomen", icon: "img/zoom_out.png", - callback: () => zoomOut(map), + callback: () => { + map.setZoom(map.getZoom() - 1); + }, }); map.contextmenu.addItem({ text: "Hier zentrieren", icon: "img/center_focus.png", - callback: (e) => centerHere(e, map), + callback: (e) => { + map.panTo(e.latlng); + }, }); - if (localStorage.getItem("editMode") === "true") { - map.contextmenu.addItem({ separator: true }); - map.contextmenu.addItem({ - text: "POI hinzufügen", - icon: "img/add_station.png", - className: "background-red", - callback: (event) => { - const editMode = localStorage.getItem("editMode") === "true"; - if (editMode && hasRights) { - setPopupCoordinates(event.latlng); - setShowPopup(true); - } else { - toast.error("Benutzer hat keine Berechtigung zum Hinzufügen."); - } - }, - }); - } - setMenuItemAdded(true); } };