map: support multiple polyline groups with different colors

2 files changed, 15 insertions, 10 deletions

diff --git a/templates/_map.html.ep b/templates/_map.html.ep
index 16718fb..119e29f 100644
--- a/templates/_map.html.ep
+++ b/templates/_map.html.ep
@@ -25,16 +25,21 @@ var stations = [
 % }
 ];
 
-var routes = [
-% for my $pair ( @{stash('station_pairs') // [] } ) {
-[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]],
+var routes = [];
+var pl;
+% for my $line_group ( @{ stash('polyline_groups') // [] } ) {
+	routes = [
+		% for my $pair ( @{$line_group->{polylines} // []} ) {
+			[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]],
+		% }
+	];
+	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());
+		}
+	% }
 % }
-];
-
-var pl = L.polyline(routes, {color: '#673ab7', opacity: 0.6}).addTo(map);
-if (routes.length) {
-	map.fitBounds(pl.getBounds());
-}
 
 for (var station_id in stations) {
 	L.circle(stations[station_id][0], {
diff --git a/templates/history_map.html.ep b/templates/history_map.html.ep
index 7bda06b..747912f 100644
--- a/templates/history_map.html.ep
+++ b/templates/history_map.html.ep
@@ -9,7 +9,7 @@
 	</div>
 </div>
 
-%= include '_map', station_coordinates => $station_coordinates, station_pairs => $station_pairs
+%= include '_map', station_coordinates => $station_coordinates, polyline_groups => $polyline_groups
 
 %= form_for '/history/map' => (method => 'POST') => begin
 	%= csrf_field