364 lines
11 KiB
HTML
Executable File
364 lines
11 KiB
HTML
Executable File
<div id="messages">
|
|
<div id="map">
|
|
<div class="loader fa fa-map"></div>
|
|
</div>
|
|
<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>
|
|
<div id="feed">
|
|
<div id="posts">
|
|
<div id="poster"></div>
|
|
<div id="posts_list"></div>
|
|
<div id="loading"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" src="script/lightbox.min.js"></script>
|
|
<script type="text/javascript">
|
|
oSpot.pageInit = function(asHash)
|
|
{
|
|
self.tmp('$Map', $('#map'));
|
|
|
|
//Add Loading
|
|
var asLoading = {
|
|
type: 'loading',
|
|
formatted_time: '',
|
|
relative_time: '',
|
|
displayed_id: 'Chargement...'
|
|
};
|
|
getPost(asLoading).appendTo($('#loading'));
|
|
|
|
//$('#add_posts').click(updateFeed);
|
|
self.get('messages', function(oMessages){
|
|
|
|
//Build Feed
|
|
self.tmp('updatable', true);
|
|
self.tmp('out-of-data', 'boolean');
|
|
updateFeed(true);
|
|
self.tmp('simple-bar', new SimpleBar($('#posts')[0]));
|
|
self.tmp('simple-bar').getScrollElement().addEventListener('scroll', onFeedScroll);
|
|
self.tmp('infowindow', 'boolean');
|
|
|
|
//Centering map
|
|
var agCenter = {lat:0, lng:0};
|
|
var iZoom = 0;
|
|
if(self.vars('mode')=='blog')
|
|
{
|
|
//on last message
|
|
var oLastMsg = oMessages[oMessages.length-1];
|
|
agCenter.lat = oLastMsg.latitude;
|
|
agCenter.lng = oLastMsg.longitude;
|
|
iZoom = 12;
|
|
}
|
|
else
|
|
{
|
|
var iMapRatio = 0.7;
|
|
var iMinLat, iMaxLat, iMinLng, iMaxLng;
|
|
iMinLat = iMinLng = 180;
|
|
iMaxLat = iMaxLng = -180;
|
|
$.each(oMessages, function(iKey, oMsg){
|
|
iMinLat = Math.min(iMinLat, oMsg.latitude);
|
|
iMaxLat = Math.max(iMaxLat, oMsg.latitude);
|
|
iMinLng = Math.min(iMinLng, oMsg.longitude);
|
|
iMaxLng = Math.max(iMaxLng, oMsg.longitude);
|
|
});
|
|
|
|
//Get Marker bounds
|
|
var oSouthWest = {lat:iMinLat, lng:iMinLng};
|
|
var oNorthEast = {lat:iMaxLat, lng:iMaxLng};
|
|
oMarkerBounds = new google.maps.LatLngBounds(oSouthWest, oNorthEast);
|
|
agCenter = oMarkerBounds.getCenter();
|
|
|
|
//Calculate adequate zoom (map.fitBounds is dezooming too much)
|
|
var oMapDim = {height: self.tmp('$Map').height()*0.95, width: self.tmp('$Map').width()*(iMapRatio - 0.05)};
|
|
iZoom = getBoundsZoomLevel(oMarkerBounds, oMapDim);
|
|
}
|
|
|
|
var oMap = new google.maps.Map(self.tmp('$Map')[0], {
|
|
center: agCenter,
|
|
zoom: iZoom,
|
|
mapTypeId: google.maps.MapTypeId.SATELLITE,
|
|
scaleControl: true,
|
|
scaleControlOptions: {
|
|
position: google.maps.ControlPosition.TOP_LEFT
|
|
},
|
|
mapTypeControl: true,
|
|
mapTypeControlOptions: {
|
|
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
|
|
position: google.maps.ControlPosition.TOP_LEFT
|
|
},
|
|
zoomControl: true,
|
|
zoomControlOptions: {
|
|
position: google.maps.ControlPosition.LEFT_TOP
|
|
},
|
|
fullscreenControl: true,
|
|
fullscreenControlOptions: {
|
|
position: google.maps.ControlPosition.LEFT_BOTTOM
|
|
},
|
|
streetViewControl: false
|
|
});
|
|
|
|
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:oMsg.latitude, lng:oMsg.longitude},
|
|
//animation: google.maps.Animation.DROP,
|
|
icon: (iKey%2==0)?'images/footprint_alt.png':'images/footprint.png',
|
|
map: oMap,
|
|
draggable: false
|
|
});
|
|
|
|
var $InfoWindow = $('<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('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude))
|
|
.hover(
|
|
function(){
|
|
self.tmp('infowindow', true);
|
|
},
|
|
function(){
|
|
self.tmp('infowindow', false);
|
|
oInfoWindow.close(oMap, oMarker);
|
|
}
|
|
);
|
|
//.append($('<p>', {'class':'battery'}).addIcon('fa-battery-three-quarters').append(oMsg.battery_state))
|
|
if(oMsg.pics) {
|
|
var $Pics = $('<div>', {'class':'pics'});
|
|
$.each(oMsg.pics, function(iKey, asPic){
|
|
$Pics.append($('<a>', {href: asPic.path, 'data-lightbox': self.consts.title, 'data-title': asPic.formatted_time})
|
|
.append($('<img>', {'src': asPic.thumb_path})));
|
|
});
|
|
$InfoWindow
|
|
.append($('<p>').addIcon('fa-image').append('Photos'))
|
|
.append($Pics);
|
|
}
|
|
|
|
var oInfoWindow = new google.maps.InfoWindow({
|
|
content: $InfoWindow[0]
|
|
});
|
|
|
|
oMarker.addListener('mouseover', function(){
|
|
oInfoWindow.open(oMap, oMarker);
|
|
});
|
|
oMarker.addListener('mouseout', function(){
|
|
setTimeout(function(){
|
|
if(!self.tmp('infowindow')) oInfoWindow.close(oMap, oMarker);
|
|
}, 400);
|
|
});
|
|
oMarker.addListener('click', function(){
|
|
self.tmp('map').panTo(oMarker.getPosition());
|
|
self.tmp('map').setZoom(15);
|
|
});
|
|
});
|
|
|
|
//Recenter map once loaded to be at the center of 70% (iMapRatio) of the page
|
|
if(self.vars('mode')!='blog')
|
|
{
|
|
oProjListener = oMap.addListener('projection_changed', function() {
|
|
|
|
var iZoom = self.tmp('map').getZoom();
|
|
|
|
var oCenterLatLng = self.tmp('map').getCenter();
|
|
var oCenterPoint = self.tmp('map').getProjection().fromLatLngToPoint(oCenterLatLng);
|
|
|
|
var iOffsetX = self.tmp('$Map').width()*(iMapRatio - 1)/2;
|
|
var iOffsetPointX = new google.maps.Point(iOffsetX / Math.pow(2, iZoom), 0).x;
|
|
|
|
var oNewCenterPoint = new google.maps.Point(oCenterPoint.x - iOffsetPointX, oCenterPoint.y);
|
|
var oNewCenterLatLng = self.tmp('map').getProjection().fromPointToLatLng(oNewCenterPoint);
|
|
self.tmp('map').setCenter(oNewCenterLatLng);
|
|
|
|
oProjListener.remove();
|
|
});
|
|
}
|
|
|
|
//Legend
|
|
oMap.controls[google.maps.ControlPosition.BOTTOM_RIGHT].push($('#legend')[0]);
|
|
|
|
self.tmp('map', oMap);
|
|
});
|
|
|
|
//Post
|
|
if(self.vars('mode')=='histo') $('#poster').hide();
|
|
else {
|
|
var asPoster = {
|
|
type: 'poster',
|
|
formatted_time: '',
|
|
relative_time: 'Nouveau message'
|
|
};
|
|
getPost(asPoster).appendTo($('#poster'));
|
|
|
|
$('#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 getBoundsZoomLevel(bounds, mapDim) {
|
|
var WORLD_DIM = { height: 256, width: 256 };
|
|
var ZOOM_MAX = 21;
|
|
|
|
function latRad(lat) {
|
|
var sin = Math.sin(lat * Math.PI / 180);
|
|
var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
|
|
return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
|
|
}
|
|
|
|
function zoom(mapPx, worldPx, fraction) {
|
|
return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
|
|
}
|
|
|
|
var ne = bounds.getNorthEast();
|
|
var sw = bounds.getSouthWest();
|
|
|
|
var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;
|
|
|
|
var lngDiff = ne.lng() - sw.lng();
|
|
var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;
|
|
|
|
var latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
|
|
var lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);
|
|
|
|
return Math.min(latZoom, lngZoom, ZOOM_MAX);
|
|
}
|
|
|
|
function onFeedScroll(){
|
|
var $Box = $(this);
|
|
var $BoxContent = $Box.find('.simplebar-content');
|
|
if(($Box.scrollTop() + $(window).height()) / $BoxContent.height() >= 0.8) updateFeed();
|
|
}
|
|
|
|
function updateFeed(bFirstChunk)
|
|
{
|
|
bFirstChunk = bFirstChunk || false;
|
|
|
|
if(self.tmp('updatable')) {
|
|
if(!self.tmp('out-of-data') || bFirstChunk) {
|
|
var $Posts = $('#posts_list');
|
|
if(bFirstChunk===true) {
|
|
$Posts.empty();
|
|
self.tmp('news_chunk', 0);
|
|
}
|
|
|
|
self.tmp('updatable', false);
|
|
$('#loading').fadeIn('fast');
|
|
|
|
self.get('feed', function(asData) {
|
|
|
|
$.each(asData, function(iKey, asPost){
|
|
getPost(asPost).appendTo($Posts);
|
|
});
|
|
|
|
//oSimpleBar.recalculate();
|
|
|
|
self.tmp('news_chunk', self.tmp('news_chunk') + 1);
|
|
self.tmp('out-of-data', Object.keys(asData).length != self.vars('chunk_size'));
|
|
self.tmp('updatable', true);
|
|
$('#loading').fadeOut('fast');
|
|
}, {
|
|
'chunk': self.tmp('news_chunk')
|
|
});
|
|
}
|
|
}
|
|
else if(bFirstChunk) { //Delaying important data load
|
|
if(typeof oUpdateTimer != 'undefined') clearTimeout(oUpdateTimer);
|
|
oUpdateTimer = setTimeout(function(){updateFeed(true);}, 200);
|
|
}
|
|
}
|
|
|
|
function getPost(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('Latitude '+asPost.latitude+', Longitude '+asPost.longitude))
|
|
.append($('<p>').addIcon('fa-clock-o', true).append(sAbsTime))
|
|
.append(
|
|
$('<img>', {'class':'staticmap', title: 'Click pour zoomer', src: getStaticMapUrl(asPost.latitude, asPost.longitude)})
|
|
.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.thumb_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.content))
|
|
.append($('<p>', {'class':'signature'}).text('-- '+asPost.formatted_name));
|
|
sClass = 'comment';
|
|
break;
|
|
case 'poster':
|
|
$Body = $('<p>', {'class':'message'})
|
|
.append($('<input>', {type:'text', id:'post', name:'post'}))
|
|
.append($('<input>', {type:'text', id:'name', name:'name'}))
|
|
.append($('<button>', {type:'button', id:'submit', name:'submit'}).addIcon('fa-send'));
|
|
sClass = 'comment';
|
|
break;
|
|
case 'loading':
|
|
$Body = $('<p>', {'class':'spinner'}).addIcon('fa-spin fa-spinner');
|
|
sClass = 'tasks';
|
|
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));
|
|
|
|
if(asPost.displayed_id) $Post.find('.index').append(' '+asPost.displayed_id);
|
|
|
|
//if(asPost.type=='picture' && asPost.rotate!='0') $Body.height($Image.height());
|
|
|
|
return $Post;
|
|
}
|
|
|
|
function getStaticMapUrl(oCenterLat, oCenterLng){
|
|
var sDomain = 'https://maps.googleapis.com/maps/api/staticmap';
|
|
var asParams = {
|
|
center: oCenterLat+','+oCenterLng,
|
|
zoom: '13',
|
|
size: '400x300',
|
|
maptype: 'satellite',
|
|
markers: 'color:green|label:|'+oCenterLat+','+oCenterLng,
|
|
key: self.vars('google_api')
|
|
};
|
|
|
|
return sDomain+'?'+Object.keys(asParams).map(k => k+'='+asParams[k]).join('&');
|
|
}
|
|
</script> |