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({
options: {
width: $('#map').outerWidth(),
margins: {
top: 15,
right: 30,
bottom: 30,
left: 70
},
expandControls: false,
mappings: {
gradient: {
'-5': {
text: '',
color: '#028306'
},
'-4': {
text: '',
color: '#2AA12E'
},
'-3': {
text: '',
color: '#53BF56'
},
'-2': {
text: '',
color: '#7BDD7E'
},
'-1': {
text: '',
color: '#A4FBA6'
},
'0': {
text: '',
color: '#ffcc99'
},
'1': {
text: '',
color: '#F29898'
},
'2': {
text: '',
color: '#E07575'
},
'3': {
text: '',
color: '#CF5352'
},
'4': {
text: '',
color: '#BE312F'
},
'5': {
text: '',
color: '#AD0F0C'
BR.Heightgraph = function(map, layersControl, routing, pois) {
Heightgraph = L.Control.Heightgraph.extend({
options: {
width: $('#map').outerWidth(),
margins: {
top: 15,
right: 30,
bottom: 30,
left: 70
},
expandControls: false,
mappings: {
gradient: {
'-5': {
text: '',
color: '#028306'
},
'-4': {
text: '',
color: '#2AA12E'
},
'-3': {
text: '',
color: '#53BF56'
},
'-2': {
text: '',
color: '#7BDD7E'
},
'-1': {
text: '',
color: '#A4FBA6'
},
'0': {
text: '',
color: '#ffcc99'
},
'1': {
text: '',
color: '#F29898'
},
'2': {
text: '',
color: '#E07575'
},
'3': {
text: '',
color: '#CF5352'
},
'4': {
text: '',
color: '#BE312F'
},
'5': {
text: '',
color: '#AD0F0C'
}
}
}
}
},
},
addBelow: function(map) {
// waiting for https://github.com/MrMufflon/Leaflet.Elevation/pull/66
// this.width($('#map').outerWidth());
this.options.width = $('#content').outerWidth();
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);
}
if (this.getContainer() != null) {
this.remove(map);
}
function setParent(el, newParent) {
newParent.appendChild(el);
}
this.addTo(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'));
// move elevation graph outside of the map
setParent(this.getContainer(), document.getElementById('elevation-chart'));
// 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);
// 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);
var self = this;
var container = $('#elevation-chart');
$(window).resize(function() {
// avoid useless computations if the chart is not visible
if (container.is(':visible')) {
var self = this;
var container = $('#elevation-chart');
$(window).resize(function() {
// avoid useless computations if the chart is not 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({
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({
width: container.width(),
height: container.height()
});
});
// and render the chart
this.update();
},
// 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) {
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);
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);
}
} 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);
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);
*/
/**
* @param {LatLng[]} latLngs an array of LatLng objects, guaranteed to be not empty
*/
_buildGeojsonFeatures: function(latLngs) {
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);
// re-add handlers
if (layer) {
layer.on('mousemove', this._mouseMoveHandlerBound);
layer.on('mouseout', this._mouseoutHandlerBound);
}
} 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);
}
this._removeMarkedSegmentsOnMap();
this._resetDrag();
// prepare for the next iteration
previousGradient = currentGradient;
}
// clear chart by passing an empty dataset
this.addData([]);
return [
{
type: 'FeatureCollection',
features: features,
properties: {
Creator: 'OpenRouteService.org',
records: features.length,
summary: 'gradient'
// and remove handlers
if (layer) {
layer.off('mousemove', this._mouseMoveHandlerBound);
layer.off('mouseout', this._mouseoutHandlerBound);
}
}
];
},
},
/**
* 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;
/**
* @param {LatLng[]} latLngs an array of LatLng objects, guaranteed to be not empty
*/
_buildGeojsonFeatures: function(latLngs) {
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 {
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;
};