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

Use Heightgraph transpiled

Browse source
This commit is contained in:
alexcojocaru 2020-10-23 13:02:46 -07:00
parent 5fd3977768
commit 77ed28cb76
3 changed files with 236 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

461
js/plugin/Heightgraph.js
View file

@ -1,255 +1,260 @@
BR.Heightgraph = L.Control.Heightgraph.extend({ BR.Heightgraph = function(map, layersControl, routing, pois) {
options: { Heightgraph = L.Control.Heightgraph.extend({
width: $('#map').outerWidth(), options: {
margins: { width: $('#map').outerWidth(),
top: 15, margins: {
right: 30, top: 15,
bottom: 30, right: 30,
left: 70 bottom: 30,
}, left: 70
expandControls: false, },
mappings: { expandControls: false,
gradient: { mappings: {
'-5': { gradient: {
text: '', '-5': {
color: '#028306' text: '',
}, color: '#028306'
'-4': { },
text: '', '-4': {
color: '#2AA12E' text: '',
}, color: '#2AA12E'
'-3': { },
text: '', '-3': {
color: '#53BF56' text: '',
}, color: '#53BF56'
'-2': { },
text: '', '-2': {
color: '#7BDD7E' text: '',
}, color: '#7BDD7E'
'-1': { },
text: '', '-1': {
color: '#A4FBA6' text: '',
}, color: '#A4FBA6'
'0': { },
text: '', '0': {
color: '#ffcc99' text: '',
}, color: '#ffcc99'
'1': { },
text: '', '1': {
color: '#F29898' text: '',
}, color: '#F29898'
'2': { },
text: '', '2': {
color: '#E07575' text: '',
}, color: '#E07575'
'3': { },
text: '', '3': {
color: '#CF5352' text: '',
}, color: '#CF5352'
'4': { },
text: '', '4': {
color: '#BE312F' text: '',
}, color: '#BE312F'
'5': { },
text: '', '5': {
color: '#AD0F0C' text: '',
color: '#AD0F0C'
}
} }
} }
} },
},
addBelow: function(map) { addBelow: function(map) {
// waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66 // waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66
// this.width($('#map').outerWidth()); // this.width($('#map').outerWidth());
this.options.width = $('#content').outerWidth(); this.options.width = $('#content').outerWidth();
if (this.getContainer() != null) { if (this.getContainer() != null) {
this.remove(map); this.remove(map);
} }
function setParent(el, newParent) { function setParent(el, newParent) {
newParent.appendChild(el); newParent.appendChild(el);
} }
this.addTo(map); this.addTo(map);
// move elevation graph outside of the map // move elevation graph outside of the map
setParent(this.getContainer(), document.getElementById('elevation-chart')); setParent(this.getContainer(), document.getElementById('elevation-chart'));
// bind the the mouse move and mouse out handlers, I'll reuse them later on // bind the the mouse move and mouse out handlers, I'll reuse them later on
this._mouseMoveHandlerBound = this.mapMousemoveHandler.bind(this); this._mouseMoveHandlerBound = this.mapMousemoveHandler.bind(this);
this._mouseoutHandlerBound = this._mouseoutHandler.bind(this); this._mouseoutHandlerBound = this._mouseoutHandler.bind(this);
var self = this; var self = this;
var container = $('#elevation-chart'); var container = $('#elevation-chart');
$(window).resize(function() { $(window).resize(function() {
// avoid useless computations if the chart is not visible // avoid useless computations if the chart is not visible
if (container.is(':visible')) { if (container.is(':visible')) {
self.resize({
width: container.width(),
height: container.height()
});
}
});
// Trigger the chart resize after the toggle animation is complete,
// in case the window was resized while the chart was not visible.
// The resize must be called after the animation (i.e. 'shown.bs.collapse')
// and cannot be called before the animation (i.e. 'show.bs.collapse'),
// for the container has the old width pre animation and new width post animation.
container.on('shown.bs.collapse', function() {
self.resize({ self.resize({
width: container.width(), width: container.width(),
height: container.height() height: container.height()
}); });
}
});
// Trigger the chart resize after the toggle animation is complete,
// in case the window was resized while the chart was not visible.
// The resize must be called after the animation (i.e. 'shown.bs.collapse')
// and cannot be called before the animation (i.e. 'show.bs.collapse'),
// for the container has the old width pre animation and new width post animation.
container.on('shown.bs.collapse', function() {
self.resize({
width: container.width(),
height: container.height()
}); });
});
// and render the chart // and render the chart
this.update(); this.update();
}, },
update: function(track, layer) { update: function(track, layer) {
// bring height indicator to front, because of track casing in BR.Routing // bring height indicator to front, because of track casing in BR.Routing
if (this._mouseHeightFocus) { if (this._mouseHeightFocus) {
var g = this._mouseHeightFocus[0][0].parentNode; var g = this._mouseHeightFocus[0][0].parentNode;
g.parentNode.appendChild(g); g.parentNode.appendChild(g);
}
if (track && track.getLatLngs().length > 0) {
var geojsonFeatures = this._buildGeojsonFeatures(track.getLatLngs());
this.addData(geojsonFeatures);
// TODO
/*
var geojson = track.toGeoJSON();
geojson.properties = { attributeType: 0 };
var data = [
{
type: 'FeatureCollection',
features: [geojson],
properties: {
Creator: 'OpenRouteService.org',
records: 1,
summary: 'gradient'
}
}
];
this.addData(data);
*/
// 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 if (track && track.getLatLngs().length > 0) {
this.addData([]); var geojsonFeatures = this._buildGeojsonFeatures(track.getLatLngs());
this.addData(geojsonFeatures);
// and remove handlers // TODO
if (layer) { /*
layer.off('mousemove', this._mouseMoveHandlerBound); var geojson = track.toGeoJSON();
layer.off('mouseout', this._mouseoutHandlerBound); geojson.properties = { attributeType: 0 };
var data = [
{
type: 'FeatureCollection',
features: [geojson],
properties: {
Creator: 'OpenRouteService.org',
records: 1,
summary: 'gradient'
} }
} }
}, ];
this.addData(data);
*/
/** // re-add handlers
* @param {LatLng[]} latLngs an array of LatLng objects, guaranteed to be not empty if (layer) {
*/ layer.on('mousemove', this._mouseMoveHandlerBound);
_buildGeojsonFeatures: function(latLngs) { layer.on('mouseout', this._mouseoutHandlerBound);
var features = []; }
// this is going to be initialized in the first iteration
var currentFeature;
// undefined is fine, as it will be different than the next gradient
var previousGradient;
for (var i = 1; i < latLngs.length; i++) {
var previousPoint = latLngs[i - 1];
var currentPoint = latLngs[i];
var dist = currentPoint.distanceTo(previousPoint); // never negative
var altDelta = currentPoint.alt - previousPoint.alt;
var currentGradientPercentage = (altDelta * 100) / dist;
var currentGradient = dist == 0 ? 0 : this._mapGradient(currentGradientPercentage);
// TODO
/*
console.log("gradient %:", currentGradientPercentage,
"; gradient level:", currentGradient,
"; dist:", dist,
"; alt:", altDelta,
"; previous point:", previousPoint.lng, previousPoint.lat, previousPoint.alt,
"; current point:", currentPoint.lng, currentPoint.lat, currentPoint.alt);
*/
var coordinate = [currentPoint.lng, currentPoint.lat, currentPoint.alt];
if (currentGradient == previousGradient) {
currentFeature.geometry.coordinates.push(coordinate);
} else { } else {
currentFeature = { this._removeMarkedSegmentsOnMap();
type: 'Feature', this._resetDrag();
geometry: {
type: 'LineString',
coordinates: [
// each feature starts with the last point on the previous feature;
// that will also take care of inserting the firstmost point
// (latLngs[0]) at position 0 into the first feature in the list
[previousPoint.lng, previousPoint.lat, previousPoint.alt],
coordinate
]
},
properties: {
attributeType: currentGradient
}
};
features.push(currentFeature);
}
// prepare for the next iteration // clear chart by passing an empty dataset
previousGradient = currentGradient; this.addData([]);
}
return [ // and remove handlers
{ if (layer) {
type: 'FeatureCollection', layer.off('mousemove', this._mouseMoveHandlerBound);
features: features, layer.off('mouseout', this._mouseoutHandlerBound);
properties: {
Creator: 'OpenRouteService.org',
records: features.length,
summary: 'gradient'
} }
} }
]; },
},
/** /**
* Map a gradient percentage to one of the levels defined * @param {LatLng[]} latLngs an array of LatLng objects, guaranteed to be not empty
* in options.mappings.gradient. */
*/ _buildGeojsonFeatures: function(latLngs) {
_mapGradient: function(gradientPercentage) { var features = [];
if (gradientPercentage <= -16) {
return -5; // this is going to be initialized in the first iteration
} else if (gradientPercentage > -16 && gradientPercentage <= -10) { var currentFeature;
return -4; // undefined is fine, as it will be different than the next gradient
} else if (gradientPercentage > -10 && gradientPercentage <= -7) { var previousGradient;
return -3; for (var i = 1; i < latLngs.length; i++) {
} else if (gradientPercentage > -7 && gradientPercentage <= -4) { var previousPoint = latLngs[i - 1];
return -2; var currentPoint = latLngs[i];
} else if (gradientPercentage > -4 && gradientPercentage <= -1) {
return -1; var dist = currentPoint.distanceTo(previousPoint); // never negative
} else if (gradientPercentage > -1 && gradientPercentage < 1) { var altDelta = currentPoint.alt - previousPoint.alt;
return 0; var currentGradientPercentage = (altDelta * 100) / dist;
} else if (gradientPercentage >= 1 && gradientPercentage < 4) { var currentGradient = dist == 0 ? 0 : this._mapGradient(currentGradientPercentage);
return 1; // TODO
} else if (gradientPercentage >= 4 && gradientPercentage < 7) { /*
return 2; console.log("gradient %:", currentGradientPercentage,
} else if (gradientPercentage >= 7 && gradientPercentage < 10) { "; gradient level:", currentGradient,
return 3; "; dist:", dist,
} else if (gradientPercentage >= 10 && gradientPercentage < 16) { "; alt:", altDelta,
return 4; "; previous point:", previousPoint.lng, previousPoint.lat, previousPoint.alt,
} else if (gradientPercentage >= 16) { "; current point:", currentPoint.lng, currentPoint.lat, currentPoint.alt);
return 5; */
var coordinate = [currentPoint.lng, currentPoint.lat, currentPoint.alt];
if (currentGradient == previousGradient) {
currentFeature.geometry.coordinates.push(coordinate);
} else {
currentFeature = {
type: 'Feature',
geometry: {
type: 'LineString',
coordinates: [
// each feature starts with the last point on the previous feature;
// that will also take care of inserting the firstmost point
// (latLngs[0]) at position 0 into the first feature in the list
[previousPoint.lng, previousPoint.lat, previousPoint.alt],
coordinate
]
},
properties: {
attributeType: currentGradient
}
};
features.push(currentFeature);
}
// prepare for the next iteration
previousGradient = currentGradient;
}
return [
{
type: 'FeatureCollection',
features: features,
properties: {
Creator: 'OpenRouteService.org',
records: features.length,
summary: 'gradient'
}
}
];
},
/**
* Map a gradient percentage to one of the levels defined
* in options.mappings.gradient.
*/
_mapGradient: function(gradientPercentage) {
if (gradientPercentage <= -16) {
return -5;
} else if (gradientPercentage > -16 && gradientPercentage <= -10) {
return -4;
} else if (gradientPercentage > -10 && gradientPercentage <= -7) {
return -3;
} else if (gradientPercentage > -7 && gradientPercentage <= -4) {
return -2;
} else if (gradientPercentage > -4 && gradientPercentage <= -1) {
return -1;
} else if (gradientPercentage > -1 && gradientPercentage < 1) {
return 0;
} else if (gradientPercentage >= 1 && gradientPercentage < 4) {
return 1;
} else if (gradientPercentage >= 4 && gradientPercentage < 7) {
return 2;
} else if (gradientPercentage >= 7 && gradientPercentage < 10) {
return 3;
} else if (gradientPercentage >= 10 && gradientPercentage < 16) {
return 4;
} else if (gradientPercentage >= 16) {
return 5;
}
} }
} });
});
var heightgraphControl = new Heightgraph();
return heightgraphControl;
};

8
package.json
View file

@ -46,7 +46,6 @@
"bootstrap-select": "1.13.6", "bootstrap-select": "1.13.6",
"bootstrap-slider": "^9.8.1", "bootstrap-slider": "^9.8.1",
"codemirror": "^5.35.0", "codemirror": "^5.35.0",
"d3": "~3.5.5",
"datatables": "~1.10.18", "datatables": "~1.10.18",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"i18next": "^15.0.4", "i18next": "^15.0.4",
@ -175,11 +174,10 @@
}, },
"leaflet.heightgraph": { "leaflet.heightgraph": {
"main": [ "main": [
"src/L.Control.Heightgraph.js", "dist/L.Control.Heightgraph.js",
"src/L.Control.Heightgraph.css", "src/L.Control.Heightgraph.css",
"src/img/*.svg" "dist/img/*.svg"
], ]
"dependencies": null
}, },
"leaflet-control-geocoder": { "leaflet-control-geocoder": {
"main": [ "main": [

5
yarn.lock
View file

@ -2552,11 +2552,6 @@ d3-voronoi@1.1.2:
resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c" resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"
integrity sha1-Fodmfo8TotFYyAwUgMWinLDYlzw= integrity sha1-Fodmfo8TotFYyAwUgMWinLDYlzw=
d3@~3.5.5:
version "3.5.17"
resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
integrity sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=
d@1: d@1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a" resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"