-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (84 loc) · 3.96 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenHistoricaMapInspector Demo</title>
<!-- jQuery dependency for slideshow lightbox behavior; OHM website uses jQuery so this is OK -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- our own API -->
<script type="text/javascript" src="./api/api.js"></script>
<link rel="stylesheet" type="text/css" href="./api/api.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<style>
td {
vertical-align: top;
}
</style>
<script>
// assumption is that something in the caller will define a OSM feature type and ID, e.g. way 123456
// here for a demo, let's provide a form that sets these as OSMTYPE and OSMID
var OSMTYPE;
var OSMID;
var inspector;
function init () {
var params = new URLSearchParams(document.location.search);
if (params.get('osmid')) document.querySelector('input[name="osmid"]').value = params.get('osmid');
if (params.get('osmtype')) document.querySelector('select[name="osmtype"]').value = params.get('osmtype');
if (params.get('osmid') && params.get('osmtype')) {
OSMTYPE = params.get('osmtype');
OSMID = params.get('osmid');
}
// if we are given a type and ID, load it
// if not, then we won't even be seeing this sidebar and we have nothing to do
inspector = new openhistoricalmap.OpenHistoricaMapInspector({
debug: true,
onFeatureFail: function (type, id) {
console.log([ 'failed to load feature', type, id ]);
},
onFeatureLoaded: function (type, id, xmldoc) {
console.log([ 'loaded feature', type, id, xmldoc ]);
},
});
if (OSMTYPE && OSMID) {
inspector.selectFeature(OSMTYPE, OSMID);
}
}
</script>
</head>
<body onLoad="init();">
<table style="width: 100%;">
<tr>
<td style="width: 25%;">
<!-- a form for entering a OSM ID and reloading this page -->
<form method="GET" action=".">
<select name="osmtype">
<option>way</option>
<option>node</option>
<option>relation</option>
</select>
<input type="number" min="0" step="1" name="osmid" placeholder="enter osm id" />
<input type="submit" value="Go" />
</form>
</td>
<td>
<!-- this HTML structure simulates the strcture of the OSM sidebar -->
<!-- The .browse-section is the inspector panel -->
<!-- everything else is stuff we don't control, such as the XML links -->
<div id="sidebar">
<div id="sidebar_content">
<h2>Type: Feature Name (1234567890)</h2>
<div class="browse-section">
<p>Stock inspector panel and behavior remain here, and will not be modified.</p>
<p>Pretend this is the classic table of attributes, because that's what will be here.</p>
<p>The inspector's footer has links to toggle between Classic Inspector and OHM Inspector.</p>
</div>
<div class="secondary-actions">
<a href="javascript:void(0);">Download XML</a> · <a href="javascript:void(0);">View History</a>
<p>These footer links are just mockups, as the real ones are supplied as part of the classic inspector.</p>
</div>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>