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

Adding elevation chart

Browse Source
This commit is contained in:
Franzz
2019-02-14 22:59:32 +01:00
parent 1b4f0f5b17
commit 0617aac091
14 changed files with 1001 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
masks/project.html
View File

@@ -137,8 +137,7 @@ function initSpotMessages(aoMessages, 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}),
//oMapBoxStreet = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+self.vars('mapbox_key'), {id: 'mapbox.streets'}),
oOpenTopoMap = L.tileLayer(self.tmp('tile_api'), {id: 'opentopomap', minZoom: 2, maxZoom: 19}),
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'});
@@ -151,12 +150,71 @@ function initSpotMessages(aoMessages, aoTracks) {
});
self.tmp('map', oMap);
//Controls: Legend
var oLegend = L.control({position: 'bottomleft'});
oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
oLegend.addTo(oMap);
//Controls: Projects
var oProjects = L.control({position: 'bottomleft'});
oProjects.onAdd = function(oMap) {
var $Labels = $('<div>', {'class': 'leaflet-control-layers-base'});
$.each(self.vars('projects'), function(sCodeName, asProject){
var asRadioAttrs = {'type': 'radio', 'class': 'leaflet-control-layers-selector', 'name':'project', 'value': sCodeName};
if(asProject.id == self.vars(['project', 'id'])) asRadioAttrs.checked = 'checked';
var $Radio =$('<input>', asRadioAttrs).change(function(){
self.setHash(self.vars('page'), [$(this).val()]);
});
var $Label = $('<label>').append($('<div>')
.append($Radio)
.append($('<span>').text(' '+asProject.name))
);
$Labels.append($Label);
});
return $('<div>', {'class':'leaflet-control-layers leaflet-control leaflet-control-layers-expanded'}).append($('<section>').append($Labels))[0];
};
oProjects.addTo(oMap);
//Controls: Scale
oScale = L.control.scale({imperial: false, 'position':'bottomright'}).addTo(oMap);
//Controls: Elevation
var oElev = L.control.elevation({
collapsed: true,
position: "bottomright",
width: $('#messages').width() - $('#feed').outerWidth(true) - $('.leaflet-bottom.leaflet-left').outerWidth(true) + 4,
height: 125,
hoverNumber: {
decimalsX: 0, //distance (km)
decimalsY: 0 //elevation (m)
},
theme: 'spot-theme',
onExpand: function(){$('.leaflet-control-scale').hide();},
onCollapse: function(){$('.leaflet-control-scale').show();}
}).addTo(oMap);
//Controls: Tiles
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);
//Tracks, colors & popup
var oTracks = L.geoJson(aoTracks, {
style: function(oTrack) {
return self.tmp(['track-type-styles', oTrack.properties.type]);
},
onEachFeature: function (feature, oLayer) {
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);
@@ -171,6 +229,8 @@ function initSpotMessages(aoMessages, aoTracks) {
.on('mouseout', function(e) {
e.target.closePopup();
});
if(asProperties.type != 'hitchhiking') (oElev.addData.bind(oElev))(feature, oLayer);
}
}).addTo(oMap);
@@ -186,19 +246,6 @@ function initSpotMessages(aoMessages, aoTracks) {
}
else oMap.fitBounds(oTracks.getBounds(), {paddingTopLeft: L.point(5, 42), paddingBottomRight: L.point(self.tmp('feed_width')+5, 5)});
//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(aoMessages, function(iKey, oMsg){
@@ -213,19 +260,6 @@ function initSpotMessages(aoMessages, aoTracks) {
})
}).addTo(oMap);
//Marker events
/*oMarker.on({
mouseover: function(){
this.openPopup();
},
mouseout: function(){
},
click: function(oPoint){
self.tmp('map').setOffsetView(self.tmp('map_offset'), oPoint.latlng, 15);
}
});*/
//Tooltip
$Tooltip = $('<div>', {'class':'info-window'})
.append($('<h1>')
@@ -258,37 +292,6 @@ function initSpotMessages(aoMessages, aoTracks) {
oSpot.tmp(['markers', oMsg.id_message], oMarker);
});
//Legend
var oLegend = L.control({position: 'bottomleft'});
oLegend.onAdd = function(oMap) {return $('#legend').clone()[0];};
oLegend.addTo(oMap);
//Projects
var oProjects = L.control({position: 'bottomleft'});
oProjects.onAdd = function(oMap) {
var $Labels = $('<div>', {'class': 'leaflet-control-layers-base'});
$.each(self.vars('projects'), function(sCodeName, asProject){
var asRadioAttrs = {'type': 'radio', 'class': 'leaflet-control-layers-selector', 'name':'project', 'value': sCodeName};
if(asProject.id == self.vars(['project', 'id'])) asRadioAttrs.checked = 'checked';
var $Radio =$('<input>', asRadioAttrs).change(function(){
self.setHash(self.vars('page'), [$(this).val()]);
});
var $Label = $('<label>').append($('<div>')
.append($Radio)
.append($('<span>').text(' '+asProject.name))
);
$Labels.append($Label);
});
return $('<div>', {'class':'leaflet-control-layers leaflet-control leaflet-control-layers-expanded'}).append($('<section>').append($Labels))[0];
};
oProjects.addTo(oMap);
//Scale
L.control.scale({imperial: false, 'position':'bottomright'}).addTo(oMap);
}
function getBoundsZoomLevel(bounds, mapDim) {