A Leaflet plugin for viewing IIIF images. See the demo
Requires Leaflet.js and jQuery
$ 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 |
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
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.