How to load Mirador 3 with a canvas displayed at specific coordinates and zoom level?

[frubini]

I am using M3 embedded within an existing page and would like to generate shareable links to a document canvas with parameters such as x, y, and zoom. This would allow users to share links pointing to specific details within the document. However, I couldn't find any examples— is this possible?

This is the configuration I use to load M3@3.4.3

var miradorInstance = Mirador.viewer({
      id: 'mirador-div',
      language: 'en',
      windows: [{
        manifestId: '<<manifest >>',
        thumbnailNavigationPosition: 'far-right',
        allowClose: false,
        canvasIndex: '<< canvas-id >>',
        xywh: [573, 903, 1200, 1200],
      }],
      workspace: {
        showZoomControls: true,
      },
      workspaceControlPanel: {
        enabled: true,
      },
    });

Thanks

[lutzhelm]

Have a look at this example configuration. It contains the details you asked for. It also works with both M3 and upcoming M4.

Afaik, configuring the zoom by providing xywh parameters is not possible. The element that contains Mirador would have very different dimensions depending on the specific website / application or just the user's screen resolution. That would make it difficult to interpret xywh in a sensible way.

[frubini]

Thanks ! this works, I can pass the parameter to the configuration object and open a canvas at a specific page, coordinates and zoom:

      windows: [{
        manifestId: '{{ manifest }}',
        thumbnailNavigationPosition: 'far-right',
        sideBarOpen: true,
        canvasIndex: '{{ pagenum }}',
        initialViewerConfig: {
          x: 934,
          y: 782,
          zoom: 0.0007,
        }
      }]

[frubini]

Then I can update the URL hash subscribing to the store state change

miradorInstance.store.subscribe(() => { console.log(miradorInstance.store.getState())})

are there alternatives to consider ?

[dnoneill]

It isn't possible with core Mirador but it should be possible with a plugin. We ended up not putting this in Mirador but making our own plugin that does this. https://github.com/ProjectMirador/mirador/pull/4027/files It does the opposite (converts current Mirador view to xywh coordinates). I believe you should be able to do the reverse.

[frubini]

Thanks for the reply, this is a good insight too. Did you publish your plugin ?

[dnoneill]

https://github.com/sul-dlss/sul-embed/blob/main/app/javascript/src/plugins/xywhPlugin.js