How to use:

Toggle the controller using the button on the upper left toolbar.

Rotate the image using the following options:

• Click the control boxes at the cardinal directions (N, E, S, W) to jump to those angles
• Click and drag the cross-hair controller to the desired center point for the rotation
• Click and drag the indicator dot to directly set the orientation
• Click and drag other places on the viewer. A line shows you the axis between the center point and your cursor, for alignment with features in the image.

While the controller is active, hold the shift key to zoom/pan the image. The controller will reactivate after the key press.

Pressing escape will deactivate the rotation control tool.

Code:

                    // Must be placed inside a module: script with type="module" for import to work
                    import {RotationControlOverlay} from '../src/js/rotationcontrol.mjs'

                    // Basic viewer setup
                    let viewer = OpenSeadragon({
                        element:'rotating-viewer',
                        prefixUrl: "https://openseadragon.github.io/openseadragon/images/",
                        tileSources: {
                            type: 'image',
                            url:  'https://openseadragon.github.io/example-images/grand-canyon-landscape-overlooking.jpg',
                            buildPyramid: false
                        },
                        minZoomImageRatio:0.01,
                        visibilityRatio:0,
                        crossOriginPolicy: 'Anonymous',
                        ajaxWithCredentials: false
                    });

                    //Add a RotationControlOverlay to the viewer
                    viewer.addHandler('open',()=>{
                        new RotationControlOverlay(viewer)
                    });