Leaflet-IIIF-GeoJSON

Introduction

Leaflet-IIIF-GeoJSON is a new tool which can be used alongside Jack Reed's Leaflet-IIIF plug-in to help you add annotations to a IIIF image. 

Leaflet-IIIF is a plug-in which allows you to use and view IIIF images using the Leaflet mapping library.  Leaflet-IIIF-GeoJSON combines Leaflet-IIIF with Leaflet-Draw to create an easy way to highlight areas on a IIIF image and to then append an annotation to the highlighted area.

You can see the kind of annotated IIIF images which can be created with Leaflet-IIIF-GeoJSON on this simple Feast of the Gods demo (using a IIIF manifest of a painting in the National Gallery of Art) and on this annotated Medieval Map of Britain (using a IIIF manifest from Corpus Christi College).

Demo

You can see and play with Leaflet-IIIF-GeoJSON here. On this app you can draw areas directly onto the painting Ginevra de' Benci by Leonardo da Vinci. After adding a polygon, a polyline, a rectangle or a marker to the painting you are prompted to 'Add Text'. This will be the text that appears when someone clicks on the selected areas you have drawn on the picture.

Once you have finished drawing on the painting and adding annotations you can press on the green 'Export GeoJSON' button. This will save a geoJSON file containing the data of all your drawn polygon shapes and annotations. This geoJSON file can now be used alongside the Leaflet-IIIF plug-in to create an interactive version of the painting (or of any other IIIF image).

Getting Started

1. Open Leaflet-IIIF-GeoJSON
2. Enter your own image by pointing the URL to your own IIIF manifest. For example the link https://leaflet-iiif-geojson-drafting.glitch.me/?manifest=https://www.nga.gov/api/v1/iiif/presentation/manifest.json?cultObj:id=41624 will open Leaflet-IIIF-GeoJSON with another painting
3. Draw on the painting and add your annotations
4. Save your polygons and annotations by pressing on the 'Export GeoJSON' button.

Using Your Saved GeoJSON with Leaflet-IIIF

If you want to use your saved geoJSON file with Leaflet-IIIF then you can refer to the page Using GeoJSON with Leaflet in the Leaflet documentation. Alternatively you can just clone my Glitch page Leaflet-IIIF-Annotation. Once you have opened Leaflet-IIIF-Annotation:

1. Click on 'Settings' and select the option to 'Remix this Project'. 
2. Open 'app.js' and change the variable 'manifestUrl' to the URL of your IIIF manifest - 

 "var manifestUrl = yourmanifestURL" 

      3. Open 'app.js' cut and paste your GeoJSON data to the data variable - 

 "var data = yourgeoJSONdata"

Now when you preview your project you should have an interactive image! Click on any of the highlighted areas on the image and you can read the annotations that you added with Leaflet-IIIF-Annotation.

Acknowledgements

All the heavy lifting in Leaflet-IIIF-GeoJSON is done by Jack Reed's Leaflet-IIIF plug-in and Jack Reed's Leaflet-IIIF Draw demo. Essentially all I have added to Jack's Leaflet-IIIF Draw demo is a prompt to add an annotation to a drawn polygon shape and an option to downolad the data of your drawn areas and annotations as a geoJSON file. 

To Do

1. Currently Leaflet-IIIF-GeoJSON only allows you to add annotations to drawn polygons. You can still use the drawing tools to add polylines, rectangles, markers and circles to your image. You cannot currently append annotations to any of these features. 

You can now add annotations to drawn polygons, polylines, rectangles, and markers. 

2. I would like to add a prompt when you open Leaflet-IIIF-GeoJSON to add your own IIIF manifest URL. This would enable you to use Leaflet-IIIF-GeoJSON with any IIIF image without first having to clone its Glitch page.

You can now open any IIIF manifest on Leaflet-IIIF-GeoJSON by adding the URL of your manifest to the Leaflet-IIIF-GeoJSON URL parameters.

Comment

If you do use Leaflet-IIIF-GeoJSON and Leaflet-IIIF-Annotation to make an interactive image map please leave a link to it in the comments below. I'd love to have a look at it!