spot/masks/messages.html

<div id="messages">
	<div id="map">
		<div class="loader fa fa-map"></div>
	</div>
	<div id="legend"></div>
	<div id="feed">
		<div id="poster">
			<input id="post" name="post" type="text" />
			<input id="name" name="name" type="text" /><button id="submit" name="submit" type="button" class="">+</button>
		</div>
		<div id="posts">
			<div id="posts_list"></div>
			<div id="next_posts"><button id="add_posts" name="add_posts" type="button">Messages plus anciens</button>
		</div>
	</div>
</div>
<script type="text/javascript" src="script/lightbox.js"></script>
<script type="text/javascript">
oSpot.pageInit = function(asHash)
{
	$('#add_posts').click(updateFeed);
	self.get('messages', function(oMessages){
		
		//Build Feed
		updateFeed(true);
		//setInterval(updateFeed, 60 * 1000); //refresh every minute
		
		//Centering map on last message
		var agCenter = {lat:0, lng:0};
		var iZoom = 0;
		if(self.vars('mode')=='blog')
		{
			var oLastMsg = oMessages[oMessages.length-1];
			agCenter.lat = oLastMsg.latitude;
			agCenter.lng = oLastMsg.longitude;
			iZoom = 12;
		}
		else
		{
			agCenter.lat = -43.75;
			agCenter.lng = 171;
			iZoom = 7;
		}
		
		var oMap = new google.maps.Map(document.getElementById('map'), {
			center: agCenter,
			zoom: iZoom,
			mapTypeId: google.maps.MapTypeId.SATELLITE,
			scaleControl: true
		});

		var oKmlLayer = new google.maps.KmlLayer({
			url: 'http://spot.lutran.fr/kml/TeAraroaTrail_simplified.kmz?v3',
			preserveViewport: true,
			map: oMap
		});

		//Building messages
		$.each(oMessages, function(iKey, oMsg){
			var oMarker = new google.maps.Marker({
				id: oMsg.id_message,
				position: {lat:Number(oMsg.latitude), lng:Number(oMsg.longitude)},
				//animation: google.maps.Animation.DROP,
				icon: (iKey%2==0)?'images/footprint_alt.png':'images/footprint.png',
			    map: oMap,
			   	draggable: false
			});
			
			var oInfoWindow = new google.maps.InfoWindow({
				content: $('<div>', {'class':'info-window'})
					.append($('<h1>').append('Message '+oMsg.type+' #'+oMsg.id_message))
					.append($('<p>', {'class':'time'}).addIcon('fa-clock-o').append(oMsg.formatted_time+' ('+oMsg.relative_time+')'))
					.append($('<p>', {'class':'coordinates'}).addIcon('fa-compass').append(oMsg.latitude+' | '+oMsg.longitude))
					.append($('<p>', {'class':'battery'}).addIcon('fa-battery-three-quarters').append(oMsg.battery_state))
					.prop('outerHTML')
			});

			oMarker.addListener('mouseover', function(){
				oInfoWindow.open(oMap, oMarker);
			});
			oMarker.addListener('mouseout', function(){
				oInfoWindow.close(oMap, oMarker);
			});
		});
		
		//Legend
		var oLegend = document.getElementById('legend');
		var asRoutes = {
			teararoa: {'class': 'green', title: 'Te Araroa'},
			routeburn: {'class': 'blue', title: 'Routeburn Track'},
			offtrack: {'class': 'red', title: 'Hors rando'}
		};
		for(var sKey in asRoutes) {
			var oDiv = document.createElement('div');
			oDiv.className = 'line '+asRoutes[sKey]['class'];
			oDiv.innerHTML = asRoutes[sKey].title;
			oLegend.appendChild(oDiv);
		}
		oMap.controls[google.maps.ControlPosition.TOP_CENTER].push(oLegend);
		
		self.tmp('map', oMap);
	});
	
	//Post
	if(self.vars('mode')=='histo') $('#poster').hide();
	else $('#posts').css('top', $('#poster').outerHeight());
	$('#name').defaultVal('Nom...');
	$('#post').defaultVal('Ton message...');
	$('#submit').click(function(){
		if($('#poster').checkForm())
		{
			self.get(
				'add_post',
				function()
				{
					$('#name').val('');
					$('#post').val('');
					updateFeed(true);
				},
				{name:$('#name').val(), content:$('#post').val()}
			);
		}
	});
};

function updateFeed(bFirstChunk)
{
	bFirstChunk = bFirstChunk || false;
	
	var $Posts = $('#posts_list');
	if(bFirstChunk===true)
	{
		$Posts.empty();
		self.tmp('news_chunk', 0);
	}
	
	self.get('feed', function(asData){
		
		$.each(asData, function(iKey, asPost){
			var $Post = $('<div>', {'class':'post '+asPost.type});
			var sRelTime = (self.vars('mode')=='histo')?asPost.formatted_time.substr(0, 10):asPost.relative_time;
			var sAbsTime = asPost.formatted_time;
			var $Body = {};
			switch(asPost.type)
			{
				case 'message':
					$Body = $('<div>')
								.append($('<p>').addIcon('fa-compass', true).append(asPost.latitude+' | '+asPost.longitude))
								.append($('<p>').addIcon('fa-clock-o', true).append(sAbsTime))
								.append(
									$('<img>', {'class':'staticmap', src:'https://maps.googleapis.com/maps/api/staticmap?center='+asPost.latitude+','+asPost.longitude+'&zoom=13&size=400x300&maptype=satellite&markers=color:green|label:|'+asPost.latitude+','+asPost.longitude+'&key='+self.vars('google_api')})
										.data('lat', asPost.latitude)
										.data('lng', asPost.longitude)
										.click(function(){
											var $This = $(this);
											self.tmp('map').panTo({lat: parseFloat($This.data('lat')), lng: parseFloat($This.data('lng'))});
											self.tmp('map').setZoom(13);
										})
								);
					sClass = 'compass';
					break;
				case 'picture':
					var $Image = $('<img>', {'src':asPost.path/*, 'style':'transform:rotate('+asPost.rotate+'deg);'*/});
					$Body = $('<a>', {href:asPost.path, 'data-lightbox':self.consts.title, 'data-title':sAbsTime}).append($Image);
					sClass = 'image';
					break;
				case 'post':
					$Body = $('<div>')
								.append($('<p>', {'class':'message'}).text(asPost.post))
								.append($('<p>', {'class':'signature'}).text('-- '+asPost.name));
					sClass = 'comment';
					break;
			}
			$Post
				.append($('<div>', {'class':'header'})
					.append($('<span>', {'class':'index'}).addIcon('fa-'+sClass))
					.append($('<span>', {'class':'time', 'title':sAbsTime}).text(sRelTime)))
				.append($('<div>', {'class':'body'}).append($Body))
				.appendTo($Posts);
			
			if(asPost.id) $Post.find('.index').append(' '+asPost.id);
			
			//if(asPost.type=='picture' && asPost.rotate!='0') $Body.height($Image.height());
		});
		self.tmp('news_chunk', self.tmp('news_chunk') + 1);
		$('#next_posts').toggle(Object.keys(asData).length == self.vars('chunk_size'));
	}, {'chunk':self.tmp('news_chunk')});
}
</script>