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

feat: Set default POI type in dropdown based on selected POI

Browse Source
This commit is contained in:
isa
2024-05-25 22:23:25 +02:00
parent 153d423555
commit d7fdda761c
12 changed files with 708 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
components/MapComponent.js
View File

@@ -10,7 +10,7 @@ import dynamic from "next/dynamic";
import "leaflet.smooth_marker_bouncing";
import OverlappingMarkerSpiderfier from "overlapping-marker-spiderfier-leaflet";
import DataSheet from "./DataSheet.js";
import { useRecoilState, useRecoilValue } from "recoil";
import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import { gisStationsStaticDistrictState } from "../store/atoms/gisStationState.js";
import { gisSystemStaticState } from "../store/atoms/gisSystemState.js";
import { mapLayersState } from "../store/atoms/mapLayersState.js";
@@ -21,6 +21,7 @@ import ShowAddStationPopup from "./ShowAddStationPopup";
import { poiReadFromDbTriggerAtom } from "../store/atoms/poiReadFromDbTriggerAtom";
import { InformationCircleIcon } from "@heroicons/react/20/solid"; // oder 'outline'
import PoiUpdateModal from "./PoiUpdateModal.js";
import { selectedPoiState } from "../store/atoms/poiState.js";
//import { createRoot } from "react-dom/client";
@@ -33,11 +34,17 @@ const plusRoundIcon = L.icon({
});
const MapComponent = ({ locations, onLocationUpdate }) => {
const setSelectedPoi = useSetRecoilState(selectedPoiState);
const openPoiUpdateModal = () => setShowPoiUpdateModal(true);
const closePoiUpdateModal = () => setShowPoiUpdateModal(false);
const [showPoiUpdateModal, setShowPoiUpdateModal] = useState(false);
const [currentPoiData, setCurrentPoiData] = useState(null);
const handlePoiSelect = (poiData) => {
setSelectedPoi(poiData); // poiData should be the data of the selected POI
// Open the modal or any other logic
};
const handleEditPoi = (marker) => {
console.log("Selected Marker ID (idPoi):", marker.options.idPoi);
console.log("Selected Marker Description:", marker.options.description);
@@ -71,8 +78,8 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
const zoomTrigger = useRecoilValue(zoomTriggerState);
const offlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "/mapTiles/{z}/{x}/{y}.png";
//const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
const onlineTileLayer = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
//const onlineTileLayer = "http://10.10.0.13:3000/mapTiles/{z}/{x}/{y}.png"; //Talas_v5 Server
// Create map layers
const TALAS = new L.layerGroup();
const ECI = new L.layerGroup();
@@ -930,19 +937,24 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
${poiTypName}<br>
</div>
`);
/**
marker.bindPopup(`
<div>
<b class="text-xl text-black-700">${location.description || "Unbekannt"}</b><br>
Type: ${poiTypName}<br>
Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}
</div>
`);
*/
const poiData = {
id: location.idPoi,
typ: poiTypName,
description: location.description,
};
// Event-Handler hinzufügen
marker.on("mouseover", function () {
this.openPopup();
//Informationen in der Konsole anzeigen
console.log("poiLayer Marker ID:", location.idPoi);
console.log("poiLayer Marker Typ:", poiTypName);
console.log("poiLayer Marker Beschreibung:", location.description);
//Informationen an handlePoiSelect übergeben
handlePoiSelect(poiData);
console.log("poiData in MapComponent.js:", poiData);
});
marker.on("mouseout", function () {
this.closePopup();