[Feat] - Add smooth move animation in Marker when coordinates are updated with bearing

[howdyhyber]

Target Use Case

It would be nice if the marker's location is updated, it will move smoothly to the location.

Proposal

Apply a smooth transition on markers movements based on location changes

[BjoernRave]

I just came up with this, not sure if it's the best/most performant approach you can do though

import "mapbox-gl/dist/mapbox-gl.css"
import React, { useEffect, useState } from "react"
import ReactMapGL, { Marker } from "react-map-gl"
import { usePrevious } from "react-use"

interface UserMarkerProps {
  longitude: number
  latitude: number
}

const UserMarker: React.FC<UserMarkerProps> = ({ longitude, latitude }) => {
  const prevLocation = usePrevious({ longitude, latitude })
  const [interpolatedLocation, setInterpolatedLocation] = useState({
    longitude,
    latitude,
  })

  const interpolateLocation = (
    startLocation,
    endLocation,
    duration: number,
  ) => {
    let startTime: number

    const step = (timestamp) => {
      if (!startTime) startTime = timestamp
      const progress = (timestamp - startTime) / duration

      if (progress < 1) {
        const latitude =
          startLocation.latitude +
          (endLocation.latitude - startLocation.latitude) * progress
        const longitude =
          startLocation.longitude +
          (endLocation.longitude - startLocation.longitude) * progress
        setInterpolatedLocation({ latitude, longitude })
        requestAnimationFrame(step)
      } else {
        setInterpolatedLocation(endLocation)
      }
    }

    requestAnimationFrame(step)
  }

  useEffect(() => {
    if (prevLocation) {
      interpolateLocation(prevLocation, { longitude, latitude }, 1000)
    }
  }, [longitude, latitude])

  return (
    <Marker
      longitude={interpolatedLocation.longitude}
      latitude={interpolatedLocation.latitude}
    >
      <div className="marker">test</div>
    </Marker>
  )
}

const MapComponent: React.FC = () => {
  const [userPosition, setUserPosition] = useState({
    latitude: 37.78,
    longitude: -122.41,
  })

  // Simulate position change
  useEffect(() => {
    const interval = setInterval(() => {
      setUserPosition({
        latitude: userPosition.latitude + 0.001,
        longitude: userPosition.longitude + 0.001,
      })
    }, 1000)

    return () => clearInterval(interval)
  }, [userPosition])

  return (
    <ReactMapGL
      style={{
        height: "100vh",
        width: "100%",
      }}
      mapStyle="mapbox://styles/mapbox/streets-v11"
      mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_KEY}
    >
      <UserMarker
        longitude={userPosition.longitude}
        latitude={userPosition.latitude}
      />
    </ReactMapGL>
  )
}

export default MapComponent

or as its own component:

//AnimatedMarker.tsx

import { FC, useEffect, useState, type PropsWithChildren } from "react"
import { Marker, type MarkerProps } from "react-map-gl"
import { usePrevious } from "react-use"

const AnimatedMarker: FC<PropsWithChildren<Props>> = ({
  longitude,
  latitude,
  children,
  ...props
}) => {
  const prevLocation = usePrevious({ longitude, latitude })
  const [interpolatedLocation, setInterpolatedLocation] = useState({
    longitude,
    latitude,
  })

  const interpolateLocation = (
    startLocation: { longitude: number; latitude: number },
    endLocation: { longitude: number; latitude: number },
    duration: number,
  ) => {
    let startTime: number

    const step = (timestamp: number) => {
      if (!startTime) startTime = timestamp
      const progress = (timestamp - startTime) / duration

      if (progress < 1) {
        const latitude =
          startLocation.latitude +
          (endLocation.latitude - startLocation.latitude) * progress

        const longitude =
          startLocation.longitude +
          (endLocation.longitude - startLocation.longitude) * progress

        setInterpolatedLocation({ latitude, longitude })
        requestAnimationFrame(step)
      } else {
        setInterpolatedLocation(endLocation)
      }
    }

    requestAnimationFrame(step)
  }

  useEffect(() => {
    if (prevLocation) {
      interpolateLocation(prevLocation, { longitude, latitude }, 1000)
    }
  }, [longitude, latitude])

  return (
    <Marker
      longitude={interpolatedLocation.longitude}
      latitude={interpolatedLocation.latitude}
      {...props}
    >
      {children}
    </Marker>
  )
}

export default AnimatedMarker

interface Props extends MarkerProps {}