1
|
import { LatLngTuple, Marker as MarkerPOJO } from 'leaflet'
|
2
|
import { FunctionComponent, ReactNode, useMemo, useRef, useState } from 'react'
|
3
|
import { Marker } from 'react-leaflet'
|
4
|
|
5
|
export interface MapMarkerProps {
|
6
|
position: LatLngTuple
|
7
|
children?: ReactNode
|
8
|
color?: 'external' | 'disabled' | 'localCatalog'
|
9
|
updatePositionCallbackFn: (position: LatLngTuple) => void // Callback function to notify MapPath to rerender the path
|
10
|
}
|
11
|
|
12
|
// Custom Map Marker component
|
13
|
const MapMarker: FunctionComponent<MapMarkerProps> = ({
|
14
|
position,
|
15
|
children,
|
16
|
updatePositionCallbackFn,
|
17
|
}) => {
|
18
|
const [currentPosition, setCurrentPosition] = useState(position)
|
19
|
const markerRef = useRef<MarkerPOJO | null>(null)
|
20
|
const eventHandlers = useMemo(
|
21
|
() => ({
|
22
|
dragend: () => {
|
23
|
const marker = markerRef.current
|
24
|
console.log(markerRef)
|
25
|
if (!marker) {
|
26
|
return
|
27
|
}
|
28
|
const latlng = marker.getLatLng()
|
29
|
setCurrentPosition([latlng.lat, latlng.lng])
|
30
|
updatePositionCallbackFn([latlng.lat, latlng.lng])
|
31
|
},
|
32
|
}),
|
33
|
[updatePositionCallbackFn]
|
34
|
)
|
35
|
|
36
|
return (
|
37
|
<Marker
|
38
|
draggable={true}
|
39
|
position={currentPosition}
|
40
|
eventHandlers={eventHandlers}
|
41
|
ref={markerRef}
|
42
|
>
|
43
|
{children}
|
44
|
</Marker>
|
45
|
)
|
46
|
}
|
47
|
|
48
|
export default MapMarker
|