2d:null 2e:["$","title",null,{"children":"Annotorious: Introductory Example | Rainer Simon | Observable"}] 33:T714,## But wait - there's more! The example above is just the bare minimum. There's a __a lot more__ you can do with Annotorious! - __Use additional drawing tools__ - points, polygons, circle, freehand, etc. - __Customize the visual style of everything__ - including annotation shape styles and editor appearance. There's even a way to define your own __style rules__, e.g. to make annotations with different tags appear in different colors. - __Disable the popup editor and use only the drawing tools__, if drawing shapes is all you need - Use it on __super-high resolution zoomable images__ with [OpenSeadragon](https://openseadragon.github.io/) - __Store annotations__ in the cloud, or by integrating with your own backend - Extend functionality with one of the existing __plugins__ or write your own extensions using the __comprehensive JavaScript API__ You can find all the details and documentation on the [project website](https://recogito.github.io/annotorious/). Make sure to check the [API documentation](https://recogito.github.io/annotorious/api-docs/annotorious/), and the [guides section](https://recogito.github.io/guides/) for articles on some of the more advanced topics. Last but not least: if you get stuck, there's [a dedicated support chat on Gitter](https://gitter.im/recogito/annotorious) to post questions and get help. ## What's Next? I'm hoping to do regular posts and developer tutorials for [Annotorious](https://annotorious.com) (and its text annotation sibling project [RecogitoJS](https://github.com/recogito/recogito-js)) here on Observable. If there's any topic or question you'd like me to explore in particular, do drop me a line on [twitter](https://twitter.com/aboutgeo), or shout out on the [Annotorious support chat](https://gitter.im/recogito/annotorious). 34:[{"id":"0d720fd0b43a2fbb5068f6bcea4f0c76d4778f2f0f0a5666269016557ae31757767cfaa59b54fe227da7b52aa78e68048e3f9b548d9c00805809ace3ccddc63a","href":"https://static.observableusercontent.com/files/0d720fd0b43a2fbb5068f6bcea4f0c76d4778f2f0f0a5666269016557ae31757767cfaa59b54fe227da7b52aa78e68048e3f9b548d9c00805809ace3ccddc63a","name":"640px-Hallstatt.jpg","type":"image/jpeg","lastModified":1642589084542.738,"size":60936}] 31:{"id":"e892303b86727da5","slug":"annotorious-intro","title":"Annotorious: Introductory Example","thumbnail":"eee4025c798246586e89bcb3be4e16d45fcf21143207dca796f111c7c5fc9ca9","access_level":"public","create_time":"$D2022-01-19T10:42:27.865Z","update_time":"$D2022-01-20T16:24:25.159Z","view_time":null,"first_public_time":"$D2022-01-19T11:06:48.822Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"c64a718e6def143f","login":"rsimon","name":"Rainer Simon","avatar_url":"https://avatars-next.observableusercontent.com/c1e2dd298faa6623db02c1c3a62de876e64001a81c5decf0518ada3a267a70f9","tier":"starter_2024"},"version":172,"publish_version":172,"role":null,"authored":false,"authors":[{"type":"individual","id":"862fb19a86ba32ae","login":"rsimon","name":"Rainer Simon","avatar_url":"https://avatars-next.observableusercontent.com/c1e2dd298faa6623db02c1c3a62de876e64001a81c5decf0518ada3a267a70f9","tier":null}],"members":[{"type":"individual","id":"862fb19a86ba32ae","login":"rsimon","name":"Rainer Simon","avatar_url":"https://avatars-next.observableusercontent.com/c1e2dd298faa6623db02c1c3a62de876e64001a81c5decf0518ada3a267a70f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Annotorious: Introductory Example","cells":[{"id":0,"value":"# Annotorious: Introductory Example\n\n[Annotorious](https://annotorious.com) is a JavaScript library for adding\nannotation functionality to images on websites.\n\nThis notebook is a minimum \"Hello World\" example. It uses the defaults \nto enable __drawing of boxes__, and adding of __text comments__ and __tags__\nto the image below. There's also one pre-set annotation. __Click the box__\nto open the note that's attached to it!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"image = {\n return FileAttachment(\"640px-Hallstatt.jpg\").image();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"The annotation is __editable__: you can add more notes or tags, or move and\nresize the box. (If you want to delete a tag, click on it first, and then \nuse the __X__ icon.)\n\nTo __create a new annotation__, click and drag on the image.\nThis also works in touch mode. Simply tap and drag.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":106,"value":"## How to use this on your own site\n\nMaking an image in your own website annotate-able only takes a few steps:\n\n1. Import the CSS stylesheet\n2. Import the JavaScript file\n3. Initialize Annotorious with as little as a single line of JavaScript\n\nHere's a minimal HTML example page:\n\n```html\n\n \n \n \n \n\n \n

\n \n \n \n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":66,"value":"# Imports & Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"anno = {\n const anno = Annotorious.init({ \n image: image,\n allowEmpty: true\n });\n\n anno.addAnnotation({\n \"@context\": \"http://www.w3.org/ns/anno.jsonld\",\n \"id\": \"#a88b22d0-6106-4872-9435-c78b5e89fede\",\n \"type\": \"Annotation\",\n \"body\": [{\n \"type\": \"TextualBody\",\n \"value\": \"House...\"\n },{\n \"type\": \"TextualBody\",\n \"purpose\": \"tagging\",\n \"value\": \"MyTag\"\n }],\n \"target\": {\n \"selector\": [{\n \"type\": \"FragmentSelector\",\n \"conformsTo\": \"http://www.w3.org/TR/media-frags/\",\n \"value\": \"xywh=pixel:272,163,118,102\"\n }]\n }\n });\n\n return anno;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"style = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"Annotorious = require('@recogito/annotorious')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"