0135 annotating point in canvas

recipe/0135-annotating-point-in-canvas/index.md

@@ -0,0 +1,39 @@
+---
+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:
+ - Annotations
+ - property
+property: PointSelector
+---
+
+## Use Case
+I want to annotate a coordinate of the image rather than a region. I have a map with some locations that can be represented better by a single coordinate. I 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.
+
+Viewer 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="75-83"' %}
+
+# 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 %}

recipe/0135-annotating-point-in-canvas/manifest.json

@@ -0,0 +1,90 @@
+{
+  "@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
+                }
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}