map: support multiple polyline groups with different colors

lib/Travelynx/Controller/Traveling.pm

@@ -446,7 +446,7 @@ sub map_history {
 			template            => 'history_map',
 			with_map            => 1,
 			station_coordinates => [],
-			station_pairs       => [],
+			polyline_groups     => [],
 		);
 		return;
 	}
@@ -528,7 +528,14 @@ sub map_history {
 		template            => 'history_map',
 		with_map            => 1,
 		station_coordinates => \@station_coordinates,
-		station_pairs       => \@station_pairs,
+		polyline_groups     => [
+			{
+				polylines  => \@station_pairs,
+				color      => '#673ab7',
+				opacity    => 0.6,
+				fit_bounds => 1,
+			}
+		]
 	);
 }
 

templates/_map.html.ep

@@ -25,16 +25,21 @@ var stations = [
 % }
 ];
 
-var routes = [
+var routes = [];
-% for my $pair ( @{stash('station_pairs') // [] } ) {
+var pl;
-[[<%= $pair->[0][0] %>,<%= $pair->[0][1] %>],[<%= $pair->[1][0] %>,<%= $pair->[1][1] %>]],
+% 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], {

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