Camera controls about react-three-map

[RodrigoHamuy]

@rokez98 the camera is controlled by MapLibre/Mapbox. So this is out of the scope of react-three-map and more to do with react-map-gl.

Never the less, here is one way to achieve this. If you know your objects coordinates (lat long) and desired zoom level, you can use the map provider easeTo function.

Here is a declarative way to do it for example:

const EaseTo = ({latitude, longitude, zoom})=>{
  
  const map = useMap();

  useEffect(()=>{
    if(!map.current) return;
    map.current.easeTo({
      center: {lon: longitude, lat: latitude},
      zoom,
      duration: 0.3,
    })
  }, [map, latitude, longitude])

  return <></>
})
// use as <EaseTo latitude={number} longitude={number} zoom={number} />