41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
|
||
|
|
import L from 'leaflet';
|
||
|
|
import 'leaflet/dist/leaflet.css';
|
||
|
|
|
||
|
|
delete (L.Icon.Default.prototype as any)._getIconUrl;
|
||
|
|
L.Icon.Default.mergeOptions({
|
||
|
|
iconRetinaUrl:
|
||
|
|
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
|
||
|
|
iconUrl:
|
||
|
|
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
|
||
|
|
shadowUrl:
|
||
|
|
'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
|
||
|
|
});
|
||
|
|
|
||
|
|
const ContactMap = () => {
|
||
|
|
const position: [number, number] = [35.800081, 51.433882];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="h-[400px] w-full overflow-hidden rounded-lg">
|
||
|
|
<MapContainer
|
||
|
|
center={position}
|
||
|
|
zoom={15}
|
||
|
|
scrollWheelZoom={false}
|
||
|
|
style={{ height: '100%', width: '100%' }}
|
||
|
|
>
|
||
|
|
<TileLayer
|
||
|
|
attribution='© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
|
||
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||
|
|
/>
|
||
|
|
<Marker position={position}>
|
||
|
|
<Popup>lastminute.com London Eye</Popup>
|
||
|
|
</Marker>
|
||
|
|
</MapContainer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ContactMap;
|