113 lines
4 KiB
JavaScript
113 lines
4 KiB
JavaScript
BR.Elevation = L.Control.Elevation.extend({
|
|
options: {
|
|
width: $('#map').outerWidth(),
|
|
margins: {
|
|
top: 20,
|
|
right: 30,
|
|
bottom: 30,
|
|
left: 60,
|
|
},
|
|
theme: 'steelblue-theme',
|
|
shortcut: {
|
|
toggle: 69, // char code for 'e'
|
|
},
|
|
},
|
|
|
|
onAdd: function (map) {
|
|
var container = L.Control.Elevation.prototype.onAdd.call(this, map);
|
|
|
|
// revert registering touch events when touch screen detection is available and negative
|
|
// see https://github.com/MrMufflon/Leaflet.Elevation/issues/67
|
|
if (L.Browser.touch && BR.Browser.touchScreenDetectable && !BR.Browser.touchScreen) {
|
|
this._background.on('touchmove.drag', null).on('touchstart.drag', null).on('touchstart.focus', null);
|
|
L.DomEvent.off(this._container, 'touchend', this._dragEndHandler, this);
|
|
|
|
this._background
|
|
.on('mousemove.focus', this._mousemoveHandler.bind(this))
|
|
.on('mouseout.focus', this._mouseoutHandler.bind(this))
|
|
.on('mousedown.drag', this._dragStartHandler.bind(this))
|
|
.on('mousemove.drag', this._dragHandler.bind(this));
|
|
L.DomEvent.on(this._container, 'mouseup', this._dragEndHandler, this);
|
|
}
|
|
|
|
L.DomEvent.addListener(document, 'keydown', this._keydownListener, this);
|
|
|
|
return container;
|
|
},
|
|
|
|
addBelow: function (map) {
|
|
// waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66
|
|
// this.width($('#map').outerWidth());
|
|
this.options.width = $('#content').outerWidth();
|
|
|
|
if (this.getContainer() != null) {
|
|
this.remove(map);
|
|
}
|
|
|
|
function setParent(el, newParent) {
|
|
newParent.appendChild(el);
|
|
}
|
|
this.addTo(map);
|
|
// move elevation graph outside of the map
|
|
setParent(this.getContainer(), document.getElementById('elevation-chart'));
|
|
},
|
|
|
|
initCollapse: function (map) {
|
|
var self = this;
|
|
var onHide = function () {
|
|
$('#elevation-btn').removeClass('active');
|
|
// we must fetch tiles that are located behind elevation-chart
|
|
map._onResize();
|
|
|
|
if (this.id && BR.Util.localStorageAvailable() && !self.shouldRestoreChart) {
|
|
localStorage.removeItem(this.id);
|
|
}
|
|
};
|
|
var onShow = function () {
|
|
$('#elevation-btn').addClass('active');
|
|
|
|
if (this.id && BR.Util.localStorageAvailable()) {
|
|
localStorage[this.id] = 'true';
|
|
}
|
|
};
|
|
// on page load, we want to restore collapse state from previous usage
|
|
$('#elevation-chart')
|
|
.on('hidden.bs.collapse', onHide)
|
|
.on('shown.bs.collapse', onShow)
|
|
.each(function () {
|
|
if (this.id && BR.Util.localStorageAvailable() && localStorage[this.id] === 'true') {
|
|
self.shouldRestoreChart = true;
|
|
}
|
|
});
|
|
},
|
|
|
|
update: function (track, layer) {
|
|
this.clear();
|
|
|
|
// bring height indicator to front, because of track casing in BR.Routing
|
|
if (this._mouseHeightFocus) {
|
|
var g = this._mouseHeightFocus[0][0].parentNode;
|
|
g.parentNode.appendChild(g);
|
|
}
|
|
|
|
if (track && track.getLatLngs().length > 0) {
|
|
if (this.shouldRestoreChart === true) $('#elevation-chart').collapse('show');
|
|
this.shouldRestoreChart = undefined;
|
|
|
|
this.addData(track.toGeoJSON(), layer);
|
|
|
|
layer.on('mouseout', this._hidePositionMarker.bind(this));
|
|
} else {
|
|
if ($('#elevation-chart').hasClass('show')) {
|
|
this.shouldRestoreChart = true;
|
|
}
|
|
$('#elevation-chart').collapse('hide');
|
|
}
|
|
},
|
|
|
|
_keydownListener: function (e) {
|
|
if (BR.Util.keyboardShortcutsAllowed(e) && e.keyCode === this.options.shortcut.toggle) {
|
|
$('#elevation-btn').click();
|
|
}
|
|
},
|
|
});
|