Annotate maps and zoomable high-resolution images by combining Annotorious with the OpenLayers Web map viewer.


Meerwunder vnd seltzame Thier / wie die in den Mitnächtigen Ländern / im Meer vnd auff dem Landt gefunden werden (from the vignettes on Olaus Magnus's Carta marina), Basel c. 1544. Public Domain. Sebastian Münster (1488-1552). Wikimedia Commons.

Getting Started

Set up your OpenLayers map just like you normally would. An example (taken from this very page):

var options =
  { maxExtent: new OpenLayers.Bounds(0, 0, 1475, 1184),
    maxResolution: 8,
    numZoomLevels: 4,
    units: 'pixels' };

var map = new OpenLayers.Map('map', options);
var baseLayer = new OpenLayers.Layer.TMS("Baselayer", "map_muenster/",
  { layername: ".",
    serviceVersion: ".",
    transitionEffect: "resize",
    type:"jpg" });


Make your map annotatable using the Annotorious JavaScript API.


Important! There's a little OpenLayers-specific limitation: since OpenLayers normally uses the mouse (click and drag) to navigate the map, you need to add some extra JavaScript that toggles between normal map navigation and Annotorious. The example below attaches a call to the activateSelector() API method to an HTML button:

<button onclick="anno.activateSelector();" href="#">

Once the selector is activated, Annotorious takes over the map, and dragging the mouse will create an annotation rather than move the map. Once the annotation has been created, normal map navigation is resumed automatically. Full documentation of the activateSelector function is on the Wiki.