61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
"use client";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
import ToastCard from "./toast/ToastCard";
|
|
import { Toast, ToastBar, Toaster, toast } from "react-hot-toast";
|
|
|
|
export default () => {
|
|
const mapRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!mapRef.current) return;
|
|
|
|
// Initialisiere die Leaflet-Karte
|
|
const map = L.map(mapRef.current).setView([51.1657, 10.4515], 6); // Deutschland
|
|
|
|
// OpenStreetMap Tile Layer hinzufügen
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
attribution:
|
|
'© <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors',
|
|
}).addTo(map);
|
|
|
|
return () => {
|
|
map.remove(); // Karte beim Unmounten bereinigen
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className="relative w-full h-full">
|
|
<div>
|
|
<Toaster
|
|
containerStyle={{
|
|
top: 150,
|
|
left: 20,
|
|
right: 20,
|
|
}}
|
|
toastOptions={{
|
|
style: {
|
|
background: "var(--color-base-100)",
|
|
color: "var(--color-base-content)",
|
|
},
|
|
}}
|
|
position="top-left"
|
|
reverseOrder={false}
|
|
/>
|
|
</div>
|
|
<div
|
|
ref={mapRef}
|
|
className="w-full h-full rounded-lg shadow-lg"
|
|
style={{
|
|
filter:
|
|
"invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%)",
|
|
background: "#000 !important",
|
|
}}
|
|
/>
|
|
<ToastCard />
|
|
</div>
|
|
);
|
|
};
|