ben/brouter-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Use Heightgraph in lieu of Elevation

Browse source
This commit is contained in:
alexcojocaru 2020-09-27 19:20:10 -07:00
parent 713d317ded
commit 840f4daf72
5 changed files with 345 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

5
js/index.js
View file

@ -198,7 +198,10 @@
} else {
stats = new BR.TrackStats();
}
elevation = new BR.Elevation();
// remove the old dep
// elevation = new BR.Elevation();
elevation = new BR.Heightgraph();
profile = new BR.Profile();
profile.on('update', function(evt) {

116
js/plugin/Elevation.js
View file

@ -1,116 +0,0 @@
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();
}
}
});

329
js/plugin/Heightgraph.js Normal file
View file

@ -0,0 +1,329 @@
BR.Heightgraph = L.Control.Heightgraph.extend({
options: {
width: $('#map').outerWidth(),
margins: {
top: 20,
right: 30,
bottom: 30,
left: 60
},
expandControls: false,
mappings: {
steepness: {
'-5': {
text: '16%+',
color: '#028306'
},
'-4': {
text: '10-15%',
color: '#2AA12E'
},
'-3': {
text: '7-9%',
color: '#53BF56'
},
'-2': {
text: '4-6%',
color: '#7BDD7E'
},
'-1': {
text: '1-3%',
color: '#A4FBA6'
},
'0': {
text: '0%',
color: '#ffcc99'
},
'1': {
text: '1-3%',
color: '#F29898'
},
'2': {
text: '4-6%',
color: '#E07575'
},
'3': {
text: '7-9%',
color: '#CF5352'
},
'4': {
text: '10-15%',
color: '#BE312F'
},
'5': {
text: '16%+',
color: '#AD0F0C'
}
},
waytypes: {
'0': {
text: 'Other',
color: '#30959e'
},
'1': {
text: 'StateRoad',
color: '#3f9da6'
},
'2': {
text: 'Road',
color: '#4ea5ae'
},
'3': {
text: 'Street',
color: '#5baeb5'
},
'4': {
text: 'Path',
color: '#67b5bd'
},
'5': {
text: 'Track',
color: '#73bdc4'
},
'6': {
text: 'Cycleway',
color: '#7fc7cd'
},
'7': {
text: 'Footway',
color: '#8acfd5'
},
'8': {
text: 'Steps',
color: '#96d7dc'
},
'9': {
text: 'Ferry',
color: '#a2dfe5'
},
'10': {
text: 'Construction',
color: '#ade8ed'
}
},
surface: {
'0': {
text: 'Other',
color: '#ddcdeb'
},
'1': {
text: 'Paved',
color: '#cdb8df'
},
'2': {
text: 'Unpaved',
color: '#d2c0e3'
},
'3': {
text: 'Asphalt',
color: '#bca4d3'
},
'4': {
text: 'Concrete',
color: '#c1abd7'
},
'5': {
text: 'Cobblestone',
color: '#c7b2db'
},
'6': {
text: 'Metal',
color: '#e8dcf3'
},
'7': {
text: 'Wood',
color: '#eee3f7'
},
'8': {
text: 'Compacted Gravel',
color: '#d8c6e7'
},
'9': {
text: 'Fine Gravel',
color: '#8f9de4'
},
'10': {
text: 'Gravel',
color: '#e3d4ef'
},
'11': {
text: 'Dirt',
color: '#99a6e7'
},
'12': {
text: 'Ground',
color: '#a3aeeb'
},
'13': {
text: 'Ice',
color: '#acb6ee'
},
'14': {
text: 'Salt',
color: '#b6c0f2'
},
'15': {
text: 'Sand',
color: '#c9d1f8'
},
'16': {
text: 'Woodchips',
color: '#c0c8f5'
},
'17': {
text: 'Grass',
color: '#d2dafc'
},
'18': {
text: 'Grass Paver',
color: '#dbe3ff'
}
},
suitability: {
'3': {
text: '3/10',
color: '#3D3D3D'
},
'4': {
text: '4/10',
color: '#4D4D4D'
},
'5': {
text: '5/10',
color: '#5D5D5D'
},
'6': {
text: '6/10',
color: '#6D6D6D'
},
'7': {
text: '7/10',
color: '#7C7C7C'
},
'8': {
text: '8/10',
color: '#8D8D8D'
},
'9': {
text: '9/10',
color: '#9D9D9D'
},
'10': {
text: '10/10',
color: '#ADADAD'
}
}
}
},
onAdd: function(map) {
var container = L.Control.Heightgraph.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) {
// heightgraph registers its own event handlers in _appendBackground()
//
// 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);
}
return container;
},
initialized: false,
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'));
// this function is also executed on window resize; hence,
// initialize the internal state on first call,
// otherwise reset it
if (this.initialized === true) {
this._removeMarkedSegmentsOnMap();
this._resetDrag();
this._onAddData();
} else {
// bind the the mouse move and mouse out handlers, I'll reuse them later on
this._mouseMoveHandlerBound = this._mapMousemoveHandler.bind(this);
this._mouseoutHandlerBound = this._mouseoutHandler.bind(this);
this.initialized = true;
// and render the chart
this.update();
}
},
update: function(track, layer) {
// 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) {
// TODO fix the geojson
// https://leafletjs.com/reference-1.6.0.html#layer
var geojson = track.toGeoJSON();
geojson.properties = { attributeType: 0 };
var data = [
{
type: 'FeatureCollection',
features: [geojson],
properties: {
Creator: 'OpenRouteService.org',
records: 1,
summary: 'steepness'
}
}
];
this.addData(data);
// this adds a blue track on the map, which only overwrites the pink brouter track
// L.geoJson(geojson).addTo(this._map);
// re-add handlers
if (layer) {
layer.on('mousemove', this._mouseMoveHandlerBound);
layer.on('mouseout', this._mouseoutHandlerBound);
}
} else {
this._removeMarkedSegmentsOnMap();
this._resetDrag();
// clear chart by passing an empty dataset
this.addData([]);
// and remove handlers
if (layer) {
layer.off('mousemove', this._mouseMoveHandlerBound);
layer.off('mouseout', this._mouseoutHandlerBound);
}
}
}
});

