1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
% if (stash('with_map_header') // 1) {
<div class="row">
<div class="col s12">
<div id="map" style="height: 70vh;">
</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 = [ <%= $line_group->{polylines} %> ];
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 my $marker (@{stash('markers') // []}) {
% if ($marker->[0] and $marker->[0][0] and $marker->[1]) {
{
const marker = L.marker([<%= $marker->[0][0] %>, <%= $marker->[0][1] %>]).addTo(map);
marker.bindPopup('<%= $marker->[1] %>');
}
% }
% }
% 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.2,
radius: 200
}).bindPopup(stations[station_id][1]).addTo(map);
}
</script>
|
