leaflet-iiif

Leaflet-IIIF

A Leaflet plugin for viewing IIIF images. See the demo

Requires Leaflet.js.

Leaflet-IIIF relies on browser support for Promise and Fetch API. If you need to support IE or other browsers without this, please use a polyfill.

Note on Leaflet Compatibility

Leaflet Versions	Leaflet-IIIF Versions
< 1.0.0	< 1.0.0
>= 1.0	>= 1.0

Examples

• Demo using the IIIF Image API
• Demo parsing a IIIF manifest

Install with NPM

$ npm install leaflet-iiif --save

Quick and easy to get going.

var map = L.map('map', {
  center: [0, 0],
  crs: L.CRS.Simple,
  zoom: 0
});

L.tileLayer.iiif('http://example.com/iiifimage.jp2/info.json').addTo(map);

Thanks to klokantech/iiifviewer and turban/Leaflet.Zoomify who have similar plugins which were used in development of Leaflet-IIIF.

Options

Leaflet-IIIF extends L.TileLayer and so many options available to L.TileLayer can be used with Leaflet-IIIF.

Option	Type	Default	Description
tileFormat	String	'jpg'	The format of the returned image.
tileSize	Number	256	Tile size (width and height in pixels, assuming tiles are square).
fitBounds	Boolean	true	Automatically center and fit the maps bounds to the added IIIF layer
setMaxBounds	Boolean	false	Constrain the map viewer to the image
quality	String	'default'	determines whether the image is delivered in color, grayscale or black and white Note: All IIIF servers do not support this parameter.

Development

Clone the repository

$ git clone https://github.com/mejackreed/Leaflet-IIIF.git

Install the dependencies

$ npm install

Run the server

$ npm start

Run the test suite

$ npm test

Access the examples at http://127.0.0.1:8080/examples/example.html

Leaflet-IIIF Examples

• Leaflet-IIIF Basic Example
• Leaflet-IIIF Side by Side using IIIF Quality
• Leaflet-IIIF Martellus Map example using IconLayers plugin
• Leaflet-IIIF Magnifying Glass Example
• Leaflet-IIIF Draw example
• Leaflet-IIIF Labels example
• Leaflet-IIIF Annotation Example
• Leaflet-IIIF Cropper example

Leaflet-IIIF in the wild

• Europeana uses Leaflet-IIIF for viewing image content. See more about how they do this "Building a rich media experience with the Europeana API and IIIF" and an example at http://www.europeana.eu/portal/en/record/9200211/en_list_one_vad_0342.html
• Princeton Libraries used Leaflet-IIIF for its ["Plan of Versailles"](Plan of Versailles) map. This implementation uses GeoJSON annotation to annotate the map being served out by a IIIF server. http://rbsc.princeton.edu/versailles/map
• GeoBlacklight uses Leaflet-IIIF as the IIIF viewing client for viewing images.
• Fulcrum.org uses Leaflet-IIIF for viewing image resources. See it in action https://www.fulcrum.org/concern/file_sets/s7526c42w
• IIIF Curation Viewer - uses Leaflet-IIIF to provide curated cropped viewing experience of IIIF images
  • Digital Typhoon: Himawari-8 Clipping uses Leaflet-IIIF allowing users to clip sections from a large resolution satellite image.
  • IIIF Curation Viewer with Hentaigana Image Recognition Combines IIIF Curation Viewer with TensorFlow for character recognition. Demo
• Matthew Paros' Map of Britain is a short story-map that explores some of Matthew Paris' errors and to begin to understand the geographical conception he had of Britain in the 13th Century. The map also includes modern English translations of the medieval place-names.