diff --git a/_includes/links.md b/_includes/links.md index e9ab0fa12..67e835030 100644 --- a/_includes/links.md +++ b/_includes/links.md @@ -45,6 +45,8 @@ [0117]: {{ site.cookbook_url | absolute_url }}/recipe/0117-add-image-thumbnail/ "Manifest Thumbnail" [0118]: {{ site.cookbook_url | absolute_url }}/recipe/0118_multivalue/ "Displaying Multiple Values with Language Maps" +[0135]: {{ site.cookbook_url | absolute_url }}/recipe/0135-annotating-point-in-canvas/ "Annotating a specific point of an image" + [0154]: {{ site.cookbook_url | absolute_url }}/recipe/0154-geo-extension/ "Locate a Manifest on a Web Map" [0232]: {{ site.cookbook_url | absolute_url }}/recipe/0232-image-thumbnail-canvas/ "Implementation discussion: Thumbnails on Canvases" diff --git a/index.md b/index.md index c93c7888f..72b8a20fc 100644 --- a/index.md +++ b/index.md @@ -86,6 +86,7 @@ _(leading on to segmentation examples later)_ * [Tagging with an External Resource][0258] * hotspot linking * [Annotate a specific images or layers][0326] +* [Annotating a specific point of an image][0135] * [Geographic coordinates][0139] * [Embedded or Referenced Annotations][0269] * [Linking external Annotations targeting a Canvas to a Manifest][0306] diff --git a/recipe/0135-annotating-point-in-canvas/index.md b/recipe/0135-annotating-point-in-canvas/index.md new file mode 100644 index 000000000..30be305b4 --- /dev/null +++ b/recipe/0135-annotating-point-in-canvas/index.md @@ -0,0 +1,37 @@ +--- +title: Annotating a specific point of an image +id: 15 +layout: recipe +tags: image +summary: "This recipe explains how to annotate a specific point of an image." +viewers: +topic: + - annotation +--- + +## Use Case +You want to annotate a coordinate of the image rather than a region. You have a map with some locations that can be represented better by a single coordinate. You want to add some auxiliary data relative to a specific point of the image (e.g. some spectroscopic analysis made on a manuscript). + +## Implementation notes + +This recipe, as [Simple Annotation — Tagging][0021] implements a method for annotating an image. Recipe [Begin playback at a specific point - Time-based media][0015] uses a Point Selector for selecting a specific time of a video, this recipe selects instead a specific point of the image. + +In this use case, the Annotation is inside an Annotation Page in the `annotations` list of the Manifest. The `motivation` of the Annotation is "tagging" and the target `source` points to the Canvas `id`. The `type` property is a Specific Resource while the Selector `type` property is a Point Selector that contains the coordinates `x` and `y` of the Canvas coordinates system as parameters. + +Viewers might consider implementing scale-independent point markers so that they are visible at every level of zoom. + +## Example + +This example uses a leaflet with a map and a guide supplied by the Library of Congress Geography and Map Division, it shows how we can annotate some locations expressed in the map. + +{% include manifest_links.html viewers="" manifest="manifest.json" %} + +{% include jsonviewer.html src="manifest.json" config='data-line="74-82"' %} + +# Related recipes + +* [Begin playback at a specific point - Time-based media][0015] uses a Point Selector for selecting for starting the playback at a specific time. +* [Simple Annotation — Tagging][0021] a simple annotation pointing to a region of an image. + +{% include acronyms.md %} +{% include links.md %} diff --git a/recipe/0135-annotating-point-in-canvas/manifest.json b/recipe/0135-annotating-point-in-canvas/manifest.json new file mode 100644 index 000000000..5b6e299be --- /dev/null +++ b/recipe/0135-annotating-point-in-canvas/manifest.json @@ -0,0 +1,89 @@ +{ + "@context": "http://iiif.io/api/presentation/3/context.json", + "id": "{{ id.url }}", + "type": "Manifest", + "label": { + "en": [ + "Using a point selector for annotating a location on a map." + ] + }, + "summary": { + "en": [ + "A map containing an point with an annotation of the location." + ] + }, + "items": [ + { + "id": "{{ id.path }}/canvas.json", + "type": "Canvas", + "label": { + "en": [ + "Chesapeake and Ohio Canal Pamphlet" + ] + }, + "height": 5212, + "width": 7072, + "items": [ + { + "id": "{{ id.path }}/contentPage.json", + "type": "AnnotationPage", + "items": [ + { + "id": "{{ id.path }}/content.json", + "type": "Annotation", + "motivation": "painting", + "body": { + "id": "https://iiif.io/api/image/3.0/example/reference/43153e2ec7531f14dd1c9b2fc401678a-88695674/full/max/0/default.jpg", + "type": "Image", + "format": "image/jpeg", + "height": 5212, + "width": 7072, + "service": [ + { + "id": "https://iiif.io/api/image/3.0/example/reference/43153e2ec7531f14dd1c9b2fc401678a-88695674", + "type": "ImageService3", + "profile": "level1" + } + ] + }, + "target": "{{ id.path }}/canvas.json" + } + ] + } + ], + "annotations": [ + { + "id": "{{ id.path }}/page/p2/1", + "type": "AnnotationPage", + "items": [ + { + "id": "{{ id.path }}/annotation/p0002-tag", + "type": "Annotation", + "label": { + "en": [ + "Annotation containing the name of the place annotated using the PointSelector." + ] + }, + "motivation": "tagging", + "body": { + "type": "TextualBody", + "value": "Town Creek Aqueduct", + "language": "en", + "format": "text/plain" + }, + "target": { + "type": "SpecificResource", + "source": "{{ id.path }}/canvas.json", + "selector": { + "type": "PointSelector", + "x": 3385, + "y": 1464 + } + } + } + ] + } + ] + } + ] +} \ No newline at end of file