10
package.json
View file

@ -59,7 +59,6 @@
"leaflet-control-geocoder": "^1.13.0",
"leaflet-easybutton": "*",
"leaflet-editable": "^1.1.0",
"leaflet-elevation": "nrenner/Leaflet.Elevation#dev",
"leaflet-filelayer": "^1.2.0",
"leaflet-geometryutil": "^0.9.1",
"leaflet-hotline": "^0.4.0",
@ -68,6 +67,7 @@
"leaflet-routing": "nrenner/leaflet-routing#e94e153",
"leaflet-sidebar-v2": "nrenner/leaflet-sidebar-v2#dev",
"leaflet-triangle-marker": "^1.0.2",
"leaflet.heightgraph": "^1.3.2",
"leaflet.locatecontrol": "^0.60.0",
"leaflet.snogylop": "^0.4.0",
"leaflet.stravasegments": "2.3.2",
@ -173,11 +173,11 @@
"dist/css/bootstrap.css"
]
},
"leaflet-elevation": {
"leaflet.heightgraph": {
"main": [
"src/L.Control.Elevation.js",
"dist/leaflet.elevation-0.0.4.css",
"dist/images/*.png"
"src/L.Control.Heightgraph.js",
"src/L.Control.Heightgraph.css",
"src/img/*.svg"
],
"dependencies": null
},

11
yarn.lock
View file

@ -4886,10 +4886,6 @@ leaflet-editable@^1.1.0:
resolved "https://registry.yarnpkg.com/leaflet-editable/-/leaflet-editable-1.2.0.tgz#a3a01001764ba58ea923381ee6a1c814708a0b84"
integrity sha512-wG11JwpL8zqIbypTop6xCRGagMuWw68ihYu4uqrqc5Ep0wnEJeyob7NB2Rt5t74Oih4rwJ3OfwaGbzdowOGfYQ==
leaflet-elevation@nrenner/Leaflet.Elevation#dev:
version "0.0.4"
resolved "https://codeload.github.com/nrenner/Leaflet.Elevation/tar.gz/9ae6a3caef5f01abb3e55e05376df2e0046f7449"
leaflet-filelayer@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/leaflet-filelayer/-/leaflet-filelayer-1.2.0.tgz#9f822e68a06072b0b0a8f328ba9419ba96bbccb1"
@ -4935,6 +4931,13 @@ leaflet-triangle-marker@^1.0.2:
resolved "https://registry.yarnpkg.com/leaflet-triangle-marker/-/leaflet-triangle-marker-1.0.2.tgz#e4c5f1d09d10ae078f8fba87aa32e5884017ad96"
integrity sha512-J2Xa5UgUV6rU04bcwAdQRptnLm7nSxDtxqfX0Nzb+tz6p3buyEEBkXdOvEgzD6ghuII6BVSXFb4QP8cyVKigXg==
leaflet.heightgraph@^1.3.2:
version "1.3.2"
resolved "https://registry.yarnpkg.com/leaflet.heightgraph/-/leaflet.heightgraph-1.3.2.tgz#efec1c8c3cf2dad6c97761d8954043ff8f7ded27"
integrity sha512-GdNQdkxJziBItFwWPN8teeg4UUzQWEizh5w7VU9JJ8VNMSfqVCvk/D4aOFL6OhTAamUbFSYn6FWQAuyOJvQlSg==
dependencies:
leaflet "^1.6.0"
leaflet.locatecontrol@^0.60.0:
version "0.60.0"
resolved "https://registry.yarnpkg.com/leaflet.locatecontrol/-/leaflet.locatecontrol-0.60.0.tgz#fc7be657ca9b7e8b8ba7263e52b0bb902b7cd965"