forked from polka_billy/porridger
37 lines
906 B
TypeScript
37 lines
906 B
TypeScript
import { Marker, Popup, useMapEvents } from 'react-leaflet'
|
|
import { LatLng } from 'leaflet'
|
|
|
|
import { SetState } from '../utils/types'
|
|
import { iconItem } from '../utils/markerIcons'
|
|
|
|
type LocationMarkerProps = {
|
|
address: string,
|
|
position: LatLng,
|
|
setPosition: SetState<LatLng>,
|
|
}
|
|
|
|
function LocationMarker({ address, position, setPosition }: LocationMarkerProps) {
|
|
const map = useMapEvents({
|
|
dragend: () => {
|
|
setPosition(map.getCenter())
|
|
},
|
|
zoomend: () => {
|
|
setPosition(map.getCenter())
|
|
},
|
|
resize: () => {
|
|
setPosition(map.getCenter())
|
|
},
|
|
})
|
|
|
|
return (
|
|
<Marker icon={iconItem} position={position}>
|
|
<Popup>
|
|
{address}
|
|
{position.lat.toFixed(4)}, {position.lng.toFixed(4)}
|
|
</Popup>
|
|
</Marker>
|
|
)
|
|
}
|
|
|
|
export default LocationMarker
|