-
Notifications
You must be signed in to change notification settings - Fork 1
/
annotation-viewer.html
125 lines (120 loc) · 5.51 KB
/
annotation-viewer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<!--
@author Bryan Haberberger
https://github.com/thehabes
-->
<html>
<head>
<title>Annotation Viewer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/chota@latest">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
crossorigin=""></script>
<script src="./app.js" type="module"></script>
<link rel="stylesheet" href="./app.css" />
<link rel="icon" type="image/x-icon" href="./images/globeicon.png">
</head>
<body>
<header>
<div class="row">
<div class="two columns">
<!-- This could go off to iiif.io -->
<a target="_blank" href="https://rerum.io"><img src="./images/rerum-logo.png" alt="logo" class="u-full-width"></a>
</div>
<h1 class="ten columns">
<div class="regular-header-text">RERUM</div>
<br class="savespace">
<div class="small-header-text">Geolocation Annotation Viewer</div>
</h1>
</div>
</header>
<div class="container">
<p>
For more information see the <a class="text-bold" target="_blank" href="https://github.com/CenterForDigitalHumanities/navplace-viewer#readme">Viewer Readme</a>.
</p>
</div>
<div id="viewerBody" class="container is-hidden">
<p>
This viewer is for W3C Web Annotation 'Annotation' and 'AnnotationPage' types. There is also a viewer specifically for IIIF Presentation API Defined Types. <a class="text-dots" target="_blank" href="index.html">Click here to learn more</a>.
</p>
<p>
Clicking any shape on the map will show applicable information about the resource that shape represents.
Pan and zoom are supported.
</p>
<div id="leafletInstanceContainer">
<div id="loadingMessage" style="text-align: center;">Gathering Resource Data From Around The World...</div>
</div>
</div>
<div id="needs" class="container">
<p class="howTo">
It looks like you haven't provided a URI. If you are not using the URL parameter <code>?iiif-content=</code> or <code>?data=</code>, you can supply a URI here.
<input id="resourceURI" type="text"/>
</p>
</div>
<div class="container" style="margin-top: 1em;">
<div class="row">
<div id="options" class="col-10">
<input id="loadInput" type="button" onclick="loadURI(event)" value="Load Resource" />
<input type="button" onclick="startOver(event)" value="Start Over" />
</div>
</div>
</div>
<footer class="nav nav-center text-primary is-fixed is-full-width, is-vertical-align">
<div>
<a target="_blank" href="https://www.slu.edu/research/faculty-resources/research-computing.php">
<img class="brand" src="./images/rcg-logo.jpg"/> <small>©2023 Research Computing Group </small>
</a>
</div>
<div>
<a target="_blank" href="https://rerum.io">
<img class="brand" src="./images/rerum-logo.png"/> <small>RERUM</small>
</a>
</div>
<div>
<a target="_blank" href="https://iiif.io">
<img class="brand" src="https://iiif.io/assets/images/logos/logo-sm.png"><small>International Image Interoperability Framework</small>
</a>
</div>
</footer>
</body>
<script>
function startOver(){
window.location = window.location.origin + window.location.pathname
}
function getURLParameter(variable) {
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i = 0; i < vars.length; i++) {
var pair = vars[i].split("=");
if (pair[0] == variable) { return pair[1]; }
}
return (false);
}
function loadURI(){
let url = resourceURI.value ?? getURLParameter("iiif-content") ?? getURLParameter("data")
if(url){
let contentState = `?data=${url}`
url = window.location.href.split('?')[0] + contentState
window.location = url
}
else{
alert("You must supply a URI via the URL parameter ?data= or supply a value in the text input.")
}
}
/**
* Helps with initial orientation on page loads
*/
window.onbeforeunload = function () {
window.scrollTo(0,0);
}
// No options, so if the resource is loaded just hide this button
if(getURLParameter("data") ? getURLParameter("data") : getURLParameter("iiif-content")){
loadInput.classList.add("is-hidden")
}
</script>
</html>