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

poiLayerRef popup per mouseover und verschieben aber poi in MySQL-DB-Tabelle hinzufügen noch nicht

Browse Source
This commit is contained in:
ISA
2024-04-25 18:58:17 +02:00
parent 17afca6115
commit 82ac370c55
2 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/MapComponent.js
View File

@@ -15,7 +15,7 @@ import { gisSystemStaticState } from "../store/gisSystemState";
import { mapLayersState } from "../store/mapLayersState"; import { mapLayersState } from "../store/mapLayersState";
const MapComponent = ({ locations, onLocationUpdate }) => { const MapComponent = ({ locations, onLocationUpdate }) => {
const dbLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker const poiLayerRef = useRef(null); // Referenz auf die Layer-Gruppe für Datenbank-Marker
const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte const mapRef = useRef(null); // Referenz auf das DIV-Element der Karte
const [map, setMap] = useState(null); // Zustand der Karteninstanz const [map, setMap] = useState(null); // Zustand der Karteninstanz
const [oms, setOms] = useState(null); // State für OMS-Instanz const [oms, setOms] = useState(null); // State für OMS-Instanz
@@ -552,7 +552,7 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
}, [map]); }, [map]);
//-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt //-------------------- // Diese useEffect wird nur beim ersten Rendering oder wenn sich `map` ändert, ausgeführt
// Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs // Marker hinzufügen von lokale MySQL Datenbank und nicht von APIs
useEffect(() => { /* useEffect(() => {
// Remove old markers // Remove old markers
if (map) { if (map) {
// Entfernen der alten DBLayer und Erstellung einer neuen // Entfernen der alten DBLayer und Erstellung einer neuen
@@ -590,31 +590,31 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
marker.addTo(dbLayer); marker.addTo(dbLayer);
}); });
} }
}, [map, locations, onLocationUpdate]); }, [map, locations, onLocationUpdate]); */
//------------------------------------------ //------------------------------------------
useEffect(() => { useEffect(() => {
// Initialisierung der dbLayer, wenn die Karte verfügbar ist // Initialisierung der dbLayer, wenn die Karte verfügbar ist
if (map && !dbLayerRef.current) { if (map && !poiLayerRef.current) {
dbLayerRef.current = new L.LayerGroup().addTo(map); poiLayerRef.current = new L.LayerGroup().addTo(map);
} }
return () => { return () => {
if (map && dbLayerRef.current) { if (map && poiLayerRef.current) {
// Entfernen der dbLayer bei Unmount // Entfernen der dbLayer bei Unmount
map.removeLayer(dbLayerRef.current); map.removeLayer(poiLayerRef.current);
dbLayerRef.current = null; poiLayerRef.current = null;
} }
}; };
}, [map]); // Dieser Effekt läuft nur, wenn sich `map` ändert }, [map]); // Dieser Effekt läuft nur, wenn sich `map` ändert
//------------------------------------------ //------------------------------------------
useEffect(() => { useEffect(() => {
if (map && dbLayerRef.current) { if (map && poiLayerRef.current) {
// Sicherstellen, dass die alte dbLayer entfernt wird // Sicherstellen, dass die alte dbLayer entfernt wird
map.removeLayer(dbLayerRef.current); map.removeLayer(poiLayerRef.current);
dbLayerRef.current = new L.LayerGroup().addTo(map); poiLayerRef.current = new L.LayerGroup().addTo(map);
locations.forEach((location) => { locations.forEach((location) => {
const { latitude, longitude } = parsePoint(location.position); const { latitude, longitude } = parsePoint(location.position);
const marker = L.marker([latitude, longitude], { const marker = L.marker([latitude, longitude], {
@@ -627,7 +627,20 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
draggable: true, draggable: true,
id: location.idPoi, id: location.idPoi,
}); });
// Popup binden, aber nicht automatisch öffnen
marker.bindPopup(
`<b>${location.description || "Unbekannt"}</b><br>Type: ${location.idPoiTyp || "N/A"}<br>Lat: ${latitude.toFixed(5)}, Lng: ${longitude.toFixed(5)}`
);
// Event-Handler für Mouseover und Mouseout hinzufügen
marker.on("mouseover", function() {
this.openPopup();
});
marker.on("mouseout", function() {
this.closePopup();
});
marker.on("dragend", function (e) { marker.on("dragend", function (e) {
const newLat = e.target.getLatLng().lat; const newLat = e.target.getLatLng().lat;
const newLng = e.target.getLatLng().lng; const newLng = e.target.getLatLng().lng;
@@ -636,11 +649,12 @@ const MapComponent = ({ locations, onLocationUpdate }) => {
onLocationUpdate(markerId, newLat, newLng); onLocationUpdate(markerId, newLat, newLng);
}); });
}); });
marker.addTo(dbLayerRef.current); marker.addTo(poiLayerRef.current);
}); });
} }
}, [map, locations, onLocationUpdate]); // Dieser Effekt läuft, wenn `map`, `locations` oder `onLocationUpdate` sich ändern }, [map, locations, onLocationUpdate]); // Dieser Effekt läuft, wenn `map`, `locations` oder `onLocationUpdate` sich ändern
function parsePoint(position) { function parsePoint(position) {
const [longitude, latitude] = position.slice(6, -1).split(" "); const [longitude, latitude] = position.slice(6, -1).split(" ");

28
store/mapLayersState.js
View File

@@ -6,19 +6,19 @@ export const mapLayersState = atom({
default: { default: {
// Standardwerte für jeden Layer // Standardwerte für jeden Layer
TALAS: true, TALAS: true,
ECI: false, ECI: true,
ULAF: false, ULAF: true,
GSMModem: false, GSMModem: true,
CiscoRouter: false, CiscoRouter: true,
WAGO: false, WAGO: true,
Siemens: false, Siemens: true,
OTDR: false, OTDR: true,
WDM: false, WDM: true,
GMA: false, GMA: true,
Messstellen: false, Messstellen: true,
TALASICL: false, TALASICL: true,
DAUZ: false, DAUZ: true,
SMSFunkmodem: false, SMSFunkmodem: true,
Sonstige: false, Sonstige: true,
}, },
}); });