Routino SVN Repository Browser

Check out the latest version of Routino: svn co http://routino.org/svn/trunk routino

ViewVC logotype

Contents of /trunk/web/www/routino/visualiser.html

Parent Directory Parent Directory | Revision Log Revision Log


Revision 933 - (show annotations) (download) (as text)
Wed Dec 7 19:16:35 2011 UTC (13 years, 3 months ago) by amb
File MIME type: text/html
File size: 12474 byte(s)
Move the map preferences (N/S/E/W range, zoom range and URLs) to a separate
file.

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <HTML>
3
4 <!--
5 Routino data visualiser web page.
6
7 Part of the Routino routing software.
8
9 This file Copyright 2008-2011 Andrew M. Bishop
10
11 This program is free software: you can redistribute it and/or modify
12 it under the terms of the GNU Affero General Public License as published by
13 the Free Software Foundation, either version 3 of the License, or
14 (at your option) any later version.
15
16 This program is distributed in the hope that it will be useful,
17 but WITHOUT ANY WARRANTY; without even the implied warranty of
18 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
19 GNU Affero General Public License for more details.
20
21 You should have received a copy of the GNU Affero General Public License
22 along with this program. If not, see http://www.gnu.org/licenses/.
23 -->
24
25 <HEAD>
26 <TITLE>Routino : Data Visualiser for Routino OpenStreetMap Data</TITLE>
27 <META name="keywords" content="openstreetmap routino verifier">
28 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
29
30 <!-- OpenLayers Javascript library -->
31 <script src="../openlayers/OpenLayers.js" type="text/javascript"></script>
32
33 <!-- Page elements -->
34 <script src="page-elements.js" type="text/javascript"></script>
35 <link href="page-elements.css" type="text/css" rel="stylesheet">
36
37 <!-- Router and visualiser shared features -->
38 <link href="maplayout.css" type="text/css" rel="stylesheet">
39 <!--[if IE 6]>
40 <link href="maplayout-ie6-bugfixes.css" type="text/css" rel="stylesheet">
41 <![endif]-->
42 <!--[if IE 7]>
43 <link href="maplayout-ie7-bugfixes.css" type="text/css" rel="stylesheet">
44 <![endif]-->
45
46 <!-- Visualiser specific features -->
47 <script src="mapprops.js" type="text/javascript"></script>
48 <script src="visualiser.js" type="text/javascript"></script>
49 <link href="visualiser.css" type="text/css" rel="stylesheet">
50
51 </HEAD>
52 <BODY onload="map_init('lat','lon','zoom');">
53
54 <!-- Left hand side of window - data panel -->
55
56 <div class="left_panel">
57
58 <div class="tab_box">
59 <span id="tab_visualiser" onclick="tab_select('visualiser');" class="tab_selected" title="Select data options">Visualiser</span>
60 <span id="tab_router" onclick="tab_select('router');" class="tab_unselected" title="Plan a route">Router</span>
61 <span id="tab_data" onclick="tab_select('data');" class="tab_unselected" title="View database information">Data</span>
62 </div>
63
64 <div class="tab_content" id="tab_visualiser_div">
65
66 <div class="hideshow_box">
67 <span class="hideshow_title">Routino Data Visualiser</span>
68 This web page allows visualisation of the data that Routino uses for routing.
69 Only data relevant for routing is displayed and some will therefore be excluded.
70 <div align="center">
71 <a target="other" href="http://www.routino.org/">Routino Website</a>
72 |
73 <a target="other" href="../documentation/">Documentation</a>
74 </div>
75 </div>
76
77 <div class="hideshow_box">
78 <span class="hideshow_title">Instructions</span>
79 Zoom in and then use the buttons below to download the data. The
80 server will only return data if the selected area is small enough.
81 </div>
82
83 <div class="hideshow_box">
84 <span class="hideshow_title">Status</span>
85 <div id="result_status" style="font-style: italic;">
86 No data displayed
87 </div>
88 </div>
89
90 <div class="hideshow_box">
91 <span id="hideshow_junctions_show" onclick="hideshow_show('junctions');" class="hideshow_show">+</span>
92 <span id="hideshow_junctions_hide" onclick="hideshow_hide('junctions');" class="hideshow_hide">-</span>
93 <input type="button" id="junctions" onclick="displayData('junctions');" value="Display Junctions">
94 <div id="hideshow_junctions_div" style="display: none;">
95 Each node that is a dead-end, a junction of two highways of different
96 types (or different properties) or a junction where more than two segments
97 join are shown colour-coded:
98 <br>
99 <table>
100 <tr><td><img src="icons/ball-1.png" alt="Red" <td>only one highway - a dead-end.
101 <tr><td><img src="icons/ball-2.png" alt="Yellow"<td>two highways of different types meet.
102 <tr><td><img src="icons/ball-3.png" alt="Green" <td>three highways meet.
103 <tr><td><img src="icons/ball-4.png" alt="Brown" <td>four highways meet.
104 <tr><td><img src="icons/ball-5.png" alt="Blue" <td>five highways meet.
105 <tr><td><img src="icons/ball-6.png" alt="Pink" <td>six highways meet.
106 <tr><td><img src="icons/ball-7.png" alt="Black" <td>seven (or more) highways meet.
107 </table>
108 </div>
109 </div>
110
111 <div class="hideshow_box">
112 <span id="hideshow_super_show" onclick="hideshow_show('super');" class="hideshow_show">+</span>
113 <span id="hideshow_super_hide" onclick="hideshow_hide('super');" class="hideshow_hide">-</span>
114 <input type="button" id="super" onclick="displayData('super');" value="Display Super Segments">
115 <div id="hideshow_super_div" style="display: none;">
116 Each super-node and the associated super-segments are shown (see
117 algorithm page for description).
118 </div>
119 </div>
120
121 <div class="hideshow_box">
122 <span id="hideshow_oneway_show" onclick="hideshow_show('oneway');" class="hideshow_show">+</span>
123 <span id="hideshow_oneway_hide" onclick="hideshow_hide('oneway');" class="hideshow_hide">-</span>
124 <input type="button" id="oneway" onclick="displayData('oneway');" value="Display One-way Segments">
125 <div id="hideshow_oneway_div" style="display: none;">
126 Each one-way segment is shown with a coloured triangle indicating the
127 allowed direction. The colours of the triangles depend on the bearing
128 of the highway segment.
129 </div>
130 </div>
131
132 <div class="hideshow_box">
133 <span id="hideshow_turns_show" onclick="hideshow_show('turns');" class="hideshow_show">+</span>
134 <span id="hideshow_turns_hide" onclick="hideshow_hide('turns');" class="hideshow_hide">-</span>
135 <input type="button" id="turns" onclick="displayData('turns');" value="Display Turn Restrictions">
136 <div id="hideshow_turns_div" style="display: none;">
137 Each turn restrictions is shown with a line indicating the disallowed
138 turn.
139 </div>
140 </div>
141
142 <div class="hideshow_box">
143 <span id="hideshow_speed_show" onclick="hideshow_show('speed');" class="hideshow_show">+</span>
144 <span id="hideshow_speed_hide" onclick="hideshow_hide('speed');" class="hideshow_hide">-</span>
145 <input type="button" id="speed" onclick="displayData('speed');" value="Display Speed Limits">
146 <div id="hideshow_speed_div" style="display: none;">
147 Each node that joins segments with different speed limits is shown
148 along with the speed limit on relevant segments.
149 <br>
150 <table>
151 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
152 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified speed limit
153 <tr><td><img src="icons/limit-80.png" alt="(80)" ><td>80 km/hour speed limit
154 </table>
155 </div>
156 </div>
157
158 <div class="hideshow_box">
159 <span id="hideshow_weight_show" onclick="hideshow_show('weight');" class="hideshow_show">+</span>
160 <span id="hideshow_weight_hide" onclick="hideshow_hide('weight');" class="hideshow_hide">-</span>
161 <input type="button" id="weight" onclick="displayData('weight');" value="Display Weight Limits">
162 <div id="hideshow_weight_div" style="display: none;">
163 Each node that joins segments with different weight limits is shown
164 along with the weight limit on relevant segments. For example:
165 <br>
166 <table>
167 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
168 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified weight limit
169 <tr><td><img src="icons/limit-8.0.png" alt="(8.0)" ><td>8.0 tonnes weight limit
170 </table>
171 </div>
172 </div>
173
174 <div class="hideshow_box">
175 <span id="hideshow_height_show" onclick="hideshow_show('height');" class="hideshow_show">+</span>
176 <span id="hideshow_height_hide" onclick="hideshow_hide('height');" class="hideshow_hide">-</span>
177 <input type="button" id="height" onclick="displayData('height');" value="Display Height Limits">
178 <div id="hideshow_height_div" style="display: none;">
179 Each node that joins segments with different height limits is shown
180 along with the height limit on relevant segments. For example:
181 <br>
182 <table>
183 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
184 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified height limit
185 <tr><td><img src="icons/limit-4.0.png" alt="(4.0)" ><td>4.0 m height limit
186 </table>
187 </div>
188 </div>
189
190 <div class="hideshow_box">
191 <span id="hideshow_width_show" onclick="hideshow_show('width');" class="hideshow_show">+</span>
192 <span id="hideshow_width_hide" onclick="hideshow_hide('width');" class="hideshow_hide">-</span>
193 <input type="button" id="width" onclick="displayData('width');" value="Display Width Limits">
194 <div id="hideshow_width_div" style="display: none;">
195 Each node that joins segments with different width limits is shown
196 along with the width limit on relevant segments. For example:
197 <br>
198 <table>
199 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
200 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified width limit
201 <tr><td><img src="icons/limit-3.0.png" alt="(3.0)" ><td>3.0 m width limit
202 </table>
203 </div>
204 </div>
205
206 <div class="hideshow_box">
207 <span id="hideshow_length_show" onclick="hideshow_show('length');" class="hideshow_show">+</span>
208 <span id="hideshow_length_hide" onclick="hideshow_hide('length');" class="hideshow_hide">-</span>
209 <input type="button" id="length" onclick="displayData('length');" value="Display Length Limits">
210 <div id="hideshow_length_div" style="display: none;">
211 Each node that joins segments with different length limits is shown
212 along with the length limit on relevant segments. For example:
213 <br>
214 <table>
215 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
216 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified length limit
217 <tr><td><img src="icons/limit-9.0.png" alt="(9.0)" ><td>9.0 m length limit
218 </table>
219 </div>
220 </div>
221
222 <div class="hideshow_box">
223 <input type="button" id="clear" onclick="displayData('');" value="Clear data">
224 </div>
225
226 <div class="hideshow_box">
227 <span class="hideshow_title">Links</span>
228 <a id="link_url" href="visualiser.html">Permanent link to this view</a>
229 <br>
230 <a id="edit_url" target="other" href="http://www.openstreetmap.org/">Edit OSM data in Potlatch</a>
231 </div>
232 </div>
233
234 <div class="tab_content" id="tab_router_div" style="display: none;">
235 <div class="hideshow_box">
236 <span class="hideshow_title">Router</span>
237 To perform routing on the map use the link below.
238 <br>
239 <a id="router_url" target="other" href="router.html">Custom link to this map view</a>
240 </div>
241 </div>
242
243 <div class="tab_content" id="tab_data_div" style="display: none;">
244 <div class="hideshow_box">
245 <span class="hideshow_title">Statistics</span>
246 <div id="statistics_data"></div>
247 <a id="statistics_link" href="statistics.cgi" onclick="displayStatistics();return(false);">Display data statistics</a>
248 </div>
249 </div>
250
251 </div>
252
253 <!-- Right hand side of window - map -->
254
255 <div class="right_panel">
256 <div class="map" id="map">
257 <noscript>
258 Javascript is <em>required</em> to use this web page because of the
259 interactive map.
260 </noscript>
261 </div>
262 <div class="attribution">
263 <a target="other" href="http://www.routino.org/" title="Routino">Data Manipulation: Routino</a>
264 |
265 <a target="other" href="http://www.openstreetmap.org/" title="Copyright: OpenStreetMap.org; License: Creative Commons Attribution-Share Alike 2.0">Geo Data: OpenStreetMap</a>
266 </div>
267 </div>
268
269 </BODY>
270 </HTML>