435 lines
17 KiB
JavaScript
435 lines
17 KiB
JavaScript
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: '- 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'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
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'));
|
|
|
|
// 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')) {
|
|
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();
|
|
},
|
|
|
|
update: function(track, layer) {
|
|
// bring height indicator to front, because of track casing in BR.Routing
|
|
if (this._mouseHeightFocus) {
|
|
var g = this._mouseHeightFocus._groups[0][0].parentNode;
|
|
g.parentNode.appendChild(g);
|
|
}
|
|
|
|
if (track && track.getLatLngs().length > 0) {
|
|
var geojsonFeatures = this._buildGeojsonFeatures(track.getLatLngs());
|
|
this.addData(geojsonFeatures);
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
},
|
|
|
|
/**
|
|
* @param {LatLng[]} latLngs an array of LatLng objects, guaranteed to be not empty
|
|
*/
|
|
_buildGeojsonFeatures: function(latLngs) {
|
|
var self = this;
|
|
// TODO set the alt to undefined on the first few points
|
|
// TODO set the alt to undefined on the last few points
|
|
// TODO set the alt to undefined on the first and last few points
|
|
// TODO set the alt to undefined on all but first point
|
|
// TODO set the alt to undefined on all but last point
|
|
// TODO set the alt to undefined on all points
|
|
// TODO set the alt to undefined on all between first and last points
|
|
// TODO set the alt to undefined on all between first and middle point, and on all between middle and last point
|
|
|
|
var mockLatLngs = [];
|
|
for (var i = 0; i < 15; i++) {
|
|
var p = latLngs[i];
|
|
var alt = i >= 2 && i < 13 ? p.alt : undefined;
|
|
mockLatLngs.push(L.latLng(p.lng, p.lat, alt));
|
|
console.log('' + mockLatLngs[i].lng + ', ' + mockLatLngs[i].lat + ', ' + mockLatLngs[i].alt);
|
|
}
|
|
latLngs = mockLatLngs;
|
|
/*
|
|
var j = '[';
|
|
for (var i = 0; i < latLngs.length; i++) j+=(i>0?',':'')+'{lng:'+latLngs[i].lng+',lat:'+latLngs[i].lat+',alt:'+latLngs[i].alt+'}';
|
|
j+=']';
|
|
console.log(j);
|
|
*/
|
|
|
|
|
|
// since the altitude coordinate on points is not very reliable, let's normalize it
|
|
// by taking into account only the altitude on points at a given min distance
|
|
|
|
// the minimum distance (in meters) between points which we consider
|
|
// for the purpose of calculating altitudes and gradients;
|
|
// consider 200 segments on the route, at least 200m long each
|
|
// for short routes, make sure we still have enough of a distance to normalize over;
|
|
// for long routes, we can afford to normalized over a longer distance,
|
|
// hence increasing the accuracy
|
|
var totalDistance = self._calculateDistance(latLngs);
|
|
console.log('totalDistance:', totalDistance);
|
|
var bufferMinDistance = Math.max(totalDistance / 200, 200);
|
|
console.log('bufferMinDistance:', bufferMinDistance);
|
|
|
|
var segments = self._partitionByMinDistance(latLngs, bufferMinDistance);
|
|
|
|
var features = [];
|
|
|
|
// this is going to be initialized in the first loop, no need to initialize now
|
|
var currentFeature;
|
|
|
|
// undefined is fine, as it will be different to the current gradient in the first loop
|
|
var previousGradient;
|
|
|
|
segments.forEach(function(segment) {
|
|
var currentGradient = self._calculateGradient(segment);
|
|
console.log('currentGradient: ' + currentGradient);
|
|
|
|
if (typeof currentGradient === 'undefined') {
|
|
// not enough points on the segment to calculate the gradient
|
|
currentFeature = self._buildFeature(segment, currentGradient);
|
|
console.log('new currentFeature for no gradient: ' + currentFeature);
|
|
features.push(currentFeature);
|
|
console.log('features so far for no gradient: ' + features);
|
|
} else if (currentGradient == previousGradient) {
|
|
// the gradient hasn't changed, we can append this segment to the last feature;
|
|
// since the segment contains, at index 0 the last point on the feature,
|
|
// add only points from index 1 onward
|
|
self._addPointsToFeature(currentFeature, segment.slice(1));
|
|
console.log('existing currentFeature: ' + currentFeature);
|
|
} else {
|
|
// the gradient has changed; create a new feature
|
|
currentFeature = self._buildFeature(segment, currentGradient);
|
|
console.log('new currentFeature: ' + currentFeature);
|
|
features.push(currentFeature);
|
|
console.log('features so far for no gradient: ' + features);
|
|
}
|
|
|
|
// reset to prepare for the next iteration
|
|
previousGradient = currentGradient;
|
|
});
|
|
console.log('final features: ' + features);
|
|
|
|
// TODO when elevation profile is open, the toggle button should be blue, not gray
|
|
|
|
return [
|
|
{
|
|
type: 'FeatureCollection',
|
|
features: features,
|
|
properties: {
|
|
Creator: 'OpenRouteService.org',
|
|
records: features.length,
|
|
summary: 'gradient'
|
|
}
|
|
}
|
|
];
|
|
},
|
|
|
|
/**
|
|
* Given the list of latLng points, partition them into segments
|
|
* at least _minDistance__ meters long,
|
|
* where the first and last points always have a valid altitude.
|
|
* NOTE: Given that some of the given points might not have a valid altitude,
|
|
* the first point(s) in the first buffer, as well as the last point(s)
|
|
* in the last buffer, might not have a valid altitude.
|
|
*/
|
|
_partitionByMinDistance: function(latLngs, minDistance) {
|
|
var segments = [];
|
|
|
|
// temporary buffer where we add points
|
|
// until the distance between them is at least minDistance
|
|
var buffer = [];
|
|
|
|
// push all points up to (and including) the first one with a valid altitude
|
|
var index = 0;
|
|
for (; index < latLngs.length; index++) {
|
|
var latLng = latLngs[index];
|
|
buffer.push(latLng);
|
|
if (typeof latLng.alt !== 'undefined') {
|
|
break;
|
|
}
|
|
}
|
|
console.log('buffer init: ' + buffer);
|
|
|
|
var bufferDistance = this._calculateDistance(buffer);
|
|
console.log('buffer distance init: ' + bufferDistance);
|
|
for (; index < latLngs.length; index++) {
|
|
var latLng = latLngs[index];
|
|
buffer.push(latLng); // the buffer contains at least 2 points by now
|
|
bufferDistance =
|
|
bufferDistance +
|
|
// never negative
|
|
buffer[buffer.length - 1].distanceTo(buffer[buffer.length - 2]);
|
|
console.log('buffer distance: ' + bufferDistance);
|
|
console.log('latLng.alt: ' + latLng.alt);
|
|
|
|
// if we reached the tipping point, add the buffer to segments, then flush it;
|
|
// if this point doesn't have a valid alt, continue to the next one
|
|
if (bufferDistance >= minDistance && typeof latLng.alt !== 'undefined') {
|
|
console.log('wrapping up');
|
|
segments.push(buffer);
|
|
console.log('segments so far: ' + segments);
|
|
// re-init the buffer with the last point from the previous buffer
|
|
buffer = [buffer[buffer.length - 1]];
|
|
console.log('buffer re-init: ' + buffer);
|
|
bufferDistance = 0;
|
|
}
|
|
}
|
|
console.log('complete segments: ' + segments);
|
|
console.log('remaining buffer: ' + buffer);
|
|
|
|
// if the buffer is not empty, add all points from it into the last segment
|
|
if (segments.length === 0) {
|
|
segments.push(buffer);
|
|
} else if (buffer.length > 0) {
|
|
var lastSegment = segments[segments.length - 1];
|
|
buffer.forEach(function(p) {
|
|
lastSegment.push(p);
|
|
});
|
|
}
|
|
console.log('final segments: ' + segments);
|
|
|
|
return segments;
|
|
},
|
|
|
|
/**
|
|
* Calculate the distance between all LatLng points in the given array.
|
|
*/
|
|
_calculateDistance: function(latLngs) {
|
|
var distance = 0;
|
|
for (var i = 1; i < latLngs.length; i++) {
|
|
distance += latLngs[i].distanceTo(latLngs[i - 1]); // never negative
|
|
}
|
|
return distance;
|
|
},
|
|
|
|
/**
|
|
* Calculate the gradient between the first and last point in the LatLng array,
|
|
* and map it to a gradient level.
|
|
* If less than 2 points have an altitude coordinate, the 0 gradient is returned.
|
|
*/
|
|
_calculateGradient: function(latLngs) {
|
|
console.log('calculating gradient for latLngs: ' + latLngs);
|
|
if (latLngs.length < 2) {
|
|
console.log('too few points');
|
|
return this._mapGradient(0);
|
|
}
|
|
|
|
// find the index of the first point with a valid altitude
|
|
var firstIndex = -1;
|
|
for (var i = 0; i < latLngs.length; i++) {
|
|
if (typeof latLngs[i].alt !== 'undefined') {
|
|
firstIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
console.log('firstIndex:', firstIndex);
|
|
// if no point with a valid altitude was found, there's not much to do here
|
|
if (firstIndex == -1) {
|
|
return this._mapGradient(0);
|
|
}
|
|
|
|
// find the index of the last point with a valid altitude
|
|
var lastIndex = latLngs.length;
|
|
for (var i = latLngs.length - 1; i > firstIndex; i--) {
|
|
if (typeof latLngs[i].alt !== 'undefined') {
|
|
lastIndex = i;
|
|
break;
|
|
}
|
|
}
|
|
console.log('lastIndex:', lastIndex);
|
|
// if no point with a valid altitude was found between firstIndex and end of array,
|
|
// there's not much else to do
|
|
if (lastIndex == latLngs.length) {
|
|
return this._mapGradient(0);
|
|
}
|
|
|
|
var altDelta = latLngs[lastIndex].alt - latLngs[firstIndex].alt;
|
|
console.log('altDelta:', altDelta);
|
|
|
|
// calculate the distance only from firstIndex to lastIndex;
|
|
// points before or after don't have a valid altitude,
|
|
// hence they are not included in the gradient calculation
|
|
var distance = this._calculateDistance(latLngs.slice(firstIndex, lastIndex + 1));
|
|
console.log('distance', distance);
|
|
|
|
var currentGradientPercentage = distance == 0 ? 0 : (altDelta * 100) / distance;
|
|
console.log('currentGradientPercentage:', currentGradientPercentage);
|
|
var currentGradient = this._mapGradient(currentGradientPercentage);
|
|
console.log('currentGradient:', currentGradient);
|
|
return currentGradient;
|
|
},
|
|
|
|
/**
|
|
* Add the given array of LatLng points to the end of the provided feature.
|
|
*/
|
|
_addPointsToFeature: function(feature, latLngs) {
|
|
latLngs.forEach(function(point) {
|
|
var coordinate = [point.lng, point.lat, point.alt];
|
|
feature.geometry.coordinates.push(coordinate);
|
|
});
|
|
},
|
|
|
|
_buildFeature: function(latLngs, gradient) {
|
|
var coordinates = [];
|
|
latLngs.forEach(function(latLng) {
|
|
coordinates.push([latLng.lng, latLng.lat, latLng.alt]);
|
|
});
|
|
|
|
return {
|
|
type: 'Feature',
|
|
geometry: {
|
|
type: 'LineString',
|
|
coordinates: coordinates
|
|
},
|
|
properties: {
|
|
attributeType: 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;
|
|
};
|