1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
5 Routino data visualiser web page.
7 Part of the Routino routing software.
9 This file Copyright 2008-2010 Andrew M. Bishop
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.
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.
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/.
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">
30 <!-- OpenLayers Javascript library -->
31 <script src="../openlayers/OpenLayers.js" type="text/javascript"></script>
33 <!-- Page elements -->
34 <script src="page-elements.js" type="text/javascript"></script>
35 <link href="page-elements.css" type="text/css" rel="stylesheet">
37 <!-- Router and visualiser shared features -->
38 <link href="maplayout.css" type="text/css" rel="stylesheet">
40 <link href="maplayout-ie6-bugfixes.css" type="text/css" rel="stylesheet">
43 <link href="maplayout-ie7-bugfixes.css" type="text/css" rel="stylesheet">
46 <!-- Visualiser specific features -->
47 <script src="visualiser.js" type="text/javascript"></script>
48 <link href="visualiser.css" type="text/css" rel="stylesheet">
51 <BODY onload="map_init('lat','lon','zoom');">
53 <!-- Left hand side of window - data panel -->
55 <div class="left_panel">
58 <span id="tab_visualiser" onclick="tab_select('visualiser');" class="tab_selected" title="Select data options">Visualiser</span>
59 <span id="tab_router" onclick="tab_select('router');" class="tab_unselected" title="Plan a route">Router</span>
60 <span id="tab_data" onclick="tab_select('data');" class="tab_unselected" title="View database information">Data</span>
63 <div class="tab_content" id="tab_visualiser_div">
65 <div class="hideshow_box">
66 <span class="hideshow_title">Routino Data Visualiser</span>
67 This web page allows visualisation of the data that Routino uses for routing.
68 Only data relevant for routing is displayed and some will therefore be excluded
71 <a target="other" href="http://www.routino.org/">Routino Website</a>
73 <a target="other" href="../documentation/">Documentation</a>
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.
83 <div class="hideshow_box">
84 <span class="hideshow_title">Status</span>
85 <div id="result_status" style="font-style: italic;">
90 <div class="hideshow_box">
91 <span id="hideshow_junctions_show" onclick="hideshow_show('junctions');" class="hideshow_show">Show</span>
92 <span id="hideshow_junctions_hide" onclick="hideshow_hide('junctions');" class="hideshow_hide">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:
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.
111 <div class="hideshow_box">
112 <span id="hideshow_super_show" onclick="hideshow_show('super');" class="hideshow_show">Show</span>
113 <span id="hideshow_super_hide" onclick="hideshow_hide('super');" class="hideshow_hide">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 algorithm page for description).
120 <div class="hideshow_box">
121 <span id="hideshow_oneway_show" onclick="hideshow_show('oneway');" class="hideshow_show">Show</span>
122 <span id="hideshow_oneway_hide" onclick="hideshow_hide('oneway');" class="hideshow_hide">Hide</span>
123 <input type="button" id="oneway" onclick="displayData('oneway');" value="Display One-way Segments">
124 <div id="hideshow_oneway_div" style="display: none;">
125 Each one-way segment is shown with a coloured triangle indicating the allowed direction.
126 The colours of the triangles depend on the bearing of the highway segment.
130 <div class="hideshow_box">
131 <span id="hideshow_speed_show" onclick="hideshow_show('speed');" class="hideshow_show">Show</span>
132 <span id="hideshow_speed_hide" onclick="hideshow_hide('speed');" class="hideshow_hide">Hide</span>
133 <input type="button" id="speed" onclick="displayData('speed');" value="Display Speed Limits">
134 <div id="hideshow_speed_div" style="display: none;">
135 Each node that joins segments with different speed limits is shown
136 along with the speed limit on relevant segments.
139 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
140 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified speed limit
141 <tr><td><img src="icons/limit-80.png" alt="(80)" ><td>80 km/hour speed limit
146 <div class="hideshow_box">
147 <span id="hideshow_weight_show" onclick="hideshow_show('weight');" class="hideshow_show">Show</span>
148 <span id="hideshow_weight_hide" onclick="hideshow_hide('weight');" class="hideshow_hide">Hide</span>
149 <input type="button" id="weight" onclick="displayData('weight');" value="Display Weight Limits">
150 <div id="hideshow_weight_div" style="display: none;">
151 Each node that joins segments with different weight limits is shown
152 along with the weight limit on relevant segments. For example:
155 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
156 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified weight limit
157 <tr><td><img src="icons/limit-8.0.png" alt="(8.0)" ><td>8.0 tonnes weight limit
162 <div class="hideshow_box">
163 <span id="hideshow_height_show" onclick="hideshow_show('height');" class="hideshow_show">Show</span>
164 <span id="hideshow_height_hide" onclick="hideshow_hide('height');" class="hideshow_hide">Hide</span>
165 <input type="button" id="height" onclick="displayData('height');" value="Display Height Limits">
166 <div id="hideshow_height_div" style="display: none;">
167 Each node that joins segments with different height limits is shown
168 along with the height limit on relevant segments. For example:
171 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
172 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified height limit
173 <tr><td><img src="icons/limit-4.0.png" alt="(4.0)" ><td>4.0 m height limit
178 <div class="hideshow_box">
179 <span id="hideshow_width_show" onclick="hideshow_show('width');" class="hideshow_show">Show</span>
180 <span id="hideshow_width_hide" onclick="hideshow_hide('width');" class="hideshow_hide">Hide</span>
181 <input type="button" id="width" onclick="displayData('width');" value="Display Width Limits">
182 <div id="hideshow_width_div" style="display: none;">
183 Each node that joins segments with different width limits is shown
184 along with the width limit on relevant segments. For example:
187 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
188 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified width limit
189 <tr><td><img src="icons/limit-3.0.png" alt="(3.0)" ><td>3.0 m width limit
194 <div class="hideshow_box">
195 <span id="hideshow_length_show" onclick="hideshow_show('length');" class="hideshow_show">Show</span>
196 <span id="hideshow_length_hide" onclick="hideshow_hide('length');" class="hideshow_hide">Hide</span>
197 <input type="button" id="length" onclick="displayData('length');" value="Display Length Limits">
198 <div id="hideshow_length_div" style="display: none;">
199 Each node that joins segments with different length limits is shown
200 along with the length limit on relevant segments. For example:
203 <tr><td><img src="icons/ball-1.png" alt="Red dot"><td>Change of limit
204 <tr><td><img src="icons/limit-no.png" alt="(no)" ><td>No specified length limit
205 <tr><td><img src="icons/limit-9.0.png" alt="(9.0)" ><td>9.0 m length limit
210 <div class="hideshow_box">
211 <input type="button" id="clear" onclick="displayData('');" value="Clear data">
214 <div class="hideshow_box">
215 <span class="hideshow_title">Links</span>
216 <a id="link_url" href="visualiser.html">Permanent link to this view</a>
218 <a id="edit_url" target="other" href="http://www.openstreetmap.org/">Edit OSM data in Potlatch</a>
222 <div class="tab_content" id="tab_router_div" style="display: none;">
223 <div class="hideshow_box">
224 <span class="hideshow_title">Router</span>
225 To perform routing on the map use the link below.
227 <a id="router_url" target="other" href="router.html">Custom link to this map view</a>
231 <div class="tab_content" id="tab_data_div" style="display: none;">
232 <div class="hideshow_box">
233 <span class="hideshow_title">Statistics</span>
234 <div id="statistics_data"></div>
235 <a id="statistics_link" href="statistics.cgi" onclick="displayStatistics();return(false);">Display data statistics</a>
241 <!-- Right hand side of window - map -->
243 <div class="right_panel">
244 <div class="map" id="map">
246 Javascript is <em>required</em> to use this web page because of the
250 <div class="attribution">
251 <a target="other" href="http://www.routino.org/" title="Routino">Data Manipulation: Routino</a>
253 <a target="other" href="http://www.openstreetmap.org/" title="Copyright: OpenStreetMap.org; License: Creative Commons Attribution-Share Alike 2.0">Geo Data: OpenStreetMap</a>