% 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;"> Die eingezeichnete Route stammt aus dem HAFAS und ist im Detail oft fehlerbehaftet.<br/> Die Zugposition 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. % } </div> % if (my $op = stash('operator')) { <div class="container" style="margin-top: 1ex; margin-bottom: 1ex; color: #555;"> Betrieb: <%= $op %> </div> % }