-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
81 lines (81 loc) · 4.49 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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="deriviste.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/mapillary.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<script src="umbrella.min.js"></script>
<script src="autocomplete.min.js"></script>
<script src="deriviste.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/mapillary.min.js"></script>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
<script src="leaflet.rotatedMarker.js"></script>
<script src="leaflet.bingLayer.min.js"></script>
<script src="leaflet-hash.js"></script>
<title>Deriviste</title>
</head>
<body onload="initialise()">
<div id="introduction">
<div class="inner">
<p><b>Deriviste</b> provides a simple interface to add nodes to OpenStreetMap based
on what you see in Mapillary street-level imagery.</p>
<ul>
<li>Click a place on the map with a green highlight.
<li>Double-click an object on the street imagery to place a node there.
<li>Use the search box to find an OSM tag preset.
<li>Complete the tags using the right-hand tag table.
<li>Repeat until you're done.
<li>Enter your OSM username and password, then click 'Upload'.
</ul>
<p>The currently selected node is shown in red, others in blue. You can drag the
nodes around to fine-tune their position. (You can also place nodes by
double-clicking on the map.)</p>
<p>Don't forget to revisit the area with iD, Potlatch 2 or Vespucci to remove
any duplicates and generally clean up. The Mapillary API sometimes fails to
find co-ordinates for a click - sorry about that.</p>
<p><a href='https://github.com/systemed/deriviste' target='_blank'>Source</a></p>
</div>
</div>
<div id="map"></div>
<div id="mapillary"></div>
<div id="controls">
<div class='inner'>
<div class="aa-input-container" id="aa-input-container">
<input type="search" id="aa-search-input" class="aa-input-search" placeholder="Search for tags..." name="search" autocomplete="off" />
<svg class="aa-input-icon" viewBox="654 -372 1664 1664">
<path d="M1806,332c0-123.3-43.8-228.8-131.5-316.5C1586.8-72.2,1481.3-116,1358-116s-228.8,43.8-316.5,131.5 C953.8,103.2,910,208.7,910,332s43.8,228.8,131.5,316.5C1129.2,736.2,1234.7,780,1358,780s228.8-43.8,316.5-131.5 C1762.2,560.8,1806,455.3,1806,332z M2318,1164c0,34.7-12.7,64.7-38,90s-55.3,38-90,38c-36,0-66-12.7-90-38l-343-342 c-119.3,82.7-252.3,124-399,124c-95.3,0-186.5-18.5-273.5-55.5s-162-87-225-150s-113-138-150-225S654,427.3,654,332 s18.5-186.5,55.5-273.5s87-162,150-225s138-113,225-150S1262.7-372,1358-372s186.5,18.5,273.5,55.5s162,87,225,150s113,138,150,225 S2062,236.7,2062,332c0,146.7-41.3,279.7-124,399l343,343C2305.7,1098.7,2318,1128.7,2318,1164z" />
</svg>
</div>
<button type='button' id='delete' onclick='deleteCurrentMarker()' disabled>Delete selected node</button>
</div>
<div id="uploading" class="inner">
<div id="credentials-container">
<input id='username' name='username' placeholder='OSM username'>
<input id='password' name='password' type='password' placeholder='OSM password'>
</div>
<button type='button' id='upload' onclick='startUpload()' disabled>Upload <span id='changes'>0</span> nodes</button>
</div>
</div>
<div id="tag_editor">
<center>
<h2>Edit tags</h2>
<table id='tags'>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
<tr><td class='key'><input></td><td class='value'><input></td></tr>
</table>
</center>
</div>
<div id='flash'></div>
</body>
</html>