summaryrefslogtreecommitdiff
path: root/templates
diff options
context:
space:
mode:
Diffstat (limited to 'templates')
-rw-r--r--templates/layouts/default.html.ep6
-rw-r--r--templates/map.html.ep38
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: '&copy; <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>