Adding markers: trail start / end

masks/project.html

@@ -78,6 +78,7 @@ function initPage(asHash) {
 		self.tmp('out-of-data', false);
 		self.tmp('tile_api', getWmtsApiUrl('{id}', '{y}', '{x}', '{z}'));
 		self.tmp('markers', 'object');
+		self.tmp('trail-markers', 'object');
 		self.tmp('marker_size', {width: 32, height: 32});
 		
 		toggleFeedPanel(!isMobile());
@@ -293,10 +294,9 @@ function initSpotMessages(aoMessages, aoTracks) {
 			
 			var aiCoords = feature.geometry.coordinates;
 			if(aiCoords && asProperties.type != 'hitchhiking') {
-				var iDistance = 0;
-				var iElevDrop = 0;
-				var iElevGain = 0;
-				var iTime = 0;
+				var iDistance = 0, iElevDrop = 0, iElevGain = 0, iTime = 0;
+				
+				//Track duration (in hours)
 				for (var i = 1; i < aiCoords.length; i++) {
 					var oCurrPoint = new L.LatLng(aiCoords[i][1], aiCoords[i][0]);
 					var oPrevPoint = new L.LatLng(aiCoords[i - 1][1], aiCoords[i - 1][0]);
@@ -319,8 +319,8 @@ function initSpotMessages(aoMessages, aoTracks) {
 					iTime += iSegDistance / 1000 * iSpeedCorrecRatio / 3.5 ; //default speed: 3.5km/h
 				}
 				
-				var iTimeHours = 0, iTimeMinutes = 0;
-				var iTimeDays = Math.floor(iTime/8); //8 hours a day
+				//Conversion of hours into natural language
+				var iTimeMinutes = 0, iTimeHours = 0, iTimeDays = Math.floor(iTime/8); //8 hours a day
 				if(iTimeDays > 1) iTimeDays = Math.round(iTimeDays * 2) / 2; //Round down to the closest half day
 				else {
 					iTimeDays = 0;
@@ -329,29 +329,46 @@ function initSpotMessages(aoMessages, aoTracks) {
 					
 					iTimeMinutes = Math.floor(iTime * 4) * 15; //Round down to the closest 15 minutes
 				}
-				
 				var sDuration = '~ '
 					+(iTimeDays>0?(iTimeDays+(iTimeDays%2==0?'':'½')+' '+oSpot.lang(iTimeDays>1?'unit_days':'unit_day')):'')//Days
 					+((iTimeHours>0 || iTimeDays==0)?iTimeHours+oSpot.lang('unit_hour'):'')									//Hours
 					+((iTimeDays>0 || iTimeMinutes==0)?'':iTimeMinutes)														//Minutes
 				
+				//Tooltip info
 				$('<p>', {'class':'detail'}).addIcon('fa-distance fa-fw', true).append(Math.round(iDistance/1000)+'km').appendTo($Tooltip);
 				$('<p>', {'class':'detail'}).addIcon('fa-time fa-fw', true).append(sDuration).appendTo($Tooltip);
 				$('<p>', {'class':'detail'}).addIcon('fa-elev-gain fa-fw', true).append(iElevGain+'m').appendTo($Tooltip);
 				$('<p>', {'class':'detail'}).addIcon('fa-elev-drop fa-fw', true).append(iElevDrop+'m').appendTo($Tooltip);
+
+				//Trail Start/End
+				self.tmp(['trail-markers', asProperties.name], {
+					'start'	: L.marker(new L.latLng(aiCoords[0][1], aiCoords[0][0]), {icon: getDivIcon('track-start')}),
+					'end'	: L.marker(new L.latLng(aiCoords[aiCoords.length - 1][1], aiCoords[aiCoords.length - 1][0]), {icon: getDivIcon('track-end')})
+				});
+				
+				oLayer
+					.bindPopup($Tooltip[0])
+					.on('mouseover', function(e) {console.log(e.target);
+						e.target.getPopup().setLatLng(e.latlng).openOn(self.tmp('map'));
+						
+						var asTrailMarkers = self.tmp(['trail-markers', e.target.feature.properties.name]);
+						var oPointStart = self.tmp('map').latLngToLayerPoint(asTrailMarkers.start.getLatLng());
+						var oPointEnd = self.tmp('map').latLngToLayerPoint(asTrailMarkers.end.getLatLng());
+						if(oPointStart.distanceTo(oPointEnd) > 200) {
+							asTrailMarkers.start.addTo(self.tmp('map'));
+							asTrailMarkers.end.addTo(self.tmp('map'));	
+						}
+					})
+					.on('mouseout', function(e) {
+						e.target.closePopup();	
+						
+						var asTrailMarkers = self.tmp(['trail-markers', e.target.feature.properties.name]);
+						asTrailMarkers.start.remove();
+						asTrailMarkers.end.remove();
+					});
 				
 				(oElev.addData.bind(oElev))(feature, oLayer);
 			}
-			
-			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);
 
@@ -374,12 +391,7 @@ function initSpotMessages(aoMessages, aoTracks) {
 		var oMarker = L.marker(L.latLng(oMsg.latitude, oMsg.longitude), {
 			id: oMsg.id_message,
 			riseOnHover: true,
-			icon: L.divIcon({
-				className: '',
-				html: '<span class="fa-stack"><i class="fa fa-message fa-stack-2x"></i><i class="fa fa-message-in fa-stack-1x fa-rotate-270"></i></span>',
-				iconSize: [self.tmp('marker_size').width, self.tmp('marker_size').height],
-				iconAnchor: [self.tmp('marker_size').width / 2, self.tmp('marker_size').height] //position from icon's top left corner (iconAnchor = marker's position)
-			})
+			icon: getDivIcon('message-in fa-rotate-270')
 		}).addTo(oMap);
 		
 		//Tooltip
@@ -419,6 +431,15 @@ function initSpotMessages(aoMessages, aoTracks) {
 	});
 }
 
+function getDivIcon(sIcon) {
+	return L.divIcon({
+		className: '',
+		html: '<span class="fa-stack"><i class="fa fa-message fa-stack-2x"></i><i class="fa fa-'+sIcon+' fa-stack-1x"></i></span>',
+		iconSize: [self.tmp('marker_size').width, self.tmp('marker_size').height],
+		iconAnchor: [self.tmp('marker_size').width / 2, self.tmp('marker_size').height] //position from icon's top left corner (iconAnchor = marker's position)
+	});	
+}
+
 function onFeedScroll() {
 	var $Box = $(this);
 	var $BoxContent = $Box.find('.simplebar-content');

style/_fa.scss

@@ -38,6 +38,8 @@ $fa-css-prefix: fa;
 .#{$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-car-side); }
+.#{$fa-css-prefix}-track-start:before { content: fa-content($fa-var-hiking);}
+.#{$fa-css-prefix}-track-end:before { content: fa-content($fa-var-hiking);}
 .#{$fa-css-prefix}-layers:before { content: fa-content($fa-var-layer-group); }
 .#{$fa-css-prefix}-elev-chart:before { content: fa-content($fa-var-chart-area); }
 .#{$fa-css-prefix}-distance:before { content: fa-content($fa-var-arrow-circle-right); }

style/_mask_project.scss

@@ -225,6 +225,14 @@ $legend-color: #222;
 		    color: $message-color;
 		    top: 1px;
 		}
+		.fa-track-start, .fa-track-end {
+			color: $message-color;
+			font-size: 14px;
+			top: 1px;
+		}
+		.fa-track-end {
+			color: $track-hitchhiking-color;
+		}
 	}
 
 	/* Feed Panel */