travelynx/templates/_map.html.ep
2019-12-29 15:39:21 +01:00

49 lines
1.2 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> Luftlinie zwischen Unterwegshalten
</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: '&copy; <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 = [
% for my $pair ( @{stash('station_pairs') // [] } ) {
[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]],
% }
];
var pl = L.polyline(routes, {color: '#673ab7', opacity: 0.6}).addTo(map);
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>