Target Use Case

Use Case

When working with 2D map/diagram visualizations using OrthographicView, users often need to rotate the view to:

• CAD/Blueprint viewing: Rotate architectural drawings or engineering blueprints to match physical orientation
• Floor plan navigation: Adjust building floor plans to align with user's perspective
• Game/Simulation: Rotate 2D game maps or simulation grids
• Data visualization: Rotate chart/graph layouts for better readability or presentation
• Image annotation: Rotate reference images while annotating spatial data

Currently, OrthographicView lacks rotation support, forcing users to either:

1. Pre-rotate their data (expensive and inflexible)
2. Create custom extended classes (duplicated effort across projects)

This feature request has been raised before in #3290, where users expressed interest in clockwise/counterclockwise rotation controls for OrthographicView. This implementation addresses that long-standing request.

This feature enables intuitive Ctrl+drag rotation interaction and programmatic rotation control via rotateLeft(), rotateRight(), setRotation() methods.

Proposal

Proposal

1. New ViewState Property: rotationOrbit

Add rotationOrbit to OrthographicViewState for Z-axis rotation (in degrees).

<DeckGL
  views={new OrthographicView()}
  initialViewState={{
    target: [0, 0, 0],
    zoom: 1,
    rotationOrbit: 45  // NEW: rotate 45° clockwise
  }}
/>

2. Ctrl+Drag Rotation Interaction

Enable rotation via Ctrl+drag (or Cmd+drag on Mac) when dragRotate: true (default).

<DeckGL
  views={new OrthographicView({
    controller: {
      dragRotate: true  // Enable Ctrl+drag rotation (default: true)
    }
  })}
/>

3. Programmatic Rotation Control

Add methods to OrthographicController for programmatic rotation:

// Get the controller instance
const controller = deck.viewManager.controllers['default-view'];

// Rotate by delta angle
controller.rotate(45);        // Rotate 45° clockwise
controller.rotate(-30);       // Rotate 30° counter-clockwise

// Rotate by fixed amounts
controller.rotateRight(90);   // Rotate 90° clockwise
controller.rotateLeft(90);    // Rotate 90° counter-clockwise

// Set absolute rotation
controller.setRotation(180);  // Set rotation to 180°
controller.setRotation(0);    // Reset to 0°

// Get current rotation
const angle = controller.getRotation();

4. ViewState Change Callback

Rotation changes are reported via onViewStateChange:

<DeckGL
  onViewStateChange={({viewState}) => {
    console.log('Current rotation:', viewState.rotationOrbit);
  }}
/>

Implementation

• OrthographicViewState: Add rotationOrbit?: number property
• OrthographicViewport: Apply Z-axis rotation to view matrix via Matrix4.rotateZ()
• OrthographicController: Handle Ctrl+drag rotation and expose programmatic methods