git.maemo.org Git - routino/blob - web/www/routino/visualiser.html

   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-2010 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="visualiser.js" type="text/javascript"></script>
  48 <link href="visualiser.css" type="text/css" rel="stylesheet">
  49
  50 </HEAD>
  51 <BODY onload="map_init('lat','lon','zoom');">
  52
  53 <!-- Left hand side of window - data panel -->
  54
  55 <div class="left_panel">
  56
  57   <div class="tab_box">
  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>
  61   </div>
  62
  63   <div class="tab_content" id="tab_visualiser_div">
  64
  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
  69       (e.g. private roads).
  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">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:
  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">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).
 117       </div>
 118     </div>
 119
 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.
 127       </div>
 128     </div>
 129
 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.
 137         <br>
 138         <table>
 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
 142         </table>
 143       </div>
 144     </div>
 145
 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:
 153         <br>
 154         <table>
 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
 158         </table>
 159       </div>
 160     </div>
 161
 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:
 169         <br>
 170         <table>
 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
 174         </table>
 175       </div>
 176     </div>
 177
 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:
 185         <br>
 186         <table>
 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
 190         </table>
 191       </div>
 192     </div>
 193
 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:
 201         <br>
 202         <table>
 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
 206         </table>
 207       </div>
 208     </div>
 209
 210     <div class="hideshow_box">
 211       <input type="button" id="clear" onclick="displayData('');" value="Clear data">
 212     </div>
 213
 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>
 217       <br>
 218       <a id="edit_url" target="other" href="http://www.openstreetmap.org/">Edit OSM data in Potlatch</a>
 219     </div>
 220   </div>
 221
 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.
 226       <br>
 227       <a id="router_url" target="other" href="router.html">Custom link to this map view</a>
 228     </div>
 229   </div>
 230
 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>
 236     </div>
 237   </div>
 238
 239 </div>
 240
 241 <!-- Right hand side of window - map -->
 242
 243 <div class="right_panel">
 244   <div class="map" id="map">
 245     <noscript>
 246       Javascript is <em>required</em> to use this web page because of the
 247       interactive map.
 248     </noscript>
 249   </div>
 250   <div class="attribution">
 251     <a target="other" href="http://www.routino.org/" title="Routino">Data Manipulation: Routino</a>
 252     |
 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>
 254   </div>
 255 </div>
 256
 257 </BODY>
 258 </HTML>