aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/MapMarker.tsx @ b45d0300

import { LatLngTuple, Marker as MarkerPOJO } from 'leaflet'
import { FunctionComponent, ReactNode, useMemo, useRef, useState } from 'react'
import { Marker } from 'react-leaflet'

export interface MapMarkerProps {
    position: LatLngTuple
    children?: ReactNode
}

// Custom Map Marker component
const MapMarker: FunctionComponent<MapMarkerProps> = ({ position, children }) => {
    const [currentPosition, setCurrentPosition] = useState(position)
    const markerRef = useRef<MarkerPOJO | null>(null)
    const eventHandlers = useMemo(
        () => ({
            dragend: () => {
                const marker = markerRef.current
                console.log(markerRef)
                if (!marker) {
                    return
                }
                const latlng = marker.getLatLng()
                setCurrentPosition([latlng.lat, latlng.lng])
            },
        }),
        []
    )

    return (
        <Marker
            draggable={true}
            position={currentPosition}
            eventHandlers={eventHandlers}
            ref={markerRef}
        >
            {children}
        </Marker>
    )
}

export default MapMarker