A Leaflet plugin for viewing IIIF images. See the demo
Requires Leaflet.js and jQuery
Note on Leaflet Compatibility
| Leaflet Versions | Leaflet-IIIF Versions |
|---|---|
| < 1.0.0 | < 1.0.0 |
= 1.0 | >= 1.0
$ bower install leaflet-iiif
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.
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. |
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 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
- 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