Replace Leaftlet Elevation with HeightGraph

This commit is contained in:
2020-04-20 11:57:53 +02:00
parent fe7fd52357
commit 7ba9243fa1
15 changed files with 359 additions and 957 deletions

View File

@@ -30,11 +30,11 @@
</div>
</div>
<div id="elems">
<div id="settings-button"><i class="fa fa-menu fa-fw"></i></div>
<div id="post-button"><i class="fa fa-fw"></i></div>
<div id="settings-button" class="spot-control"><i class="fa fa-menu fa-fw"></i></div>
<div id="post-button" class="spot-control"><i class="fa fa-fw"></i></div>
<div id="legend" class="leaflet-control-layers leaflet-control leaflet-control-layers-expanded">
<div class="track"><span class="line main"></span><span class="desc">[#]lang:track_main[#]</span></div>
<div class="track"><span class="line off-track"></span><span class="desc">[#]lang:track_offtrack[#]</span></div>
<div class="track"><span class="line off-track"></span><span class="desc">[#]lang:track_off-track[#]</span></div>
<div class="track"><span class="line hitchhiking"></span><span class="desc">[#]lang:track_hitchhiking[#]</span></div>
</div>
</div>
@@ -391,21 +391,52 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
oScale = L.control.scale({imperial: false, 'position':'bottomright'}).addTo(oMap);
//Controls: Elevation
if(!isIE() && !isMobile()) {
var oElev = L.control.elevation({
collapsed: true,
position: "bottomright",
if(!isMobile()) {
var aoElevTracks = {type: 'FeatureCollection', features:[], properties: {summary: 'Elevation'}};
var aoLegend = {Elevation: {}};
for(var i in aoTracks.features) {
if(aoTracks.features[i].properties.type != 'hitchhiking') {
//Feature
var oTrack = jQuery.extend(true, {}, aoTracks.features[i]);
var sType = aoTracks.features[i].properties.type;
oTrack.properties.attributeType = sType;
aoElevTracks.features.push(oTrack);
//Legend
aoLegend.Elevation[sType] = {text: oSpot.lang('track_'+sType), color: self.tmp(['track-type-styles', sType, 'color'])};
}
}
var oElev = L.control.heightgraph({
position: 'bottomright',
expand: false,
width: getElevWidth(),
height: 129,
hoverNumber: {
decimalsX: 0, //distance (km)
decimalsY: 0 //elevation (m)
height: 200,
margins: {
top: 10,
right: 30,
bottom: 55,
left: 50
},
theme: 'spot-theme',
onExpand: function(){$('.leaflet-control-scale').hide();},
onCollapse: function(){$('.leaflet-control-scale').show();}
}).addTo(oMap);
self.tmp('elev', oElev);
translation: {
distance: oSpot.lang('distance'),
elevation: oSpot.lang('elevation'),
segment_length: oSpot.lang('segment_length'),
type: oSpot.lang('type'),
legend: oSpot.lang('legend')
},
xTicks: 3,
yTicks: 2,
mappings: aoLegend,
highlightStyle: {
weight: self.tmp(['track-type-styles', 'main', 'weight']),
opacity: 1,
color: '#326526'
},
expandCallback: function(bExpanded){$('.leaflet-control-scale').toggle(!bExpanded);}
});
oElev.addTo(oMap);
oElev.addData([aoElevTracks]);
//self.tmp('elev', oElev);
}
//Controls: Tiles (layers): Add & Move to Settings Panel
@@ -503,8 +534,6 @@ function initSpotMessages(aoMessages, aoTracks, bNoFeed) {
asTrailMarkers.start.remove();
asTrailMarkers.end.remove();
});
if(!isIE() && !isMobile()) (oElev.addData.bind(oElev))(feature, oLayer);
}
}
}).addTo(oMap));