Place Canvas Fragment to an Area on a Web Map

[thehabes]

Geolocating A Canvas Fragment

• index.md File
• Preview

Use case

SLU is using geographic Annotations to describe JSON-LD resources. We use mapping tools like Leaflet to render these Annotations into meaningful interfaces. The general use case is I know the JSON-LD URI of some data resource. I may own the database in which it presides, I may own the resource, or it may be entirely third party. The resource might not be IIIF, but for our purposes here say that it is. I have geographic information, which may include some metadata beyond geographic coordinates, that applies to this resource. I would like to make a IIIF compliant assertion that places the resource to known Earth coordinates.

Further Information

This is originating from the IIIF + Maps conference, the original issue can be found at IIIF/iiif-stories#118.

The recipe is a stepping stone to recipes for the following stories

• I want to link a word/region in a transcription to geo location iiif-stories#116
• I want to associate multiple different locations with a single resource  iiif-stories#119
• I want to type my geolocation to say what the geolocation says about the resource iiif-stories#125
• I want to link a IIIF resource to a point on a map iiif-stories#135

Recipes for those stories should note this recipe and, where possible, will be collapsed into this recipe.

[thehabes]

There are multiple ways to do this depending on your situation. If you own the resource, you can either add a service block containing the geocoding information to the resource directly, or you can choose to annotate the resource.

If you choose to annotate, here is what that looks like in Presentation API 3

{
   "id":"https://example.com/annotation/12345",
   "type":"Annotation",
   "@context":"http://iiif.io/api/presentation/3/context.json",
   "motivation":"geocode",
   "body":{
      "id":"https://example.org/geojson/id/123",
      "@context":"http://geojson.org/geojson-ld/geojson-context.jsonld",
      "type":"Feature",
      "properties":{
         "label":"String this geometry node should use as a label.",
         "description":"Some description to go along with node."
      },
      "geometry":{
         "type":"Point",
         "coordinates":[
            7,
            7
         ]
      }
   },
   "target":"https://iiif.example.org/canvas/123"
}

You can also create an AnnotationPage that contains the annotation and include that directly on the resource

{
   "id":"https://iiif.example.org/canvas/123",
   "type":"Canvas",
   "@context":"http://iiif.io/api/presentation/3/context.json",
   "label":{
      "none":[
         "pg. 2"
      ]
   },
   "height":1000,
   "width":750,
   "items":[

   ],
   "annotations":[
      {
         "@context":"http://iiif.io/api/presentation/3/context.json",
         "id":"https://example.org/iiif/annopage/123",
         "type":"AnnotationPage",
         "items":[
            {
               "id":"https://example.com/annotation/12345",
               "type":"Annotation",
               "@context":"http://iiif.io/api/presentation/3/context.json",
               "motivation":"geocode",
               "body":{
                  "id":"https://example.org/geojson/id/123",
                  "@context":"http://geojson.org/geojson-ld/geojson-context.jsonld",
                  "type":"Feature",
                  "properties":{
                     "label":"String this geometry node should use as a label.",
                     "description":"Some description to go along with node."
                  },
                  "geometry":{
                     "type":"Point",
                     "coordinates":[
                        7,
                        7
                     ]
                  }
               },
               "target":"https://iiif.example.org/canvas/123"
            }
         ]
      }
   ]
}

It is roughly the same for Presentation 2. The otherContent field of the resource would have to contain or note this AnnotationList.

{
   "@context":"http://iiif.io/api/presentation/2/context.json",
   "@id":"http://example.org/iiif/book1/canvas/p1",
   "@type":"sc:Canvas",
   "label":"p. 1",
   "height":1000,
   "width":750,
   "images":[

   ],
   "otherContent":[
      {
         "@id":"http://example.org/annolist/123",
         "@context":"http://iiif.io/api/presentation/2/context.json",
         "@type":"sc:AnnotationList",
         "resources":[
            {
               "@type":"oa:Annotation",
               "motivation":"geocode",
               "resource":{
                  "@id":"https://example.org/geojson/id/123",
                  "@context":"http://geojson.org/geojson-ld/geojson-context.jsonld",
                  "@type":"Feature",
                  "properties":{
                     "label":"String this geometry node should use as a label.",
                     "description":"Some description to go along with node."
                  },
                  "geometry":{
                     "type":"Point",
                     "coordinates":[
                        7,
                        7
                     ]
                  }
               },
               "on":"https://iiif.example.org/canvas/123"
            }
         ]
      }
   ]
}

If you choose to implement using a service, here is what that looks like in Presentation 3

{
   "id":"https://example.org/iiif/book1/canvas/p2",
   "type":"Canvas",
   "@context":"http://iiif.io/api/presentation/3/context.json",
   "label":{
      "none":[
         "pg. 2"
      ]
   },
   "height":1000,
   "width":750,
   "items":[

   ],
   "service":[
      {
         "id":"https://example.org/geo/service/point(7,7)&format=geojson",
         "type":"GeoJSON_Serivce",
         "profile":"http://geojson.org/geojson-spec.html",
         "@context":"http://geojson.org/geojson-ld/geojson-context.jsonld",
         "properties":{
            "type":"Feature",
            "label":"String this geometry node should use as a label.",
            "description":"Some description to go along with node.",
            "motivation":"geocode"
         },
         "geometry":{
               "type":"Point",
               "coordinates":[
                  7,
                  7
               ]
          }
       }
   ]
}

This has a small issue with how type clashes, but we can handle that within properties.

This is what that service block looks like in Presentation 2.

{
   "@context":"http://iiif.io/api/presentation/2/context.json",
   "@id":"http://example.org/iiif/book1/canvas/p1",
   "@type":"sc:Canvas",
   "label":"p. 1",
   "height":1000,
   "width":750,
   "images":[

   ],
   "otherContent":[

   ],
   "service":{
      "@id":"https://example.org/geo/service/point(7,7)&format=geojson",
      "@type":"Feature",
      "@context":"http://geojson.org/geojson-ld/geojson-context.jsonld",
      "profile":"http://geojson.org/geojson-spec.html",
      "properties":{
         "type":"Feature",
         "label":"String this geometry node should use as a label.",
         "description":"Some description to go along with node.",
         "motivation":"geocode"
      },
      "geometry":{
         "type":"Point",
         "coordinates":[
            7,
            7
         ]
      }
   }
}

You will also notice I have chosen the geocode motivation. Proper extensions to motivation are still being discussed within the IIIF-Maps community.

Note that geometry can be more than just a Point.

Note that properties is a very generic field. This community should seek to put some rails on what goes into that field. If, for example, the targeted resource has a label and the properties field contains a label, the consuming interface must make a choice on which to preference for UI/UX purposes. This could be a way to inject, override or extend resource properties.

Note that target values can include hash or SVG selectors. This would allow someone to annotate a portion/slice/frame/fragment of a resource.

[thehabes]

Going to focus this recipe as a solution for IIIF/iiif-stories#116 using IIIF Annotation(s).

[glenrobson]

Just looking around to see if anyone else has done geo with annotations and found the following:

w3c/web-annotation#309

Which mentions two options, using a Web Anno extension:

https://w3c.github.io/web-annotation/vocab/wd/#extensions

or using a type Dataset which I'm not sure helps us that much but would presumably allow us to use straight JSON rather than JSON-LD for the geo json maybe using: https://www.w3.org/TR/json-ld11/#json-literals. I'm not quite sure of the benefit of this apart from there are hints about geojson and lists of lists...