diff options
| author | Daniel Friesel <derf@finalrewind.org> | 2019-11-16 00:01:50 +0100 |
|---|---|---|
| committer | Daniel Friesel <derf@finalrewind.org> | 2019-11-16 00:01:50 +0100 |
| commit | 0bfb71d78d1a7996fe0fb32af063ccfdc6ceea15 (patch) | |
| tree | 32e597a4dbb1a92fe06d704b8738c2cb6beed099 /templates | |
| parent | 35e9dae3499a4234836a2f858797e7b05f5d12c6 (diff) | |
add map view of past journeys. unfinished and unreferenced.
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/layouts/default.html.ep | 6 | ||||
| -rw-r--r-- | templates/map.html.ep | 38 |
2 files changed, 44 insertions, 0 deletions
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep index b6dcdc7..66ab4e7 100644 --- a/templates/layouts/default.html.ep +++ b/templates/layouts/default.html.ep @@ -52,6 +52,9 @@ </script> %= stylesheet "/static/${av}/css/material-icons.css" %= stylesheet "/static/${av}/css/local.css" + % if (stash('with_map')) { + %= stylesheet "/static/${av}/leaflet/leaflet.css" + % } %= javascript "/static/${av}/js/jquery-3.4.1.min.js" %= javascript "/static/${av}/js/materialize.min.js" %= javascript "/static/${av}/js/travelynx-actions.min.js" @@ -61,6 +64,9 @@ % if (stash('with_autocomplete')) { %= javascript "/static/${av}/js/autocomplete.min.js" % } + % if (stash('with_map')) { + %= javascript "/static/${av}/leaflet/leaflet.js" + % } </head> <body> diff --git a/templates/map.html.ep b/templates/map.html.ep new file mode 100644 index 0000000..1930e51 --- /dev/null +++ b/templates/map.html.ep @@ -0,0 +1,38 @@ +<div class="row"> + <div class="col s12"> + <div id="map" style="height: 500px;"> + </div> + </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] %>,<%= $station->[1] %>], +% } +]; + +var routes = [ +% for my $pair ( @{stash('station_pairs') // [] } ) { +[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]], +% } +]; + +for (var station_id in stations) { + L.circle(stations[station_id], { + color: '#f03', + fillColor: '#f03', + fillOpacity: 0.5, + radius: 100 + }).addTo(map); +} + +L.polyline(routes, {color: '#f09', opacity: 0.5}).addTo(map); + +</script> |