Marc Mintel
fb6af84a42
Some checks failed
Build & Deploy KLZ Cables / deploy (push) Failing after 39s
47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
|
import L from 'leaflet';
|
|
import 'leaflet/dist/leaflet.css';
|
|
import { useEffect } from 'react';
|
|
|
|
// Fix for default marker icon in Leaflet with Next.js
|
|
const DefaultIcon = L.icon({
|
|
iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
|
|
iconSize: [25, 41],
|
|
iconAnchor: [12, 41],
|
|
});
|
|
|
|
L.Marker.prototype.options.icon = DefaultIcon;
|
|
|
|
interface LeafletMapProps {
|
|
address: string;
|
|
lat: number;
|
|
lng: number;
|
|
}
|
|
|
|
export default function LeafletMap({ address, lat, lng }: LeafletMapProps) {
|
|
const position: [number, number] = [lat, lng];
|
|
|
|
return (
|
|
<MapContainer
|
|
center={position}
|
|
zoom={15}
|
|
scrollWheelZoom={false}
|
|
className="h-full w-full z-0"
|
|
>
|
|
<TileLayer
|
|
attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
<Marker position={position}>
|
|
<Popup>
|
|
<div className="text-primary font-bold">KLZ Cables</div>
|
|
<div className="text-sm whitespace-pre-line">{address}</div>
|
|
</Popup>
|
|
</Marker>
|
|
</MapContainer>
|
|
);
|
|
}
|