-
Notifications
You must be signed in to change notification settings - Fork 6
/
routeMap.html
244 lines (197 loc) · 10.1 KB
/
routeMap.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
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Map a Route - Payanam</title>
<link href="lib/leaflet.css" orig="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">
<link href="lib/jquery-ui.css" rel="stylesheet">
<link href="lib/tabulator.min.css" rel="stylesheet">
<link href="lib/bootstrap.v4.0.0.min.css" crossorigin="anonymous" alt="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" rel="stylesheet">
<link rel="stylesheet" href="lib/easy-button.css" alt="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.css">
<link rel="stylesheet" href="lib/chosen/chosen.min.css">
<link href='lib/leaflet.fullscreen.css' alt='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<link href="js/style.css" rel="stylesheet">
<!-- Put the CSSs first and JSs next -->
<script src="lib/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="lib/jquery-ui.min.js" type="text/javascript"></script>
<script src="lib/leaflet.js"></script>
<script src="lib/easy-button.js" alt="https://cdn.jsdelivr.net/npm/leaflet-easybutton@2/src/easy-button.js"></script>
<script src="lib/tabulator.min.js" type="text/javascript"></script>
<script src="lib/popper.v1.12.9.min.js" crossorigin="anonymous" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" alt="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="lib/bootstrap.v4.0.0.min.js" crossorigin="anonymous" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" alt="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="lib/papaparse.min.js" type="text/javascript"></script>
<script src="lib/leaflet-ant-path.js"></script>
<script src="lib/chosen/chosen.jquery.min.js" type="text/javascript"></script>
<script src='lib/Leaflet.fullscreen.min.js' alt='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<script src="lib/Leaflet.Control.Custom.js"></script>
<script src="lib/leaflet-providers.js"></script>
<script src="lib/leaflet-hash.min.js"></script>
<style>
#map {
height: 85vh;
width: 100%;
}
/* MAP */
#mapContainer {
position: relative;
}
input[type=checkbox] {
width: 15px; height: 15px;
/*-webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;*/
border: 1px solid #000;
vertical-align: middle;
}
textarea {
font-family: 'Courier New', Courier, monospace;
font-size: 80%;
}
.confidence-style {
font-size: 12px;
}
.divOnMap2 {
padding: 2px;
background: rgba(255, 255, 255, 0.8);
font-size: 12px;
border: 1px solid #000;
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
.scrollbox {
overflow:auto;
max-height: 250px;
width: 90%;
background: rgba(255, 240, 28, 0.2);
padding: 10px 20px;
}
.divOnMap1 {
padding: 10px;
background: rgba(255, 255, 255, 0.6);
/*font-size: 14px;*/
border-radius: 5px;
box-shadow:0px 0px 5px black;
}
</style>
</head>
<body>
<div id="topMenu"></div>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<h3>Route Mapper</h3>
<p><small>
<select id="routeSelect"></select>
<span id="routeStatus"></span> </small>
<a class="badge badge-secondary" data-toggle="collapse" href="#collapseRoute" role="button" aria-expanded="false" aria-controls="collapseRoute">Show/Hide Route Table</a>
</p>
<div class="collapse show" id="collapseRoute">
<div id="routeTable"></div>
<div id="autoSuggest"></div>
<br>
<small>
<input id="addStop" size="10"><button onclick="addStop()" type="button" title="Add a stop to the route">Add a stop</button>
<button onclick="reSequence()">Re-Number<br>Sequence</button>
<button onclick="adoptSuggested()">Adopt first suggestions<br> for all unmapped stops</button>
<button onclick="routeTable.clearFilter(true)">Clear All<br>Filters</button>
</small>
</div><!-- route block collapse-->
<hr>
<br>
<h5>DataBank table <small>(dull yellow dots) <a class="badge badge-secondary" data-toggle="collapse" href="#collapseDatabank" role="button" aria-expanded="false" aria-controls="collapseRoute">show/hide</a></small></h5>
<small><p id="databanks">| </p></small>
<div class="collapse show" id="collapseDatabank">
<div id="databankTable"></div>
<small><p class="littleTopSpace">
On map: show top <input id="databankLimit" size="5" value="25000"> results. (wait 2 seconds after sorting/filtering to render on map)
</p></small>
</div>
</div>
<div class="col-md-6">
<small>
<span id="numMapped">x stops mapped</span> |
see map-center on:
<big><a href="javascript:{}" onclick="openExternalMap('g')" class="badge badge-primary">Gmaps</a>
<a href="javascript:{}" onclick="openExternalMap('m')" class="badge badge-primary">Mapillary</a>
<a href="javascript:{}" onclick="openExternalMap('p')" class="badge badge-primary">Pic4carto</a>
</big>
</small>
<div id="mapContainer">
<div id="map"></div>
</div>
<p class="littleTopSpace"><small>
</small></p>
<div class="row">
<div class="col-md-6">
<p><button class="btn btn-success" onclick="saveRoute()" title="click this regularly while making changes!">Save Route</button></p>
<p><small><span id="routeSaveStatus"> </span></small></p>
<hr>
<h5>Extra</h5>
<small><button onclick="routeTable.download('csv', 'routeMap.csv')">download Route table as csv</button></small>
<br><br>
</div><div class="col-md-6">
<p><button class="btn btn-sm btn-warning" onclick="routeSuggest()">Load Suggestions<br>for this route</button>
<label title="Do similar-name matching instead of exact. Note: results can be very inaccurate"><input type="checkbox" id="fuzzy"> Fuzzy</label></p>
<p><small><span id="routeSuggestStatus"></span></small></p>
<p class="alert alert-warning"><small>Notes: Save any changes done first!</small></p>
<hr>
<div class="alert alert-secondary">
Lock this Route? <a class="badge badge-secondary" data-toggle="collapse" href="#collapseLock" role="button" aria-expanded="false" aria-controls="collapseRoute">show/hide</a><br>
<div class="collapse" id="collapseLock">
<br>
<p><button class="btn btn-sm btn-danger" onclick="lockRoute()">Lock this Route</button> as completed.</p>
<p id="routeLockStatus"></p>
<p><small>What this means: The route will be moved to "locked-routes" folder on server and will no longer be available for editing. Its mapping will be assumed to be "final" and will be used as benchmark in bulk mapping exercises.</small></p>
</div>
</div>
<hr>
Upload GPX file: <input type="file" id="gpxFile" name="gpxFile" accept=".gpx" class="btn btn-sm btn-outline-secondary">
</div>
</div><!-- end of row > subcolumns in right side-->
<h5>Additional Route info:</h5>
<div id="additionalInfo"></div>
</div><!-- end of right side column -->
</div><!-- end of row -->
<br>Mapillary full view: <a class="badge badge-secondary" data-toggle="collapse" href="#collapseMapillary" role="button" aria-expanded="false" aria-controls="collapseMapillary">Show/Hide</a></br>
<div class="collapse hide" id="collapseMapillary">
<iframe id="mapillary" height="400" style="width:100%;"></iframe>
</div>
<br><br>
<div id="accordion">
<h4>Instructions</h4>
<div>
To Do.<br>
<!--
<ol>
<li>Choose a route from top-left drop-down</li>
<li>Have to map each stop.</li>
<li>As you map them, stops will appear on the map. Green are for onward direction (0), and Purple are for return direction (1).</li>
<li>To check the order of stops on map, click the route icon on left side of map. That will toggle on the default route lines layer. (toggle it on/off once if you've changed a stop, deleted a stop etc so it can be redrawn from new layout)</li>
<li>Below the map, there's a big yellow button, "Load Sugge". Press it to load suggested locations for each stop. You will then see the "suggested" column get populated on the route table.</li>
<li></li>
<br>
<li>Bottom table is for databank. Load it by clicking "Load Databank" button. Databank points will load as light brown dots on the map.</li>
<li>Use the filters to drill down to the right options.</li>
<li>The databank CSV is in the databank/ folder of this app.</li>
<li>You can change which databank csv is used, from config.json .</li>
<li>In top table, you can edit various columns, delete and add entries. To save changes back to the csv, click on the big green "save changes.." button below the map.</li>
<li>Click "map all exact matches" if you want to run a bulk direct names matching function at backend, which reads the default databank as set in the config.json file.</li>
<li>You can also do a "fuzzy" search for a name on the databank. This will return a scored list of names that sound closest to the search term.</li>
</ol>
-->
</div>
</div><!-- Accordion over -->
<br>
<p id="keyStatus"></p>
<small>
Credits:<br>
<p>On map focus icon made by <a href="https://www.flaticon.com/authors/xnimrodx" title="xnimrodx">xnimrodx</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a><br>
Zoom-to-fit icon made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a><br>
Route toggle icon by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
</small>
</div>
<!-- END HTML. BEGIN SCRIPT-->
<script src="js/common.js"></script>
<script src="js/routeMap.js"></script>
</body>
</html>