Home

Awesome

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

import '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.

Options

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

OptionTypeDefaultDescription
tileFormatString'jpg'The format of the returned image.
tileSizeNumber256Tile size (width and height in pixels, assuming tiles are square).
fitBoundsBooleantrueAutomatically center and fit the maps bounds to the added IIIF layer
setMaxBoundsBooleanfalseConstrain the map viewer to the image
qualityString'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:

Leaflet-IIIF Examples

Leaflet-IIIF in the wild