Markers stagering when rotating the map using viewState

[iljapanic]

I'm using React state to automatically change latitude and longitude, which results in a rotating globe. This works nicely, but when I add markers to the mix, they are shaking like crazy:

Cap.2023-09-09.04.02.38.-.Sizzy.Sizzy.mp4

I suspect it has something to do with how Mapbox adjusts markers to accommodate changing user's perspective.

I would appreciate any pointers or ideas on how to go about debugging this and potentially fixing it?

Relevant code bits.

My map-pin.tsx component:

'use client'

import { ReactNode } from 'react'
import { Marker } from 'react-map-gl'
import { MapPin as MapPinIcon } from 'lucide-react'

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/ui/popover'

interface MapPinProps {
  lat: number
  lng: number
  children?: ReactNode
}

export const MapPin = ({ lat, lng, children }: MapPinProps) => {
  return (
    <Marker longitude={lng} latitude={lat} anchor="bottom">
      {!children ? (
        <MapPinIcon
          strokeWidth={1.5}
        />
      ) : (
        <Popover>
          <PopoverTrigger>
            <MapPinIcon
              strokeWidth={1.5}
            />
          </PopoverTrigger>
          <PopoverContent>{children}</PopoverContent>
        </Popover>
      )}
    </Marker>
  )
}

My map-base.tsx component (redacted for clarity):

'use client'

import React from 'react'
import { useState, useEffect } from 'react'
import Map from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css'

import type { MapRef } from 'react-map-gl'

import { getMapboxTheme } from '@/lib/mapbox'


interface MapBaseProps {
  mapRef?: React.RefObject<MapRef>
  height?: string // default is 100%
  children?: React.ReactNode
  rotating?: boolean
}

export function MapBase({
  mapRef,
  height = '100%',
  children,
  rotating = false,
}: MapBaseProps){


  /* set initial values */
  let initialViewState = {
    longitude: 16,
    latitude: 47,
    zoom: 2,
    bearing: 0,
    pitch: 0,
  }

  /* Mapbox view state */
  const [viewState, setViewState] = useState(initialViewState)
  const [hasBeenMoved, setHasBeenMoved] = useState(false)

  /* theme */
  const mapboxTheme = getMapboxTheme('light')


  /* rotating */
  useEffect(() => {
    if (rotating && !hasBeenMoved) {
      const intervalId = setInterval(() => {
        setViewState((vs) => {
          const nextLat = vs.latitude - 0.005
          const nextLng = (vs.longitude + 0.01) % 360

          return {
            ...vs,
            latitude:
              nextLat < -90
                ? nextLat + 180
                : nextLat > 90
                ? nextLat - 180
                : nextLat,
            longitude: nextLng,
          }
        })
      }, 10)

      return () => clearInterval(intervalId)
    }
  }, [rotating, hasBeenMoved])

  return (
    <div>
        <Map
          {...viewState}
          ref={mapRef}
          mapStyle={mapboxTheme.mapStyleUrl}
          mapboxAccessToken={process.env.NEXT_PUBLIC_MAPBOX_API_TOKEN}
          attributionControl={false}
          style={{ width: '100%', height: height }}

          onMove={(e) => {
            setViewState(e.viewState)
            setHasBeenMoved(true)
          }}
        >
          {children}
        </Map>
    </div>
  )

}

And here is how I use the two components to display the rotating map:

<MapBase mapRef={mapRef} rotating={true}>
  {locations.map((location) => (
      <MapPin key={location.id} lat={location.lat} lng={location.lng}>
        <h3>
          {location.name}
        </h3>
      </MapPin>
    ))}
</MapBase>