88 lines
2.5 KiB
HTML
Executable File
88 lines
2.5 KiB
HTML
Executable File
<div id="messages">
|
|
<div id="map">
|
|
<div class="loader fa fa-map"></div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
oSpot.pageInit = function(asHash)
|
|
{
|
|
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://databap.lutran.fr/TeAraroaTrail_simplified.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"));
|
|
});
|
|
};
|
|
</script> |