Routino SVN Repository Browser

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

ViewVC logotype

Annotation of /trunk/web/www/routino/visualiser.html.en

Parent Directory Parent Directory | Revision Log Revision Log


Revision 937 - (hide annotations) (download)
Thu Dec 8 19:39:27 2011 UTC (13 years, 3 months ago) by amb
File size: 13348 byte(s)
Rename visualiser.html to visualiser.html.en.

1 amb 569 <!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 amb 623 This file Copyright 2008-2011 Andrew M. Bishop
10 amb 569
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 amb 584 <TITLE>Routino : Data Visualiser for Routino OpenStreetMap Data</TITLE>
27 amb 569 <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 amb 577 <!-- 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 amb 569 <!-- Visualiser specific features -->
47 amb 933 <script src="mapprops.js" type="text/javascript"></script>
48 amb 569 <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 amb 577 <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 amb 569
64 amb 577 <div class="tab_content" id="tab_visualiser_div">
65 amb 569
66 amb 577 <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 amb 623 Only data relevant for routing is displayed and some will therefore be excluded.
70 amb 577 <div align="center">
71 amb 584 <a target="other" href="http://www.routino.org/">Routino Website</a>
72 amb 577 |
73 amb 584 <a target="other" href="../documentation/">Documentation</a>
74 amb 569 </div>
75 amb 577 </div>
76 amb 569
77 amb 577 <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 amb 569
83 amb 577 <div class="hideshow_box">
84     <span class="hideshow_title">Status</span>
85 amb 936 <div id="result_status">
86     <div id="result_status_no_data">
87     <b><i>No data displayed</i></b>
88     </div>
89     <div id="result_status_data" style="display: none;">
90     </div>
91     <div id="result_status_error" style="display: none;">
92     <b>Failed to get visualiser data!</b>
93     </div>
94     <div id="result_status_junctions" style="display: none;">
95     <b>Processed # junctions</b>
96     </div>
97     <div id="result_status_super" style="display: none;">
98     <b>Processed # super-nodes/segments</b>
99     </div>
100     <div id="result_status_oneway" style="display: none;">
101     <b>Processed # oneway segments</b>
102     </div>
103     <div id="result_status_turns" style="display: none;">
104     <b>Processed # turn restrictions</b>
105     </div>
106     <div id="result_status_limit" style="display: none;">
107     <b>Processed # limits</b>
108     </div>
109 amb 569 </div>
110 amb 577 </div>
111 amb 569
112 amb 577 <div class="hideshow_box">
113 amb 932 <span id="hideshow_junctions_show" onclick="hideshow_show('junctions');" class="hideshow_show">+</span>
114     <span id="hideshow_junctions_hide" onclick="hideshow_hide('junctions');" class="hideshow_hide">-</span>
115 amb 577 <input type="button" id="junctions" onclick="displayData('junctions');" value="Display Junctions">
116     <div id="hideshow_junctions_div" style="display: none;">
117     Each node that is a dead-end, a junction of two highways of different
118     types (or different properties) or a junction where more than two segments
119     join are shown colour-coded:
120     <br>
121     <table>
122 amb 936 <tr><td><img src="icons/ball-1.png" alt="Red" ><td>only one highway - a dead-end.
123     <tr><td><img src="icons/ball-2.png" alt="Yellow"><td>two highways of different types meet.
124     <tr><td><img src="icons/ball-3.png" alt="Green" ><td>three highways meet.
125     <tr><td><img src="icons/ball-4.png" alt="Brown" ><td>four highways meet.
126     <tr><td><img src="icons/ball-5.png" alt="Blue" ><td>five highways meet.
127     <tr><td><img src="icons/ball-6.png" alt="Pink" ><td>six highways meet.
128     <tr><td><img src="icons/ball-7.png" alt="Black" ><td>seven (or more) highways meet.
129 amb 577 </table>
130 amb 569 </div>
131 amb 577 </div>
132 amb 569
133 amb 577 <div class="hideshow_box">
134 amb 932 <span id="hideshow_super_show" onclick="hideshow_show('super');" class="hideshow_show">+</span>
135     <span id="hideshow_super_hide" onclick="hideshow_hide('super');" class="hideshow_hide">-</span>
136 amb 577 <input type="button" id="super" onclick="displayData('super');" value="Display Super Segments">
137     <div id="hideshow_super_div" style="display: none;">
138 amb 623 Each super-node and the associated super-segments are shown (see
139     algorithm page for description).
140 amb 569 </div>
141 amb 577 </div>
142 amb 569
143 amb 577 <div class="hideshow_box">
144 amb 932 <span id="hideshow_oneway_show" onclick="hideshow_show('oneway');" class="hideshow_show">+</span>
145     <span id="hideshow_oneway_hide" onclick="hideshow_hide('oneway');" class="hideshow_hide">-</span>
146 amb 577 <input type="button" id="oneway" onclick="displayData('oneway');" value="Display One-way Segments">
147     <div id="hideshow_oneway_div" style="display: none;">
148 amb 623 Each one-way segment is shown with a coloured triangle indicating the
149     allowed direction. The colours of the triangles depend on the bearing
150     of the highway segment.
151 amb 569 </div>
152 amb 577 </div>
153 amb 569
154 amb 577 <div class="hideshow_box">
155 amb 932 <span id="hideshow_turns_show" onclick="hideshow_show('turns');" class="hideshow_show">+</span>
156     <span id="hideshow_turns_hide" onclick="hideshow_hide('turns');" class="hideshow_hide">-</span>
157 amb 623 <input type="button" id="turns" onclick="displayData('turns');" value="Display Turn Restrictions">
158     <div id="hideshow_turns_div" style="display: none;">
159     Each turn restrictions is shown with a line indicating the disallowed
160     turn.
161     </div>
162     </div>
163    
164     <div class="hideshow_box">
165 amb 932 <span id="hideshow_speed_show" onclick="hideshow_show('speed');" class="hideshow_show">+</span>
166     <span id="hideshow_speed_hide" onclick="hideshow_hide('speed');" class="hideshow_hide">-</span>
167 amb 577 <input type="button" id="speed" onclick="displayData('speed');" value="Display Speed Limits">
168     <div id="hideshow_speed_div" style="display: none;">
169     Each node that joins segments with different speed limits is shown
170     along with the speed limit on relevant segments.
171     <br>
172     <table>
173     <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
174     <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified speed limit
175     <tr><td><img src="icons/limit-80.png" alt="(80)" ><td>80 km/hour speed limit
176     </table>
177 amb 569 </div>
178 amb 577 </div>
179 amb 569
180 amb 577 <div class="hideshow_box">
181 amb 932 <span id="hideshow_weight_show" onclick="hideshow_show('weight');" class="hideshow_show">+</span>
182     <span id="hideshow_weight_hide" onclick="hideshow_hide('weight');" class="hideshow_hide">-</span>
183 amb 577 <input type="button" id="weight" onclick="displayData('weight');" value="Display Weight Limits">
184     <div id="hideshow_weight_div" style="display: none;">
185     Each node that joins segments with different weight limits is shown
186     along with the weight limit on relevant segments. For example:
187     <br>
188     <table>
189     <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
190     <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified weight limit
191     <tr><td><img src="icons/limit-8.0.png" alt="(8.0)" ><td>8.0 tonnes weight limit
192     </table>
193 amb 569 </div>
194 amb 577 </div>
195 amb 569
196 amb 577 <div class="hideshow_box">
197 amb 932 <span id="hideshow_height_show" onclick="hideshow_show('height');" class="hideshow_show">+</span>
198     <span id="hideshow_height_hide" onclick="hideshow_hide('height');" class="hideshow_hide">-</span>
199 amb 577 <input type="button" id="height" onclick="displayData('height');" value="Display Height Limits">
200     <div id="hideshow_height_div" style="display: none;">
201     Each node that joins segments with different height limits is shown
202     along with the height limit on relevant segments. For example:
203     <br>
204     <table>
205     <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
206     <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified height limit
207     <tr><td><img src="icons/limit-4.0.png" alt="(4.0)" ><td>4.0 m height limit
208     </table>
209 amb 569 </div>
210 amb 577 </div>
211 amb 569
212 amb 577 <div class="hideshow_box">
213 amb 932 <span id="hideshow_width_show" onclick="hideshow_show('width');" class="hideshow_show">+</span>
214     <span id="hideshow_width_hide" onclick="hideshow_hide('width');" class="hideshow_hide">-</span>
215 amb 577 <input type="button" id="width" onclick="displayData('width');" value="Display Width Limits">
216     <div id="hideshow_width_div" style="display: none;">
217     Each node that joins segments with different width limits is shown
218     along with the width limit on relevant segments. For example:
219     <br>
220     <table>
221     <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
222     <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified width limit
223     <tr><td><img src="icons/limit-3.0.png" alt="(3.0)" ><td>3.0 m width limit
224     </table>
225 amb 569 </div>
226 amb 577 </div>
227 amb 569
228 amb 577 <div class="hideshow_box">
229 amb 932 <span id="hideshow_length_show" onclick="hideshow_show('length');" class="hideshow_show">+</span>
230     <span id="hideshow_length_hide" onclick="hideshow_hide('length');" class="hideshow_hide">-</span>
231 amb 577 <input type="button" id="length" onclick="displayData('length');" value="Display Length Limits">
232     <div id="hideshow_length_div" style="display: none;">
233     Each node that joins segments with different length limits is shown
234     along with the length limit on relevant segments. For example:
235     <br>
236     <table>
237     <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
238     <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified length limit
239     <tr><td><img src="icons/limit-9.0.png" alt="(9.0)" ><td>9.0 m length limit
240     </table>
241 amb 569 </div>
242 amb 577 </div>
243 amb 569
244 amb 577 <div class="hideshow_box">
245     <input type="button" id="clear" onclick="displayData('');" value="Clear data">
246     </div>
247 amb 569
248 amb 577 <div class="hideshow_box">
249     <span class="hideshow_title">Links</span>
250     <a id="link_url" href="visualiser.html">Permanent link to this view</a>
251     <br>
252     <a id="edit_url" target="other" href="http://www.openstreetmap.org/">Edit OSM data in Potlatch</a>
253     </div>
254     </div>
255 amb 569
256 amb 577 <div class="tab_content" id="tab_router_div" style="display: none;">
257     <div class="hideshow_box">
258     <span class="hideshow_title">Router</span>
259     To perform routing on the map use the link below.
260     <br>
261     <a id="router_url" target="other" href="router.html">Custom link to this map view</a>
262     </div>
263     </div>
264 amb 569
265 amb 577 <div class="tab_content" id="tab_data_div" style="display: none;">
266     <div class="hideshow_box">
267     <span class="hideshow_title">Statistics</span>
268     <div id="statistics_data"></div>
269     <a id="statistics_link" href="statistics.cgi" onclick="displayStatistics();return(false);">Display data statistics</a>
270     </div>
271     </div>
272    
273 amb 569 </div>
274    
275     <!-- Right hand side of window - map -->
276    
277     <div class="right_panel">
278 amb 577 <div class="map" id="map">
279     <noscript>
280     Javascript is <em>required</em> to use this web page because of the
281     interactive map.
282     </noscript>
283     </div>
284     <div class="attribution">
285 amb 584 <a target="other" href="http://www.routino.org/" title="Routino">Data Manipulation: Routino</a>
286 amb 577 |
287     <a target="other" href="http://www.openstreetmap.org/" title="Copyright: OpenStreetMap.org; License: Creative Commons Attribution-Share Alike 2.0">Geo Data: OpenStreetMap</a>
288     </div>
289 amb 569 </div>
290    
291     </BODY>
292     </HTML>