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

Füge: Kontextmenü-Option für "Station hinzufügen" mit Koordinaten-Popup hinzu

Browse Source 
Füge: Kontextmenü-Option für "Station hinzufügen" mit Koordinaten-Popup hinzu
This commit is contained in:
ISA
2024-05-05 14:01:59 +02:00
parent ce8d1f5a19
commit 17f3025523
1 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/MapComponent.js
View File

@@ -24,7 +24,7 @@ import { poiReadFromDbTriggerAtom } from '../store/atoms/poiReadFromDbTriggerAto
const MapComponent = ({ locations, onLocationUpdate }) => { const MapComponent = ({ locations, onLocationUpdate }) => {
const [showPopup, setShowPopup] = useState(false); const [showPopup, setShowPopup] = useState(false);
const [popupCoordinates, setPopupCoordinates] = useState({ lat: 52.52, lng: 13.4050 }); // Beispielkoordinaten
const openPopup = () => setShowPopup(true); const openPopup = () => setShowPopup(true);
const closePopup = () => setShowPopup(false); const closePopup = () => setShowPopup(false);
@@ -33,6 +33,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
console.log("Neue Station:", stationData); console.log("Neue Station:", stationData);
closePopup(); // Schließt das Popup nach dem Hinzufügen closePopup(); // Schließt das Popup nach dem Hinzufügen
}; };
// Beispiel zum Öffnen des Popups mit bestimmten Koordinaten
const openAddStationPopupWithCoordinates = (lat, lng) => {
setPopupCoordinates({ lat, lng });
setShowPopup(true);
};
const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom); const poiReadTrigger = useRecoilValue(poiReadFromDbTriggerAtom);
const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden const [poiTypData, setPoiTypData] = useState(poiTypState); // Recoil State verwenden
@@ -271,7 +277,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
zoomControl: false, zoomControl: false,
contextmenu: true, contextmenu: true,
contextmenuItems: [ contextmenuItems: [
{ text: "Station hinzufügen"}, { text: "Station hinzufügen", callback: addStationCallback },
{ {
text: "Station öffnen (Tab)", text: "Station öffnen (Tab)",
icon: "img/screen_new.png", icon: "img/screen_new.png",
@@ -422,6 +428,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
map.removeLayer(GMA); map.removeLayer(GMA);
loadData(); loadData();
}; };
// Kontextmenü Callback für "Station hinzufügen"
const addStationCallback = (event) => {
setPopupCoordinates(event.latlng); // Koordinaten des Klicks verwenden
setShowPopup(true); // Popup öffnen
};
//-----Kontextmenu----ende------------ //-----Kontextmenu----ende------------
// Ensure this function is only called when map is initialized and available // Ensure this function is only called when map is initialized and available
/* const showAddStationPopup = (e, map) => { /* const showAddStationPopup = (e, map) => {
@@ -1516,18 +1528,33 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
return ( return (
<> <>
<div> <div>
<button onClick={openPopup}>Neue Station hinzufügen</button> {/* Popup als Modal anzeigen */}
{showPopup && (
{/* Direkt als JSX verwenden */} <div style={{
{showPopup && ( position: "fixed",
<ShowAddStationPopup top: 0, left: 0, right: 0, bottom: 0,
onClose={closePopup} backgroundColor: "rgba(0,0,0,0.5)",
onSubmit={handleAddStation} display: "flex",
latlng={{ lat: 52.5200, lng: 13.4050 }} // Beispielkoordinaten justifyContent: "center",
/> alignItems: "center",
)} zIndex: 1000
</div> }}>
<div style={{
backgroundColor: "white",
padding: "20px",
borderRadius: "10px",
boxShadow: "0 4px 8px rgba(0,0,0,0.2)"
}}>
<ShowAddStationPopup
onClose={closePopup}
onSubmit={handleAddStation}
latlng={popupCoordinates}
/>
</div>
</div>
)}
</div>
<DataSheet className="z-50" /> <DataSheet className="z-50" />
<div <div