diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/_train_details.html.ep | 5 | ||||
| -rw-r--r-- | templates/layouts/app.html.ep | 4 | ||||
| -rw-r--r-- | templates/route_map.html.ep | 54 |
3 files changed, 63 insertions, 0 deletions
diff --git a/templates/_train_details.html.ep b/templates/_train_details.html.ep index 44cf01d..444fe9a 100644 --- a/templates/_train_details.html.ep +++ b/templates/_train_details.html.ep @@ -78,6 +78,11 @@ <a href="/_wr/<%= $departure->{train_no} %>/<%= $departure->{wr_link} %>">Wagenreihung</a> </div> % } +% if ($departure->{trip_id}) { + <div class="verbose"> + <a href="/map/<%= $departure->{trip_id} %>/<%= $departure->{train_line} // 0 %>">Karte</a> + </div> +% } % } % if ($departure->{moreinfo} and @{$departure->{moreinfo}}) { diff --git a/templates/layouts/app.html.ep b/templates/layouts/app.html.ep index bba3c32..2a596c0 100644 --- a/templates/layouts/app.html.ep +++ b/templates/layouts/app.html.ep @@ -28,6 +28,10 @@ % if (stash('with_geolocation')) { %= javascript "/static/${av}/js/geolocation.min.js", defer => undef % } + % if (stash('with_map')) { + %= stylesheet "/static/${av}/leaflet/leaflet.css" + %= javascript "/static/${av}/leaflet/leaflet.js" + % } </head> <body style="<%= (param('dark') ? 'background-color: #000000; color: #ffffff;' : q{}) %>"> diff --git a/templates/route_map.html.ep b/templates/route_map.html.ep new file mode 100644 index 0000000..505cddb --- /dev/null +++ b/templates/route_map.html.ep @@ -0,0 +1,54 @@ +% if (0) { + <div class="container"> + <div class="error"> + <strong>Fehler!</strong> + Baz + </div> + </div> +% } +% else { + <div class="container"> + <div id="map" style="height: 500px;"> + </div> + </div> + +<script> +var map = L.map('map').setView([51.306, 9.712], 6); + +L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' +}).addTo(map); +var stations = [ +% for my $station ( @{stash('station_coordinates') // [] } ) { +[[<%= $station->[0][0] %>,<%= $station->[0][1] %>],'<%= $station->[1] %>'], +% } +]; + +var routes = []; +var pl; +% for my $line_group ( @{ stash('polyline_groups') // [] } ) { + routes = [ + % for my $pair ( @{$line_group->{polylines} // []} ) { + [[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]], + % } + ]; + pl = L.polyline(routes, {color: '<%= $line_group->{color} %>', opacity: <%= $line_group->{opacity} %>}).addTo(map); + % if ($line_group->{fit_bounds}) { + if (routes.length) { + map.fitBounds(pl.getBounds()); + } + % } +% } + +for (var station_id in stations) { + L.circle(stations[station_id][0], { + color: '#f03', + opacity: 0.7, + fillColor: '#f03', + fillOpacity: 0.5, + radius: 250 + }).bindPopup(stations[station_id][1]).addTo(map); +} + +</script> +% } |