46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
"use client"
|
|
import { useState } from "react"
|
|
import Leaflet from "leaflet"
|
|
import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"
|
|
|
|
Leaflet.Icon.Default.imagePath = "../node_modules/leaflet"
|
|
Leaflet.Icon.Default.mergeOptions({
|
|
iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
|
|
shadowUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-shadow.png'
|
|
})
|
|
|
|
interface MapState {
|
|
lat: number;
|
|
lng: number;
|
|
zoom: number;
|
|
}
|
|
|
|
const PopupMarkerMap = ({ height = 350 }) => {
|
|
const [state, setState] = useState<MapState>({
|
|
lat: 51.505,
|
|
lng: -0.09,
|
|
zoom: 13,
|
|
})
|
|
const position: [number, number] = [state.lat, state.lng]
|
|
|
|
return (
|
|
<MapContainer
|
|
center={position}
|
|
zoom={state.zoom}
|
|
style={{ height: height }}
|
|
>
|
|
<TileLayer
|
|
attribution='&copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
/>
|
|
<Marker position={position}>
|
|
<Popup>
|
|
<span className="text-gray-900 text-lg font-medium">Hello Dashcode!</span>
|
|
</Popup>
|
|
</Marker>
|
|
</MapContainer>
|
|
)
|
|
|
|
}
|
|
|
|
export default PopupMarkerMap; |