Files
var-monorepo/apps/dispatch/app/(dispatch)/_components/Map.tsx
2025-02-02 20:23:30 +01:00

29 lines
786 B
TypeScript

'use client';
import { useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
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:
'&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> contributors',
}).addTo(map);
return () => {
map.remove(); // Karte beim Unmounten bereinigen
};
}, []);
return <div ref={mapRef} className="w-full h-full rounded-lg shadow-lg" />;
};