-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
251 lines (214 loc) · 14.1 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Open Historical Data Map (OHDM)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--OpenLayer's-->
<link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
<!--jQuery-->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--FontAwesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<!--OHDM CSS-->
<link rel="stylesheet" href="css/ohdm.css">
</head>
<body>
<div class="container">
<h1>Open Historical Data Map - WebEditor</h1>
<hr>
<a href="http://www.sharksystem.net">We</a> are working on a system like
<a href="http://www.osm.org">Open Street Map</a> but for historic data. That page is just for some basic tests.
A sketch of our plans can be found on <a
href="https://www.researchgate.net/publication/303818952_Open_Historical_Data_Map_OHDM_-_work_in_progress">ResearchGate</a>
<div class="row">
<div id="map" class="col-sm-9 col-md-9 col-lg-9 col-xl-9">
</div>
<div class="col-sm-3 col-md-3 col-lg-3 col-xl-3 panel" id="editorPanel">
<div class="header">
<h3>Editor
<button id="info-editor"><i class="fa fa-info-circle" aria-hidden="true"></i></button>
</h3>
</div>
<div id="dialog" title="Information">
<p><strong>Please read carefully!</strong></p>
<p></p>
<!--add information in <p> above-->
</div>
<div class="flex-wraper">
<div id="uploadMap" class="well">
<label>Upload your Map</label> (jpeg, png)
<input id="upload" type="file" name="filename" accept="image/jpg, image/jpeg, image/png">
</div>
<div id="adjustMap" class="well">
<div class="navigator">
<button id="backToUpload" class="navigator-button back"><i class="fas fa-angle-left"></i>
</button>
<label class="margin-center">Adjust your Map</label>
<button id="goToDraw" class="navigator-button next"><i class="fas fa-angle-right"></i></button>
</div>
<hr class="separator">
<div><label>Opacity:</label> <input id="opacity" type="range" max="1" step="0.01" value="1"></div>
<div><label>Scale:</label> <input id="imageScale" type="range" value="1" step="0.0000001"
min="0.0000001" max="10">
</div>
<br>
<div><p>Click to select and drag the image to move it.</p></div>
</div>
<div id="drawMap" class="well">
<div class="navigator">
<button id="backToAdjust" class="navigator-button back"><i class="fas fa-angle-left"></i>
</button>
<label class="margin-center">Draw your Map</label>
<button id="goToSave" class="navigator-button next"><i class="fas fa-angle-right"></i></button>
</div>
<hr class="separator">
<div>
<span>
Prior to drawing, fill out the name text field.
Select a geometry type from the dropdown below to start drawing.
To finish drawing, click the last point.
To activate freehand drawing for lines and polygons, hold the <strong
class="code">Shift</strong> key.
</span>
<hr class="separator">
<input id="drawModeToggle" type="checkbox">
<label>Draw Mode</label>
</div>
<div>
<label>Geometry type</label>
<br>
<select id="geometry_type">
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
<br>
<label>Name for this geometry</label><input id="label" type="text">
<br>
</div>
<hr>
<div id="categoryDiv">
<label>Please choose from a category</label>
<br>
<select id="layer_name">
<optgroup class="polygon" label="Polygon's">
<option value="natural_polygons">Natural polygons</option>
<option value="military_polygons">Military polygons</option>
<option value="waterway_polygons">Waterway polygons</option>
<option value="geological_polygons">Geological polygons</option>
<option value="aeroway_polygons">Aeroway polygons</option>
<option value="emergency_polygons">Emergency polygons</option>
<option value="building_polygons">Building polygons</option>
</optgroup>
<optgroup class="polygon" label="Label for polygon's">
<option value="natural_polygons_label">Natural polygons label</option>
<option value="military_polygons_label">Military polygons_label</option>
<option value="waterway_polygons_label">Waterway polygons label</option>
<option value="geological_polygons_label">Geological polygons label</option>
<option value="aeroway_polygons_label">Aeroway polygons label</option>
<option value="emergency_polygons_label">Emergency polygons label</option>
<option value="building_polygons_label">Building polygons label</option>
</optgroup>
<optgroup class="polygon" label="Landuse">
<option value="landuse_brown">Landuse brown</option>
<option value="landuse_commercialetc">Landuse commercial etc.</option>
<option value="landuse_freegreenandwood">Landuse free green and wood</option>
<option value="landuse_gardeningandfarm">Landuse gardening and farm</option>
<option value="landuse_grey">Landuse grey</option>
<option value="landuse_industrial">Landuse industrial</option>
<option value="landuse_military">Landuse military</option>
<option value="landuse_residentialetc">Landuse residential etc.</option>
<option value="landuse_transport">Landuse transport</option>
<option value="landuse_water">Landuse water</option>
</optgroup>
<optgroup class="polygon" label="Label for landuse">
<option value="landuse_brown_label">Landuse brown label</option>
<option value="landuse_commercialetc_label">Landuse commercial etc. label</option>
<option value="landuse_freegreenandwood_label">Landuse free green and wood label
</option>
<option value="landuse_gardeningandfarm_label">Landuse gardening and farm label</option>
<option value="landuse_grey_label">Landuse grey label</option>
<option value="landuse_industrial_label">Landuse industrial label</option>
<option value="landuse_military_label">Landuse military label</option>
<option value="landuse_residentialetc_label">Landuse residential etc. label</option>
<option value="landuse_transport_label">Landuse transport label</option>
<option value="landuse_water_label">Landuse water label</option>
</optgroup>
<optgroup class="line" label="Line's">
<option value="highway_path_lines">Highway path lines</option>
<option value="highway_small_lines">Highway small lines</option>
<option value="highway_tertiary_lines">Highway tertiary lines</option>
<option value="highway_huge_lines">Highway huge lines</option>
<option value="highway_secondary_lines">Highway secondary lines</option>
<option value="highway_primary_lines">Highway primary lines</option>
<option value="railway_lines">Railway lines</option>
</optgroup>
<optgroup class="line" label="Border's">
<option value="boundary_admin_2_lines">Boundary admin_2 lines</option>
<!--<option value="boundary_admin_3_lines">Boundary admin_3 lines</option>-->
<option value="boundary_admin_4_lines">Boundary admin_4 lines</option>
<!--<option value="boundary_admin_5_lines">Boundary admin_5 lines</option>-->
<option value="boundary_admin_6_lines">Boundary admin_6 lines</option>
<!--<option value="boundary_admin_7_lines">Boundary_admin_7 lines</option>-->
<!--<option value="boundary_admin_8_lines">Boundary_admin_8 lines</option>-->
<option value="boundary_admin_9_lines">Boundary admin_9 lines</option>
<!--<option value="boundary_admin_10_lines">Boundary admin_10 lines</option>-->
</optgroup>
<optgroup class="point" label="Point's">
<option value="shop_points">Shop points</option>
<option value="public_transport_points">Public transport points</option>
<option value="natural_points">Natural points</option>
<option value="aeroway_points">Aeroway points</option>
<option value="craft_points">Craft points</option>
</optgroup>
</select>
</div>
<div>
<hr>
<p style="text-decoration: line-through">Got a GeoJSON file already? Just drop it onto the map
to add.</p>
<p style="color: red">Coming soon.</p>
</div>
</div>
<div id="saveMap" class="well">
<div class="navigator">
<button id="backToDraw" class="navigator-button back"><i class="fas fa-angle-left"></i></button>
<label class="margin-center">Save your Map</label>
<button id="save" class="navigator-button"><i class="fas fa-check"></i></button>
</div>
<hr class="separator">
<div>
<label for="date">Date:</label><br><input id="date" type="text" placeholder="e.g. 1782-03-23">
<label for="map_author">Author of the Map:</label><input id="map_author" type="text"
placeholder="e.g. Carl Friedrich Gauss">
<label for="uploader">Your name:</label><input id="uploader" type="text"
placeholder="e.g. John Doe">
<label for="description">Description:</label><input id="description" type="text"
placeholder="a brief description">
<hr class="separator">
<a id="exportLink" type="application/geo+json">Download GeoJSON</a>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="application/javascript" src="js/map-layers.js"></script>
<script type="application/javascript" src="js/ohdm.js"></script>
<script type="application/javascript" src="js/image_upload_activity.js"></script>
<script type="application/javascript" src="js/adjust_activity.js"></script>
<script type="application/javascript" src="js/draw_activity.js"></script>
<script type="application/javascript" src="js/editor_navigation.js"></script>
<script type="application/javascript" src="js/geometry_upload_activity.js"></script>
<script type="application/javascript" src="js/info.js"></script>
</body>
</html>