franzz/spot
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

remove dependence on gmap3

Browse Source
This commit is contained in:
Franzz
2018-04-12 22:08:51 +02:00
parent aa4393746a
commit 1c8c9a2175
6 changed files with 63 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
masks/messages.html
View File

@@ -2,6 +2,7 @@
<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" />
@@ -24,22 +25,6 @@ oSpot.pageInit = function(asHash)
updateFeed(true);
//setInterval(updateFeed, 60 * 1000); //refresh every minute
//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:(iKey%2==0)?'images/footprint_alt.png':'images/footprint.png'};
aoMessages.push({id:oMsg.id_message, latLng:sLatLng, data:asData, options:asOptions});
});
//Centering map on last message
var agCenter = {lat:0, lng:0};
var iZoom = 0;
@@ -56,64 +41,64 @@ oSpot.pageInit = function(asHash)
agCenter.lng = 171;
iZoom = 7;
}
var $Map = $("#map").gmap3(
{
map:
{
options:
{
center:agCenter,
zoom:iZoom,
mapTypeId:google.maps.MapTypeId.HYBRID,
scaleControl:true
}
},
kmllayer:
{
options:
{
url:'http://spot.lutran.fr/kml/TeAraroaTrail_simplified.kmz?v3',
opts:{preserveViewport: true}
}
},
marker:
{
values:aoMessages,
options:{draggable:false},
events:
{
mouseover: function(marker, event, context)
{
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();
}
}
},
panel:
{
options:
{
content:'<div id="legend">'+
'<div class="line green">Te Araroa</div>'+
'<div class="line blue">Routeburn Track</div>'+
'<div class="line red">Hors rando</div>'+
'</div>',
top: '10px',
left: '116px'
}
}
var oMap = new google.maps.Map(document.getElementById('map'), {
center: agCenter,
zoom: iZoom,
mapTypeId: google.maps.MapTypeId.SATELLITE,
scaleControl: true
});
self.tmp('map', $Map.gmap3("get"));
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