adding track names

inc/spot.php

@@ -94,7 +94,8 @@ class Spot extends Main
 					'mapbox_key'=> Settings::MAPBOX_KEY
 				)
 			),
-			'index'
+			'index',
+			array('css_timestamp'=>$this->addTimestampToFilePath('style/spot.css'))
 		);
 	}
 	

masks/index.html

@@ -4,7 +4,7 @@
 	<meta http-equiv="content-type" content="text/html; charset=utf-8">
 	<link type="image/x-icon" href="images/favicon.ico" rel="shortcut icon" />
 	<link type="image/png" href="images/favicon.png" rel="icon" sizes="32x32" />
-	<link type="text/css" href="style/spot.css" rel="stylesheet" media="all" />
+	<link type="text/css" href="[#]css_timestamp[#]" rel="stylesheet" media="all" />
 	<script type="text/javascript" src="script/leaflet.js"></script>
 	<script type="text/javascript" src="script/jquery.min.js"></script>
 	<script type="text/javascript" src="script/jquery.mods.js"></script>

masks/messages.html

@@ -22,7 +22,6 @@ oSpot.pageInit = function(asHash)
 	/* TODO
 	- keep tooltip open so pictures can be clicked on (use popup?)
 	- apply 30 % offset to all re-centering
-	- Track Names
 	*/
 	
 	self.tmp('$Map', $('#map'));
@@ -99,26 +98,6 @@ oSpot.pageInit = function(asHash)
 			layers: [oMapBoxSat],
 			attributionControl: false,
 			zoomControl: false
-			/*mapTypeId: google.maps.MapTypeId.SATELLITE,
-			
-			scaleControl: true,
-			scaleControlOptions: {
-				position: google.maps.ControlPosition.TOP_LEFT
-			},
-			mapTypeControl: true,
-			mapTypeControlOptions: {
-				style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
-				position: google.maps.ControlPosition.TOP_LEFT
-			},
-			zoomControl: true,
-			zoomControlOptions: {
-				position: google.maps.ControlPosition.LEFT_TOP
-			},
-			fullscreenControl: true,
-			fullscreenControlOptions: {
-				position: google.maps.ControlPosition.LEFT_BOTTOM
-			},
-			streetViewControl: false*/
 		});
 		
 		//Swap tile layers on zoom level
@@ -141,11 +120,22 @@ oSpot.pageInit = function(asHash)
 					var $Legend = $(oLegend);
 					asColors[$Legend.attr('class').replace('line', '').trim()] = $Legend.css('border-top-color');
 				});
-				
+
-				//Assign track color
+				//Assign track color & tooltip
 				L.geoJson(aoTracks, {
-				    style: function(oTrack) {return {color: asColors[oTrack.properties.type]};}
+				    	style: function(oTrack) {return {color: asColors[oTrack.properties.type]};}
-				}).addTo(oMap);
+				})
+				//.bindPopup(function (layer) {
+				//	return layer.feature.properties.description;
+				//})
+				.bindTooltip(function(oLayer) {
+					var asProperties = oLayer.feature.properties;
+					var $Tooltip = $('<div>', {'class':'track_tooltip'});
+					$('<p>', {'class':'name'}).text(asProperties.Name).appendTo($Tooltip);
+					if(asProperties.Name != asProperties.description) $('<p>', {'class':'description'}).text(asProperties.description).appendTo($Tooltip);
+    				return $Tooltip[0];
+    			})
+    			.addTo(oMap);
 			}
 		});
 		

style/spot.scss

@@ -24,6 +24,19 @@
 		color: #666;
 		@extend .flicker;
 	}
+
+	.track_tooltip {
+		p {
+			margin: 0;
+			
+			&.name {
+				font-weight: bold;
+			}
+			&.description {
+				font-style: italic;
+			}
+		}
+	}
 	
 	#legend {
 		background: white;