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
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" 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.