<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 = [ <%= $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>