SDKs · React & Next.js

Step 6 — Camera & gestures

Zoom limits, panning bounds, gesture toggles and camera events.

Camera and gestures

<UbHubMap
  style={{ height: 480 }}
  minZoom={10}
  maxZoom={16}
  cameraBounds={{
    southwest: { latitude: 47.86, longitude: 106.8 },
    northeast: { latitude: 47.98, longitude: 107.05 },
  }}
  scrollZoom           // gesture toggles (all default true): dragPan, dragRotate,
  dragRotate={false}   // scrollZoom, doubleClickZoom, touchZoomRotate, keyboard
  onCameraMove={(c) => {}}
  onCameraIdle={(c) => console.log("settled at zoom", c.zoom)}
/>;

minZoom/maxZoom (0–22; basemap tiles go to 16) and cameraBounds apply live. Gesture toggles default to true. onCameraMove/onCameraIdle report a UbHubCameraPosition, and controller.camera() reads the current one.