From 840f4daf72c70ac3d32ca217b89889a8672de03f Mon Sep 17 00:00:00 2001 From: alexcojocaru Date: Sun, 27 Sep 2020 19:20:10 -0700 Subject: [PATCH] Use Heightgraph in lieu of Elevation --- js/index.js | 5 +- js/plugin/Elevation.js | 116 -------------- js/plugin/Heightgraph.js | 329 +++++++++++++++++++++++++++++++++++++++ package.json | 10 +- yarn.lock | 11 +- 5 files changed, 345 insertions(+), 126 deletions(-) delete mode 100644 js/plugin/Elevation.js create mode 100644 js/plugin/Heightgraph.js diff --git a/js/index.js b/js/index.js index 476e588..fbb0997 100644 --- a/js/index.js +++ b/js/index.js @@ -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) { diff --git a/js/plugin/Elevation.js b/js/plugin/Elevation.js deleted file mode 100644 index cc10843..0000000 --- a/js/plugin/Elevation.js +++ /dev/null @@ -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(); - } - } -}); diff --git a/js/plugin/Heightgraph.js b/js/plugin/Heightgraph.js new file mode 100644 index 0000000..f3fa51c --- /dev/null +++ b/js/plugin/Heightgraph.js @@ -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); + } + } + } +}); diff --git a/package.json b/package.json index 015a18b..2d1fafb 100644 --- a/package.json +++ b/package.json @@ -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 }, diff --git a/yarn.lock b/yarn.lock index 3f448d4..81b9477 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"