travelynx/templates/_map.html.ep

<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: '&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 = [];
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());
		}
	% }
% }

% 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>