Hover opening popup on tracks

masks/project.html

@@ -66,8 +66,8 @@ oSpot.pageInit = function(asHash)
 			url: self.vars(['project', 'geofile']),
 			mimeType: 'application/json'
 		})
-	).done(function(oMessages, aoTracks) {
-		buildSpotMessages(oMessages[0]['data'], aoTracks[0]);
+	).done(function(aoMessages, aoTracks) {
+		buildSpotMessages(aoMessages[0]['data'], aoTracks[0]);
 	});
 		
 	//Posts
@@ -75,7 +75,7 @@ oSpot.pageInit = function(asHash)
 	initPosts();
 };
 
-function buildSpotMessages(oMessages, aoTracks){
+function buildSpotMessages(aoMessages, aoTracks){
 	
 	//Build Feed
 	self.tmp('updatable', true);
@@ -90,12 +90,11 @@ function buildSpotMessages(oMessages, aoTracks){
 	
 	//Tile layers
 	var oMapBoxSat		= L.tileLayer(self.tmp('tile_api'), {id: 'mapbox.satellite', minZoom: 0, maxZoom: 19}),
-		//oOpenTopoMap	= L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {id: 'OpenTopoMap', minZoom: 2, maxZoom: 19});
+		oOpenTopoMap	= L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {id: 'OpenTopoMap', minZoom: 2, maxZoom: 19}),
 		//oMapBoxStreet	= L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+self.vars('mapbox_key'), {id: 'mapbox.streets'}),
 		oIgnSpain		= L.tileLayer(self.tmp('tile_api'), {id: 'ign.es', minZoom: 1, maxZoom: 20}),
 		oIgnFrance		= L.tileLayer(self.tmp('tile_api'), {id: 'ign.fr', minZoom: 0, maxZoom: 18, tileSize: 256}),
 		oLinz 			= L.tileLayer(self.tmp('tile_api'), {id: 'linz', maxZoom: 17, continuousWorld: true, attribution: 'Sourced from LINZ. CC BY 4.0'});
-		//oGoogleSatellite = L.tileLayer('https://mt.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {id: 'GoogleSatellite', minZoom: 1, maxZoom: 22});
 	
 	//Map
 	var oMap = L.map(self.tmp('$Map')[0], {
@@ -106,14 +105,23 @@ function buildSpotMessages(oMessages, aoTracks){
 	
 	//Tracks, colors & popup
 	var oTracks = L.geoJson(aoTracks, {
-	    style: function(oTrack) {return {color: self.tmp(['tracktype-colors', oTrack.properties.type]), weight: 4, opacity: 1};}
-	})
-	.bindPopup(function(oLayer) {
-		var asProperties = oLayer.feature.properties;
+	    style: function(oTrack) {return {color: self.tmp(['tracktype-colors', oTrack.properties.type]), weight: 4, opacity: 1};},
+	    onEachFeature: function (feature, oLayer) {
+	    	var asProperties = feature.properties;
 			var $Tooltip = $('<div>', {'class':'track_tooltip'});
 			$('<p>', {'class':'name'}).addIcon('fa-track-'+asProperties.type, true).append(asProperties.name).appendTo($Tooltip);
 			if(asProperties.Name != asProperties.description) $('<p>', {'class':'description'}).text(asProperties.description).appendTo($Tooltip);
-		return $Tooltip[0];
+	    	
+			oLayer
+				.bindPopup($Tooltip[0])
+	    		.on('mouseover', function(e) {
+					var popup = e.target.getPopup();
+					popup.setLatLng(e.latlng).openOn(self.tmp('map'));
+				})
+				.on('mouseout', function(e) {
+	    			e.target.closePopup();	
+				});
+	    }
 	})
 	.addTo(oMap);
 	
@@ -121,7 +129,7 @@ function buildSpotMessages(oMessages, aoTracks){
 	if(self.vars(['project', 'mode'])==self.consts.modes.blog)
 	{
 		//Zoom on last message
-		var oLastMsg = oMessages[oMessages.length-1];
+		var oLastMsg = aoMessages[aoMessages.length-1];
 		oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15);
 		
 		//Recenter map to be at the center of 70% (map_offset) of the page, 30% being used by posts
@@ -132,13 +140,14 @@ function buildSpotMessages(oMessages, aoTracks){
 	//Controls
 	L.control.layers({
 		'Satellite': oMapBoxSat,
+		'Open Topo Map': oOpenTopoMap,
 		'IGN (France)': oIgnFrance,
 		'IGN (Espagne)': oIgnSpain,
 		'LINZ (Nouvelle-Zélande)': oLinz
 	}, null, {position: 'topleft'}).addTo(oMap);
 	
 	//Building messages
-	$.each(oMessages, function(iKey, oMsg){
+	$.each(aoMessages, function(iKey, oMsg){
 		
 		//Marker
 		var oMarker = L.marker(L.latLng(oMsg.latitude, oMsg.longitude), {
@@ -152,23 +161,28 @@ function buildSpotMessages(oMessages, aoTracks){
 		}).addTo(oMap);
 		
 		//Marker events
-		oMarker.on({
+		/*oMarker.on({
 			mouseover: function(){
 				this.openPopup();	
 			},
-			/*mouseout: function(){
+			mouseout: function(){
 				
-		    },*/
+		    },
 		    click: function(oPoint){
 		    	self.tmp('map').setOffsetView(self.tmp('map_offset'), oPoint.latlng, 15);
 		    }
-		});
+		});*/
 		
 		//Tooltip
 		$Tooltip = $('<div>', {'class':'info-window'})
-			.append($('<h1>').append('Message '+oMsg.type+' #'+oMsg.id_message))
-			.append($('<p>', {'class':'time'}).addIcon('fa-time').append(oMsg.formatted_time+' ('+oMsg.relative_time+')'))
-			.append($('<p>', {'class':'coordinates'}).addIcon('fa-message', false).append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
+			.append($('<h1>')
+				.append('Message '+oMsg.type+' #'+oMsg.id_message))
+			.append($('<p>', {'class':'time'})
+				.addIcon('fa-time')
+				.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')))
+			.append($('<p>', {'class':'coordinates'})
+				.addIcon('fa-message', false)
+				.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
 		
 		//Tooltip pictures
 		if(oMsg.pics) {

style/_fa.scss

@@ -31,4 +31,4 @@ $fa-css-prefix: fa;
 .#{$fa-css-prefix}-tasks:before { content: fa-content($fa-var-tasks); }
 .#{$fa-css-prefix}-track-off-track:before { content: fa-content($fa-var-hiking); }
 .#{$fa-css-prefix}-track-main:before { content: fa-content($fa-var-hiking); }
-.#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-bus); }
+.#{$fa-css-prefix}-track-hitchhiking:before { content: fa-content($fa-var-car-side); }

todo

@@ -2,7 +2,6 @@ To Do List
 ----------
 - Elevation chart
 - Radio button projects
-- Hover on track segments
 - Table for images
 - Static maps in backend
 - Device/Spot Class