ptmap/index.html at master · plepe/ptmap · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
<html>
<head>
  <meta charset="utf-8">
  <title>PTMap</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css" />
  <link rel="stylesheet" href="node_modules/flatpickr/dist/flatpickr.min.css" />
  <link rel="stylesheet" href="node_modules/leaflet-geosearch/assets/css/leaflet.css" />
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />

  <style>
.leaflet-popup-content {
  max-height: 250px;
  overflow: auto;
}
.leaflet-popup-content pre {
  font-size: 8px;
}
  </style>
  <script src="node_modules/leaflet/dist/leaflet.js"></script>
  <script src="node_modules/leaflet-textpath/leaflet.textpath.js"></script>
  <script src="node_modules/leaflet-polylineoffset/leaflet.polylineoffset.js"></script>
   <script src="node_modules/leaflet.locatecontrol/dist/L.Control.Locate.min.js"></script>
  <script src="dist/ptmap.js"></script>
</head>
<body>
  <div id='map' style='position: absolute; left: 0; top: 0; bottom: 0; right: 0'></div>
  <div id='status'>
    <a href='javascript:showMapKey()'>🛈</a>
    <div id='clock'></div>
    <div id='loadingIndicator'><img src='img/loading.gif'>Loading</div>
  </div>

<!-- Templates, to be rendered by twig.js -->
<script type='text/template' id='mapKeyTemplate'>
<h1>PTMap <span class='version'>version {{ version }}</span></h1>
<p>The PTMap shows public transport routes as they are entered to the OpenStreetMap. As there is no timetable data added to the OpenStreetMap, this information can not be available. Anyhow, the operating hours are respected, so you can play with the date/time to show routes at different days resp. times of day (see below for more information).</p>

<p>Please be patient while data is being loaded - route data is rather complex. As data source the Overpass API at <code>{{ overpass.url}}</code> is used.</p>

<h2>Route Type</h2>
<p>The following route types will be shown on the public transport map. The notch indicates a stop at the route and is shown on the right side of the route (at least when the direction is known):
<ul>
{% for routeType, routeData in routes %}
  <li>
    <svg width='32px' height='8px'>
      <path d='m 1,2.5 30,0' style='stroke: {{ routeData.color }}; stroke-width: 3px; stroke-linecap: round;'/>
      <path d='m 13,5.5 4,0' style='stroke: {{ routeData.color }}; stroke-width: 5px; stroke-linecap: butt; '/>
    </svg>
    <span>Route: {{ routeType }}</span></li>
{% endfor %}
</ul>
<p>

<h2>Scale of a Route</h2>
<p>Dependent on the scale of a route, different renderings are used (or a route is not shown at all). As there's no such thing as a scale in the route's data, an approximate stop distance is used as indicator, which calculates from the pixel length of the diagonal of the route's bounding box at the current zoom level divided by the count of stops. The following renderings will be used:
<ul>
  <li>
    <svg width='32px' height='8px'>
      <path d='m 1,2.5 30,0' style='stroke: {{ routes.bus.color }}; stroke-width: 1px; stroke-linecap: round;'/>
      <path d='m 14,3.5 2,0' style='stroke: {{ routes.bus.color }}; stroke-width: 2px; stroke-linecap: butt; '/>
    </svg>
    small scale route (stop distance 20px to 70px)
  </li>

  <li>
    <svg width='32px' height='8px'>
      <path d='m 1,2.5 30,0' style='stroke: {{ routes.bus.color }}; stroke-width: 3px; stroke-linecap: round;'/>
      <path d='m 13,5.5 4,0' style='stroke: {{ routes.bus.color }}; stroke-width: 5px; stroke-linecap: butt; '/>
    </svg>
    optimum scale route (stop distance 70px to 1000px)
  </li>

  <li>
    <svg width='32px' height='8px'>
      <path d='m 1,2.5 30,0' style='stroke: {{ routes.bus.color }}; stroke-width: 3px; stroke-linecap: round; stroke-dasharray: 1,7;'/>
      <path d='m 11,5.5 8,0' style='stroke: {{ routes.bus.color }}; stroke-width: 7px; stroke-linecap: butt; '/>
    </svg>
    large scale route (stop distance from 1000px)
  </li>
</ul>

<h2>Stops, Stop Areas</h2>
<p>Stops with the same name will be collected into a "Stop Area", which is surrounded by a black border and labeled by the name. Dependant on the scale of routes stopping at the Stop Area, different borders are used.</p>

<h2>OpenStreetMap tagging information</h2>
<p>Currently only the tagging scheme v2 is supported, as described <a target='_blank' href='http://wiki.openstreetmap.org/wiki/Proposed_features/Public_Transport'>here</a>.</p>

<h3>Route relation</h3>
<p>Routes must have <code>type=route</code>, <code>route=*</code>. The following tags are regared: <code>from</code>, <code>to</code>, <code>name</code>, <code>ref</code>, <code>opening_hours</code>.</p>

<p><code>platform</code> members are currently not supported.</p>

<p>The operating hours of a route are read from the <a target='_blank' href='http://wiki.openstreetmap.org/wiki/Key:opening_hours'><code>opening_hours</code></a> tag. If no such information is available, the following value is assumed: <code>{{ default_tags.opening_hours }}</code>.</p>

<h3>Route master</h3>
<p>Currently not supported, but planned.</p>

<h3>Stop Area relation</h3>
<p>Currently stops are grouped only by the same name, the stop area relation is not supported yet.</p>

<h3>Stops</h3>
<p>Stops are only loaded via the route's membership. The following tags are regarded: <code>name</code>.</p>
<p>Route members with the role <code>stop_exit_only</code> and <code>stop_entry_only</code> are not supported yet.</p>

<h2>Contributing</h2>
This application is developed by <a href='http://plepe.at'>Stephan Bösch-Plepelits</a>. You are very welcome to post bug reports, ideas and pull requests to the <a href='http://github.com/plepe/ptmap'>Github repository</a>.
</script>
</body>
</html>