58 lines
1.5 KiB
Text
58 lines
1.5 KiB
Text
<div class="row">
|
|
<div class="col s12">
|
|
<div id="map" style="height: 500px;">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col s12">
|
|
<span style="color: #f03;">●</span> Ein-/Ausstiegsstation<br/>
|
|
<span style="color: #673ab7;">—</span> Streckenverlauf oder Luftlinie
|
|
</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());
|
|
}
|
|
% }
|
|
% }
|
|
|
|
% if (my $b = stash('bounds')) {
|
|
map.fitBounds([[<%= $b->[0][0] %>,<%= $b->[0][1] %>],[<%= $b->[1][0] %>,<%= $b->[1][1] %>]]);
|
|
% }
|
|
|
|
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>
|