Animate a camera around a point

[jaballogian]

I found an example for animating a camera around a point from the official Mapbox GL JS documentation here but it's written in pure Javascript.

I'm using react-map-gl library and trying to animate the camera around a point like the example above.

Here is my code:

import React, { useEffect, useState, useRef } from 'react';
import MapGL, {requestAnimationFrame} from 'react-map-gl';

const [viewport, setViewport] = useState({
    latitude: 40.67,
    longitude: -103.59,
    zoom: 3,
    bearing: 0,
    pitch: 0
});
const mapRef = useRef(null);

const rotateCamera = (timestamp) => {
    mapRef.rotateTo((timestamp / 100) % 360, { duration: 0 })
    requestAnimationFrame(rotateCamera)
}

useEffect(() => {
    rotateCamera(0)
}, [])

return (
      <MapGL 
        {...viewport}
        width="100%"
        height="100%"
        mapStyle={MAP_STYLE}
        onViewportChange={setViewport}
        mapboxApiAccessToken={MAPBOX_TOKEN}
        ref={mapRef}
      />
);

There was a compiled error:

Attempted import error: 'requestAnimationFrame' is not exported from 'react-map-gl'.

Then I tried to repair the import into:

import MapGL from 'react-map-gl';
import requestAnimationFrame from 'react-map-gl'

but there was a runtime error:

TypeError: mapRef.rotateTo is not a function

Then how do I implement the animate the camera around a point documentation properly?

[Pessimistress]

http://visgl.github.io/react-map-gl/docs/advanced/viewport-transition

[jaballogian]

Thank you for answering my question.

I have read the documentation you gave to me and based on what I read, the documentation apparently only shows how to move the camera to a certain location using Viewport Transition.

What I want is how to rotate the camera in a certain location like this documentation https://docs.mapbox.com/mapbox-gl-js/example/animate-camera-around-point/ in React Js using react-map-gl library.

At the bottom of the documentation you gave to me, I saw Linear Interpolator then I tried to implement it using around option in order to rotate the camera but the camera wasn't rotate automatically like the official Mapbox documentation.

Here is the code:

import { useState } from 'react'

// some code here

const [viewport, setViewport] = useState({
    longitude: -1.415727,
    latitude: 52.232395,
    width: '100vw',
    height: '100vh',
    zoom: 5,
    pitch: 40.5,
    bearing: -27
})

// some code here

return(
    // some code here

    <ReactMapGL
        {...viewport}
        mapboxApiAccessToken={MAPBOX_TOKEN}
        mapStyle={MAP_STYLE}
        onViewportChange={viewport => {
            setViewport(viewport)
        }}
        transitionDuration={10000}
        transitionInterpolator={new LinearInterpolator([{ around: [-1.415727, 52.232395]}])} 
    />

    // some code here
)

So what's wrong with the code?
Did I implement it correctly to make the camera rotate automatically?