-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (95 loc) · 5.3 KB
/
index.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--[if gt IE 1]><html xmlns="http://www.w3.org/1999/xhtml" class="ie"><![endif]-->
<!--[if !IE]><!--><html xmlns="http://www.w3.org/1999/xhtml"><!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" lang="en" />
<title>Stevenson Maps and Plans of Scotland, 1660-1940 - National Library of Scotland / University of Edinburgh</title>
<!-- jQuery UI css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<!-- specific css to this page -->
<link type="text/css" rel="stylesheet" href="css/maincss.css" media="screen" />
<!-- OpenLayers css -->
<link type="text/css" rel="stylesheet" href="css/ol.css" media="screen" />
</head>
<body>
<div id="header">
<div id="headertitle">
<h1>The Stevenson Maps and Plans of Scotland, 1660 - 1940</h1>
<h5></h5>
</div>
<div id="headerlinks">
<p><strong>Map Search</strong> <a href="https://maps.nls.uk/projects/stevenson/browse/">Text Search</a> <a href="about.html">About</a> <a href="project.html">Project</a> <a href="help.html">Help</a></p>
</div>
</div>
<button id="show">Show Search Panel</button>
<div id="sidebar">
<button type="button" id="hide" class="close" >
<span >×</span>
</button>
<p>Filter the plans by <strong>subject</strong>:</p>
<form><select id="subjectselect" onchange="javascript:changesubject(this.selectedIndex);"></select></form>
<hr2></hr2>
<p>Filter the plans by <strong>date range</strong>:</p>
<label for="amount">Date range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold; width:100px; background-color: white; background:rgba(255,255,255,0.4);" />
<div id="slider-range"></div>
<div id="undatedplans">
<label for="undated">Exclude undated plans<input id="undated" type="checkbox"/></label>
</div>
<hr2></hr2>
<p><strong>Filter plans by coverage?</strong></p>
<form id = "scalesofmaps" >
<input type="radio" name="zoomlevel" value="1" onclick="javascript:filter();" checked="checked" />Yes - based on zoom level <br/>
<input type="radio" name="zoomlevel" onclick="javascript:filter();" value="2" />No - all plans shown<br/>
</form>
<hr2></hr2>
<p><strong>Search for a place:</strong></p>
<p><input type="search" autocomplete="off" id="gaz" onfocus="if(this.value == 'Type a placename...') { this.value = ''; }" onblur="this.value=!this.value?'Type a placename...':this.value;" value="Type a placename..." name="gaz" />
<hr2></hr2>
<p>Change <strong>transparency of base mapping</strong>:</p>
<div id="transparency"></div>
</div>
<div id="map" class="map">
<form><select id="layerSelect" onchange="changemap(this.selectedIndex)"></select></form>
<div id="scalebar"></div>
<div id="loading_results"></div>
<div id="hover_results"></div>
<div id="zoom_statement"></div>
</div>
<div id="resultsSideBar">
<div id="resultsheader"></div>
<div id="results"></div>
</div>
<div id="logo">
<a href="https://www.ed.ac.uk/"><img id="ed" src="img/edinburgh-university-logo.jpg" alt="University of Edinburgh" /></a>
<a href="https://ahrc.ukri.org/"><img id="ahrc" src="img/ahrc-logo.png" alt="Arts and Humanities Research Council" /></a>
<a href="http://www.nls.uk/"><img id="nls" src="img/nls-logo.jpg" alt="National Library of Scotland" /></a>
</div>
<!-- JQuery Javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- JQuery UI Javascript for slider -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- proj4 Javascript for projection information -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<!-- OSMName Gazetteer Javascript -->
<script type="text/javascript" src="https://osmnames.org/api/v1/autocomplete.js"></script>
<!-- OpenLayers Javascript - use ol-debug.js for debugging and ol.js for releasing when finished -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.4.2/ol.js"></script>
<!-- <script type="text/javascript" src="scripts/ol-debug.js"></script> -->
<!-- Our specific Javascript for this map -->
<script type="text/javascript" src="scripts/index.js"></script>
<script type="text/javascript">
jQuery("#show").hide();
jQuery("#hide").click(function(){
jQuery("#sidebar").hide();
jQuery("#show").show();
});
jQuery("#show").click(function(){
jQuery("#sidebar").show();
jQuery("#show").hide();
});
</script>
<!--#include file="/analytics.stm" -->
</body>
</html>