43 lines
1.0 KiB
TypeScript
43 lines
1.0 KiB
TypeScript
"use client";
|
|
import { useEffect, useRef } from "react";
|
|
|
|
import L from "leaflet";
|
|
import "leaflet/dist/leaflet.css";
|
|
import ToastCard from "./toast/ToastCard";
|
|
|
|
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
|
|
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>
|
|
);
|
|
};
|