summaryrefslogtreecommitdiff
path: root/templates/_map.html.ep
blob: 31223eda66122da7df58d8352852b2a7f6abf784 (plain)
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
<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: #f09;">—</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 markers = [
% for my $marker ( @{stash('marker_coordinates') // [] } ) {
[<%= $marker->[0] %>,<%= $marker->[1] %>],
% }
];

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 blue_routes = [
% for my $pair ( @{stash('blue_routes') // [] } ) {
[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]],
% }
];

for (var station_id in stations) {
	L.circle(stations[station_id][0], {
		color: '#f03',
		fillColor: '#f03',
		fillOpacity: 0.5,
		radius: 250
	}).bindPopup(stations[station_id][1]).addTo(map);
}

for (var marker_id in markers) {
	L.marker(markers[marker_id]).addTo(map);
}

var pl = L.polyline(routes, {color: '#f09', opacity: 0.5}).addTo(map);
L.polyline(blue_routes, {color: '#09f', opacity: 1}).addTo(map);
if (routes.length) {
	map.fitBounds(pl.getBounds());
}

</script>