javascriptreactjsiiif

mirador 3 - jump to page / set page / set canvas

How to load Mirador3 on specific page via config or method call?

It would be great to load viewer on page 3 without knowing canvas@id from iiif manifest. Manifest has the sequence defined - jumping to page should be easy. (or not?)

I found setCanvas in source. Also found this plugin (but that is for Mirador 2 - I think).

Only thing that works atm is manifest property startCanvas

Solution

  • Mirador 3 provides some APIs for you to use to accomplish this. You can either initialize a window with a given canvasIndex or set the canvas to a known canvasId.

    1. You can initialize a window with a canvasIndex property to start on a specific index.
    var miradorInstance = Mirador.viewer({
  id: 'mirador',
  windows: [{
    id: 'known-window-id',
    canvasIndex: 3
    loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
  }],
});
    1. You can programmatically set the canvas if you know the canvasId
    var miradorInstance = Mirador.viewer({
  id: 'mirador',
  windows: [{
    id: 'known-window-id',
    loadedManifest: 'https://iiif.harvardartmuseums.org/manifests/object/299843',
  }],
});
// We create the action first. Note we are using a specified `windowId` here. This could be accessed from the store instead of specifying upfront.
var action = Mirador.actions.setCanvas('known-window-id', 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-43182083')
// Now we can dispatch it.
miradorInstance.store.dispatch(action);

    See https://github.com/ProjectMirador/mirador/wiki/M3---Mirador-3-Frequently-Asked-Questions#q-how-do-i-programmatically-set-the-canvas

    If you do not know the canvasId in advance, option 1 is probably the best for you to do.