A geo-tagging editor widget for Annotorious and RecogitoJS.
Try the live demos here:
Download the latest release and include the JS script file. You can also get the script files directly from the CDN:
<html>
<head>
<!-- Annotorious -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.css">
<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious@latest/dist/annotorious.min.js"></script>
<!-- Geotagging Widget -->
<script src="https://cdn.jsdelivr.net/npm/@recogito/geotagging-widget@latest"></script>
</head>
<body>
<div id="content">
<img id="hallstatt" src="640px-Hallstatt.jpg">
</div>
<script>
(function() {
// Widget configuration (optional!)
var config = {
// XYZ tileserver URL pattern, defaults to 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
tileUrl: 'https://www.exampe-tileserver.com/tile/{z}/{y}/{x}',
// Map origin for empty annotations, defaults to [0, 0]
defaultOrigin: [ 48, 16 ],
// Map zoom for empty annotations, defaults to 7
defaultZoom: 10
// Search endpoint, either String ('osm' | 'whg') or custom function
search: 'osm'
};
var anno = Annotorious.init({
image: 'hallstatt',
widgets: [
{ widget: recogito.GeoTagging(config) },
'COMMENT'
]
});
})()
</script>
</body>
</html>If you use npm: npm install @recogito/geotagging-widget and
import GeotaggingWidget from '@recogito/geotagging-widget';
const config = {
defaultOrigin: [ 48, 16 ]
};
const anno = new Annotorious({
image: imageEl,
widgets: [
{ widget: GeotaggingWidget(config) },
]
});The plugin is also compatible with RecogitoJS. Initialization works the same way.
To enable place search, the plugin includes connectors to two public gazetteer databases: OpenStreetMap, through the public Nominatim API; and the API of the World Historical Gazetteer.
Please note that both of these services are free - but may impose their own rate and usage limits - which means you will have to use them at your own discretion and risk. You can also connect other (or your own) gazetteer search endpoints, by supplying a custom search function in the configuration. See this Wiki page for details.
This plugin was made possible thanks to the support Huygens ING and the Golden Agents project.
Sample images:
-
Epitome theatri Ortelianii, Abraham Ortelius, 1601. Source: Wikimedia Commons, CC-BY-SA 4.0
-
Austria (1603). Source: NYPL, Wikimedia Commons, Public Domain
.jpg){kind=link}