/ index.html
index.html
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 5 <meta name="HandheldFriendly" content="true" /> 6 <title>OSM Public Transport Map</title> 7 <link rel="stylesheet" href="lib/leaflet/leaflet.css" /> 8 <link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css"> 9 <link rel="stylesheet" href="lib/sidebar-v2/leaflet-sidebar.min.css" /> 10 <link rel="stylesheet" href="css/style.css"> 11 </head> 12 <body> 13 <div id="sidebar" class="sidebar collapsed"> 14 <!-- Nav tabs --> 15 <div class="sidebar-tabs"> 16 <ul role="tablist"> 17 <li><a href="#query" role="tab"><i class="fa fa-search"></i></a></li> 18 <li id="data_tab" class="disabled"><a href="#data_display" role="tab"><i class="fa fa-bars"></i></a></li> 19 </ul> 20 21 <ul role="tablist"> 22 <li><a href="#info-tab" role="tab"><i class="fa fa-info"></i></a></li> 23 <li><a href="#settings" role="tab"><i class="fa fa-gear"></i></a></li> 24 </ul> 25 </div> 26 27 <!-- Tab panes --> 28 <div class="sidebar-content"> 29 <div class="sidebar-pane" id="query"> 30 <h1 class="sidebar-header"> 31 Query 32 <div class="sidebar-close"><i class="fa fa-caret-left"></i></div> 33 </h1> 34 <form id="dlForm" class="input-table"> 35 <div> 36 <label>Network</label> 37 <input name="network" type="text" autofocus="autofocus" /> 38 </div> 39 <div> 40 <label>Operator</label> 41 <input name="operator" type="text" /> 42 </div> 43 <div> 44 <label>Ref</label> 45 <input name="ref" type="text" /> 46 </div> 47 <div> 48 <label>ID(route_master)</label> 49 <input name="rmid" type="text" /> 50 </div> 51 <div> 52 <label>In map view?</label> 53 <input name="bb" type="checkbox" id="bb-check" /> 54 </div> 55 <div> 56 <input type="submit" /> 57 <input type="reset" /> 58 </div> 59 </form> 60 </div> 61 62 <div class="sidebar-pane" id="data_display"> 63 <h1 class="sidebar-header">Data<div class="sidebar-close"><i class="fa fa-caret-left"></i></div></h1> 64 <div id="data-status"> 65 </div> 66 <select id="routemaster-select" class="hidden"></select> 67 <br /> 68 <button id="routemaster-displayAll">Display all</button> 69 <br /> 70 <span id="routemaster-tags-toggle" class="hidden">route_master tags [+]</span> 71 <div id="routemaster-tags" class="hidden"></div> 72 <div id="routes_list"> 73 <ul> 74 </ul> 75 </div> 76 <span id="route-tags-toggle" class="hidden">route tags [+]</span> 77 <div id="route-tags" class="hidden"></div> 78 <ul id="stops-list"> 79 </ul> 80 </div> 81 82 <div class="sidebar-pane" id="info-tab"> 83 <h1 class="sidebar-header">Informations<div class="sidebar-close"><i class="fa fa-caret-left"></i></div></h1> 84 <h2>OSMTransportViewer (<a href="https://github.com/gileri/OSMTransportViewer" target="_blank">source</a>)</h2> 85 <p> 86 Find and display public transport routes from the OpenStreetMap database. 87 </p> 88 <p> 89 Also doubles as a quality assurance tool for <a href="http://wiki.openstreetmap.org/wiki/Public_transport">public transport data</a>. 90 </p> 91 <h2>Usage</h2> 92 <p> 93 Click on the <i class="fa fa-search"></i> tab, then enter your query to download route masters.<br /> 94 You can then display one direction of a route at a time or all routes directly. 95 </p> 96 </div> 97 98 <div class="sidebar-pane" id="settings"> 99 <h1 class="sidebar-header">Settings<div class="sidebar-close"><i class="fa fa-caret-left"></i></div></h1> 100 <div class="input-table"> 101 <div> 102 <label>Overpass server</label> 103 <input class="otv-settings" id="otv-opapi" list="default-servers" value="//overpass-api.de/api" /> 104 <datalist id="default-servers"> 105 <option value="//overpass-api.de/api"> 106 <option value="http://overpass.osm.rambler.ru/cgi"> 107 <option value="http://api.openstreetmap.fr/oapi"> 108 </datalist> 109 </div> 110 <div> 111 <label>Map tiles</label> 112 <input class="otv-settings" id="otv-tiles" list="tiles" value="osmfr" /> 113 <datalist id="tiles"> 114 <option value="osm"> 115 <option value="osmfr"> 116 </datalist> 117 </div> 118 </div> 119 </div> 120 </div> 121 </div> 122 <div id="map"></div> 123 <script src="lib/jQuery/jquery.min.js"></script> 124 <script src="lib/leaflet/leaflet.js"></script> 125 <script src="lib/sidebar-v2/leaflet-sidebar.min.js"></script> 126 <script src="lib/underscorejs/underscore-min.js"></script> 127 <script src="lib/autolink/autolink.js"></script> 128 <script src="lib/URI/URI.js"></script> 129 <script src="js/config.js"></script> 130 <script src="js/overpass.js"></script> 131 <script src="js/parseOSM.js"></script> 132 <script src="js/transport.js"></script> 133 </body> 134 </html>