In the UI we have a floating panel occupying the 30% - 40% percent of the screen width and we have a Cesium background map. The mock image below has dots. At the moment we can zoom the view, so that all dots are visible on the screen.

The logic is simple, we just find the top-left and bottom-right corners of the rectangle that covers all points.

const topLeft = Cartographic.fromDegrees(
  flyTo.minLongitude,
  flyTo.minLatitude,
  0,
)
const bottomRight = Cartographic.fromDegrees(
  flyTo.maxLongitude,
  flyTo.maxLatitude,
  0,
)
const rectangle = Rectangle.fromCartographicArray([topLeft, bottomRight])
viewer.camera.flyTo({
  destination: rectangle,
  duration: flyTo.duration ? flyTo.duration : 0.1,
})

The problem is that the points are under UI controls. We would like to offset the zoom, so that instead of zooming to the center of the screen it would zoom all points to be visible on the right side.

Consider having only a single point. In the current implementation, it would be under the UI controls, but this is what we try to achieve.