diff options
Diffstat (limited to 'templates/route_map.html.ep')
| -rw-r--r-- | templates/route_map.html.ep | 98 |
1 files changed, 98 insertions, 0 deletions
diff --git a/templates/route_map.html.ep b/templates/route_map.html.ep new file mode 100644 index 0000000..e1c4642 --- /dev/null +++ b/templates/route_map.html.ep @@ -0,0 +1,98 @@ +% if (stash('origin') and stash('destination')) { + %= include '_map_infobox' +% } + +<div class="container"> + <div id="map" style="height: 70vh;"> + </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] %>],['<%== join("','", map { Mojo::Util::xml_escape($_) } @{$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: <%= stash('station_radius') || 250 %> + }).bindPopup(stations[station_id][1].join('<br/>')).addTo(map); +} + +var greenIcon = new L.Icon({ + iconUrl: '/static/leaflet/images/marker-icon-2x-green.png', + shadowUrl: '/static/leaflet/images/marker-shadow.png', + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41] +}); + +var goldIcon = new L.Icon({ + iconUrl: '/static/leaflet/images/marker-icon-2x-gold.png', + shadowUrl: '/static/leaflet/images/marker-shadow.png', + iconSize: [25, 41], + iconAnchor: [12, 41], + popupAnchor: [1, -34], + shadowSize: [41, 41] +}); + +var marker; +% for my $marker (@{stash('markers') // [] } ) { + % if ($marker->{icon}) { + marker = L.marker([<%= $marker->{lat} %>,<%= $marker->{lon} %>], {icon: <%= $marker->{icon} %>}).addTo(map); + % } + % else { + marker = L.marker([<%= $marker->{lat} %>,<%= $marker->{lon} %>]).addTo(map); + % } + % if ($marker->{title}) { + marker.bindPopup('<%= $marker->{title} %>'); + % } +% } + +</script> + +<div class="container" style="margin-top: 1ex; margin-bottom: 1ex; color: #555;"> +<p> +Die eingezeichnete Route stammt aus dem angefragten Backend und stimmt nicht +notwendigerweise mit der Realität überein. +Die Fahrzeugposition auf der Karte ist eine DBF-eigene Schätzung und kann +erheblich von den tatsächlichen Gegebenheiten abweichen. +% if (stash('intersection')) { +<br/>In dieser Ansicht sind Live-Updates der Zug- und Begegnungspositionen noch +nicht implementiert. +% } +</p> +</div> + +% if (my $op = stash('operator')) { +<div class="container" style="margin-top: 1ex; margin-bottom: 1ex; color: #555;"> +<p>Betrieb: <%= $op %></p> +</div> +% } |