switching to gmap3

masks/messages.html

@@ -1,15 +1,88 @@
 <div id="messages">
-	<div id="widget"></div>
+	<div id="map">
+		<div class="loader fa fa-map"></div>
+	</div>
 </div>
 <script type="text/javascript">
 oSpot.pageInit = function(asHash)
 {
-	$('#widget').spotLiveWidget({ 
-		feedId: self.vars('feed_id'),
-		width: '100%',
-		height: 800
-	});	
+	self.get('messages', function(oMessages){
+		
+		//Building messages
+		aoMessages = [];
+		$.each(oMessages, function(iKey, oMsg)
+		{
+			var sInfoWindow = $('<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');
+			var sLatLng = [oMsg.latitude, oMsg.longitude];
+			var asData = {title:oMsg.timestamp, details:sInfoWindow};
+			var asOptions = {icon:'images/footprint.png'}
+			aoMessages.push({id:oMsg.id_message, latLng:sLatLng, data:asData, options:asOptions});
+		});
+		
+		//Centering map on last message
+		var oLastMsg = oMessages[oMessages.length-1];
+		var $Map = $("#map").gmap3(
+		{
+			map:
+			{
+				options:
+				{
+					center:{lat:oLastMsg.latitude, lng:oLastMsg.longitude},
+					zoom:6,
+					mapTypeId:google.maps.MapTypeId.HYBRID,
+					scaleControl:true
+				}
+			},/*
+			kmllayer:
+			{
+				options:
+				{
+					url:'http://localhost/spot/kml/TrailRegion_7.kml',
+					opts:{suppressInfoWindows: true}
+				}
+			},*/
+			marker:
+			{
+				values:aoMessages,
+				options:{draggable:false}/*,
+				events:{click:function(marker, event, context)
+				{
+					var asHash = self.getHash();
+					var sDestHash = asHash.items[0] || '';
+					var sSafeDest = self.tmp(['safedest', sDestHash]);
+					if(context.id!=sSafeDest)
+					{
+						self.setHash('honeymoon', [self.tmp(['hash', context.id])]);
+					}
+					else self.zoomIn(marker, event, context);
+				}}*/
+			},
+			events:
+			{
+				mouseover: function(marker, event, context)
+				{
+					console.log('over');
+					var map = $(this).gmap3("get"), infowindow = $(this).gmap3({get:{name:"infowindow"}});
+					if(infowindow)
+					{
+						infowindow.open(map, marker);
+						infowindow.setContent(context.data.details);
+					}
+					else $(this).gmap3({infowindow:{anchor:marker, options:{content: context.data.details}}});
+				},
+				mouseout: function()
+				{
+					var infowindow = $(this).gmap3({get:{name:"infowindow"}});
+					if(infowindow) infowindow.close();
+				}
+			}
+		});
+		self.tmp('map', $Map.gmap3("get"));
+	});
 };
-
-//oSpot.onSamePageMove = function(asHash){return true;};
 </script>