Configuring Persistent Bookmarking in Mirador

Shareable Bookmarks in Mirador

Shareable bookmark URLs in Mirador take the following form:

http://mydomain.org/path/to/my/mirador/instance/?json=[uniqueid]

The json parameter in the URL contains a unique ID used by the JSON Storage Endpoint, which is responsible for storing viewer states under new IDs and retrieving viewer states based on existing IDs.

Back-End

As of 2.1, the default back-end is jsonblob.com. If you wish to interface with your own back-end, you can write your own JSON Storage Endpoint. Ensure that it implements the following methods and fields:

• options: An object containing settings for your endpoint.
• Constructor: Should take a single argument opts (Object), initialize default settings and then call jQuery.extend(this.options, opts);.
• readSync: Should take a single argument blobID (string) and synchronously return the viewer state object stored under blobID.
• save: Should take a single argument blob (Object) and return a jQuery deferred promise that resolves to the new ID once saving completes.

(function($) {
  $.MyJsonBlobApi = function(opts) {
    this.options = {
      /** Add your defaults here **/
    }; 
    jQuery.extend(this.options, opts);
  };
  $.MyJsonBlobApi.prototype = {
    readSync: function(blobId) {
      var viewState = {};
      /** Retrieve the view state from blobId here **/
      return viewState;
    },
    save: function(blob) {
      var deferred = jQuery.Deferred();
      /** Resolve deferred to the new ID of the saved blob (view state) here **/
      return deferred.promise();
    }
  };
})(Mirador);

Configuration Options

To enable persistent bookmarking, ensure that saveSession is not set to false.

By default, Mirador uses jsonblob.com as its back-end. If you wish to replace it with your own, set jsonStorageEndpoint to an object with the following keys:

• name: Any string name to describe the endpoint.
• module: The string name of the constructor for the endpoint.

Here is an example with an endpoint named MyCoolEndpoint:

<div id="viewer"></div>
<script src="lib/mirador.js"></script>
<script src="lib/mycoolendpoint.js"></script>
<script>
Mirador({
  id: "viewer",
  data: [
    {"manifestUri": "http://iiif/id/and/uri/of/your/manifest.json", location : "My Repository"}
  ],
  jsonStorageEndpoint: {
    name: "My cool JSON endpoint",
    module: "MyCoolEndpoint"
  },
  saveSession: true
});
</script>