Adding Queenstown bus ride + map legend

masks/messages.html

@@ -73,7 +73,7 @@ oSpot.pageInit = function(asHash)
 			{
 				options:
 				{
-					url:'http://spot.lutran.fr/kml/TeAraroaTrail_simplified.kml?v4',
+					url:'https://cloud.lutran.fr/index.php/s/hX9src9948nbqrs/download?v2',
 					opts:{preserveViewport: true}
 				}
 			},
@@ -99,6 +99,19 @@ oSpot.pageInit = function(asHash)
 						if(infowindow) infowindow.close();
 					}
 				}
+			},
+			panel:
+			{
+				options:
+				{
+					content:'<div id="legend">'+
+								'<div class="line green">Te Araroa</div>'+
+								'<div class="line blue">Routeburn Track</div>'+
+								'<div class="line red">Hors rando</div>'+
+							'</div>',
+					bottom: true,
+					left: true
+				}
 			}
 		});
 		self.tmp('map', $Map.gmap3("get"));

style/spot.scss

@@ -11,17 +11,53 @@
 	bottom:0;
 	width:70%;
 	background:#EEE;
-}
-
-#map .loader {
-	position:absolute;
-	font-size:3em;
-	width:1em;
-	height:1em;
-	top:calc(50% - 0.5em);
-	left:calc(50% - 0.5em);
-	color:#666;
-	@extend .flicker;
+	
+	.loader {
+		position:absolute;
+		font-size:3em;
+		width:1em;
+		height:1em;
+		top:calc(50% - 0.5em);
+		left:calc(50% - 0.5em);
+		color:#666;
+		@extend .flicker;
+	}
+	
+	#legend {
+		background:white;
+		font-family:Arial;
+		margin-top:-3em;
+		margin-left:2em;
+		background: rgba(255, 255, 255, 0.5);
+		font-family: Arial;
+		
+		.line {
+			display: inline-block;
+			border-left: 2em solid;
+			line-height: 2px;
+			padding-left: 0.5em;
+			margin: 1em;
+			font-size: 0.8em;
+			
+			&.green {
+				color:#00ff78;
+				border-color: #00ff78;
+			}
+			
+			&.blue {
+				color:#0000ff;
+				border-color: #0000ff;
+			}
+			&.red {
+				color:#FF7814;
+				border-color:#FF7814;
+			}
+			
+			+ .line {
+				margin-top: 1em;
+			}
+		}
+	}
 }
 
 #feed {