Replace Leaftlet Elevation with HeightGraph
This commit is contained in:
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user