96 lines
3.5 KiB
JavaScript
96 lines
3.5 KiB
JavaScript
//components/Kartenkomponente.js
|
|
import React, { useState, useEffect } from 'react';
|
|
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
|
import L from 'leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
import dynamic from 'next/dynamic';
|
|
|
|
// Dynamischer Import mit SSR deaktiviert
|
|
const KartenKomponenteOhneSSR = dynamic(
|
|
() => import('../components/KartenKomponente'),
|
|
{ ssr: false }
|
|
);
|
|
|
|
|
|
const KartenKomponente = ({ locations, onAddLocation, onLocationUpdate }) => {
|
|
const [isOnline, setIsOnline] = useState(true); // Standardwert als fallback
|
|
const [aktuelleSchicht, setAktuelleSchicht] = useState({
|
|
url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png", // Standardwert
|
|
options: {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
minZoom: 7,
|
|
maxZoom: 19,
|
|
crossOrigin: true,
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
// Setzt den Zustand, basierend darauf, ob das Fensterobjekt existiert (Client-Seite)
|
|
if (typeof window !== "undefined") {
|
|
setIsOnline(navigator.onLine);
|
|
setAktuelleSchicht({
|
|
url: navigator.onLine ? "https://tile.openstreetmap.org/{z}/{x}/{y}.png" : "/mapTiles/{z}/{x}/{y}.png",
|
|
options: {
|
|
minZoom: 7,
|
|
maxZoom: navigator.onLine ? 19 : 14,
|
|
crossOrigin: true,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
},
|
|
});
|
|
|
|
const handleOnlineStatus = () => setIsOnline(navigator.onLine);
|
|
window.addEventListener("online", handleOnlineStatus);
|
|
window.addEventListener("offline", handleOnlineStatus);
|
|
|
|
return () => {
|
|
window.removeEventListener("online", handleOnlineStatus);
|
|
window.removeEventListener("offline", handleOnlineStatus);
|
|
};
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setAktuelleSchicht({
|
|
url: isOnline ? "https://tile.openstreetmap.org/{z}/{x}/{y}.png" : "/mapTiles/{z}/{x}/{y}.png",
|
|
options: {
|
|
minZoom: 7,
|
|
maxZoom: isOnline ? 19 : 14,
|
|
crossOrigin: true,
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
},
|
|
});
|
|
}, [isOnline]);
|
|
|
|
// Funktion, um auf Klick ein Popup für das Hinzufügen neuer Standorte zu zeigen
|
|
const addMarker = (e) => {
|
|
// Hier könnte eine Logik stehen, um ein Formular-Modal oder Popup zu öffnen, um die Daten für den neuen Standort zu sammeln
|
|
const newLocation = { lat: e.latlng.lat, lng: e.latlng.lng }; // Beispiel für neue Standortdaten
|
|
onAddLocation(newLocation); // Rufe die übergebene onAddLocation-Funktion mit den neuen Standortdaten auf
|
|
};
|
|
|
|
return (
|
|
<MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: "100vh", width: "100%" }} whenCreated={map => map.on('click', addMarker)}>
|
|
<TileLayer url={aktuelleSchicht.url} {...aktuelleSchicht.options} />
|
|
{locations.map((location, index) => (
|
|
<Marker
|
|
key={index}
|
|
position={[location.lat, location.lng]}
|
|
draggable={true}
|
|
eventHandlers={{
|
|
dragend: (e) => {
|
|
const newLat = e.target.getLatLng().lat;
|
|
const newLng = e.target.getLatLng().lng;
|
|
onLocationUpdate(location.id, newLat, newLng); // Aktualisiere die Position des Standorts, nachdem der Marker verschoben wurde
|
|
},
|
|
}}
|
|
>
|
|
<Popup>{location.name}</Popup>
|
|
</Marker>
|
|
))}
|
|
</MapContainer>
|
|
);
|
|
};
|
|
|
|
export default KartenKomponente;
|
|
|