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

Hover opening popup on tracks

Browse Source
This commit is contained in:
Franzz
2019-01-27 00:28:24 +01:00
parent 0ea31c8ff2
commit 3149a80fa5
5 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
masks/project.html
View File

@@ -66,8 +66,8 @@ oSpot.pageInit = function(asHash)
url: self.vars(['project', 'geofile']),
mimeType: 'application/json'
})
).done(function(oMessages, aoTracks) {
buildSpotMessages(oMessages[0]['data'], aoTracks[0]);
).done(function(aoMessages, aoTracks) {
buildSpotMessages(aoMessages[0]['data'], aoTracks[0]);
});
//Posts
@@ -75,7 +75,7 @@ oSpot.pageInit = function(asHash)
initPosts();
};
function buildSpotMessages(oMessages, aoTracks){
function buildSpotMessages(aoMessages, aoTracks){
//Build Feed
self.tmp('updatable', true);
@@ -90,12 +90,11 @@ function buildSpotMessages(oMessages, aoTracks){
//Tile layers
var oMapBoxSat = L.tileLayer(self.tmp('tile_api'), {id: 'mapbox.satellite', minZoom: 0, maxZoom: 19}),
//oOpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {id: 'OpenTopoMap', minZoom: 2, maxZoom: 19});
oOpenTopoMap = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {id: 'OpenTopoMap', minZoom: 2, maxZoom: 19}),
//oMapBoxStreet = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+self.vars('mapbox_key'), {id: 'mapbox.streets'}),
oIgnSpain = L.tileLayer(self.tmp('tile_api'), {id: 'ign.es', minZoom: 1, maxZoom: 20}),
oIgnFrance = L.tileLayer(self.tmp('tile_api'), {id: 'ign.fr', minZoom: 0, maxZoom: 18, tileSize: 256}),
oLinz = L.tileLayer(self.tmp('tile_api'), {id: 'linz', maxZoom: 17, continuousWorld: true, attribution: 'Sourced from LINZ. CC BY 4.0'});
//oGoogleSatellite = L.tileLayer('https://mt.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {id: 'GoogleSatellite', minZoom: 1, maxZoom: 22});
//Map
var oMap = L.map(self.tmp('$Map')[0], {
@@ -106,14 +105,23 @@ function buildSpotMessages(oMessages, aoTracks){
//Tracks, colors & popup
var oTracks = L.geoJson(aoTracks, {
style: function(oTrack) {return {color: self.tmp(['tracktype-colors', oTrack.properties.type]), weight: 4, opacity: 1};}
})
.bindPopup(function(oLayer) {
var asProperties = oLayer.feature.properties;
var $Tooltip = $('<div>', {'class':'track_tooltip'});
$('<p>', {'class':'name'}).addIcon('fa-track-'+asProperties.type, true).append(asProperties.name).appendTo($Tooltip);
if(asProperties.Name != asProperties.description) $('<p>', {'class':'description'}).text(asProperties.description).appendTo($Tooltip);
return $Tooltip[0];
style: function(oTrack) {return {color: self.tmp(['tracktype-colors', oTrack.properties.type]), weight: 4, opacity: 1};},
onEachFeature: function (feature, oLayer) {
var asProperties = feature.properties;
var $Tooltip = $('<div>', {'class':'track_tooltip'});
$('<p>', {'class':'name'}).addIcon('fa-track-'+asProperties.type, true).append(asProperties.name).appendTo($Tooltip);
if(asProperties.Name != asProperties.description) $('<p>', {'class':'description'}).text(asProperties.description).appendTo($Tooltip);
oLayer
.bindPopup($Tooltip[0])
.on('mouseover', function(e) {
var popup = e.target.getPopup();
popup.setLatLng(e.latlng).openOn(self.tmp('map'));
})
.on('mouseout', function(e) {
e.target.closePopup();
});
}
})
.addTo(oMap);
@@ -121,7 +129,7 @@ function buildSpotMessages(oMessages, aoTracks){
if(self.vars(['project', 'mode'])==self.consts.modes.blog)
{
//Zoom on last message
var oLastMsg = oMessages[oMessages.length-1];
var oLastMsg = aoMessages[aoMessages.length-1];
oMap.setView(L.latLng(oLastMsg.latitude, oLastMsg.longitude), 15);
//Recenter map to be at the center of 70% (map_offset) of the page, 30% being used by posts
@@ -132,13 +140,14 @@ function buildSpotMessages(oMessages, aoTracks){
//Controls
L.control.layers({
'Satellite': oMapBoxSat,
'Open Topo Map': oOpenTopoMap,
'IGN (France)': oIgnFrance,
'IGN (Espagne)': oIgnSpain,
'LINZ (Nouvelle-Zélande)': oLinz
}, null, {position: 'topleft'}).addTo(oMap);
//Building messages
$.each(oMessages, function(iKey, oMsg){
$.each(aoMessages, function(iKey, oMsg){
//Marker
var oMarker = L.marker(L.latLng(oMsg.latitude, oMsg.longitude), {
@@ -152,23 +161,28 @@ function buildSpotMessages(oMessages, aoTracks){
}).addTo(oMap);
//Marker events
oMarker.on({
/*oMarker.on({
mouseover: function(){
this.openPopup();
},
/*mouseout: function(){
mouseout: function(){
},*/
},
click: function(oPoint){
self.tmp('map').setOffsetView(self.tmp('map_offset'), oPoint.latlng, 15);
}
});
});*/
//Tooltip
$Tooltip = $('<div>', {'class':'info-window'})
.append($('<h1>').append('Message '+oMsg.type+' #'+oMsg.id_message))
.append($('<p>', {'class':'time'}).addIcon('fa-time').append(oMsg.formatted_time+' ('+oMsg.relative_time+')'))
.append($('<p>', {'class':'coordinates'}).addIcon('fa-message', false).append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
.append($('<h1>')
.append('Message '+oMsg.type+' #'+oMsg.id_message))
.append($('<p>', {'class':'time'})
.addIcon('fa-time')
.append(oMsg.formatted_time+(self.vars(['project', 'mode'])==self.consts.modes.blog?' ('+oMsg.relative_time+')':'')))
.append($('<p>', {'class':'coordinates'})
.addIcon('fa-message', false)
.append('Lat : '+oMsg.latitude+', Lng : '+oMsg.longitude));
//Tooltip pictures
if(oMsg.pics) {