323 lines
13 KiB
JavaScript
323 lines
13 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;
|
|
|
|
var features = [];
|
|
|
|
// this is going to be initialized on the first buffer flush, no need to initialize now
|
|
var currentFeature;
|
|
|
|
// undefined is fine, as it will be different than the current gradient
|
|
// when the buffer is flushed for the first time
|
|
var previousGradient;
|
|
|
|
// since the altitude coordinate on points is not very reliable, let's normalize it
|
|
// by averaging the gradient over several point (within the min distance defined below)
|
|
var buffer = [];
|
|
var bufferDistance = 0;
|
|
|
|
// the minimum distance (in meters) between the points in the buffer;
|
|
// once reached, the buffer is flushed;
|
|
// 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);
|
|
var bufferMinDistance = Math.max(totalDistance / 200, 200);
|
|
|
|
if (latLngs.length > 0) {
|
|
buffer.push(latLngs[0]);
|
|
}
|
|
for (var i = 1; i < latLngs.length; i++) {
|
|
buffer.push(latLngs[i]); // the buffer contains at least 2 points by now
|
|
bufferDistance =
|
|
bufferDistance +
|
|
// never negative
|
|
buffer[buffer.length - 1].distanceTo(buffer[buffer.length - 2]);
|
|
|
|
// if we reached the tipping point,
|
|
// each point in the buffer gets the same gradient rating,
|
|
// and the buffer is flushed into the existing feature or a new one
|
|
if (bufferDistance >= bufferMinDistance) {
|
|
var currentGradient = self._calculateGradient(buffer);
|
|
|
|
if (currentGradient == previousGradient) {
|
|
// the gradient hasn't changed, we can flush the buffer into the last feature;
|
|
// since the buffer contains, at index 0,
|
|
// the last point on the feature (it was pushed into it on buffer reset),
|
|
// add only points from index 1 onward
|
|
self._addPointsToFeature(currentFeature, buffer.slice(1));
|
|
} else {
|
|
// the gradient has changed; flush into a new feature
|
|
currentFeature = self._buildFeature(buffer, currentGradient);
|
|
features.push(currentFeature);
|
|
}
|
|
|
|
// reset to prepare for the next iteration
|
|
previousGradient = currentGradient;
|
|
var lastPoint = buffer[buffer.length - 1]; // before clearing the buffer
|
|
buffer = [lastPoint];
|
|
bufferDistance = 0;
|
|
}
|
|
}
|
|
|
|
// handle the remaining points in the buffer
|
|
if (typeof currentFeature === 'undefined') {
|
|
// no feature was build so far
|
|
if (buffer.length > 1) {
|
|
// building a feature with the few points on the route
|
|
var currentGradient = self._calculateGradient(buffer);
|
|
currentFeature = self._buildFeature(buffer, currentGradient);
|
|
features.push(currentFeature);
|
|
}
|
|
} else {
|
|
// adding the extra points to the last feature;
|
|
// since the buffer contains, at index 0,
|
|
// the last point on the feature (it was pushed into it on buffer reset),
|
|
// add only points from index 1 onward
|
|
self._addPointsToFeature(currentFeature, buffer.slice(1));
|
|
}
|
|
|
|
return [
|
|
{
|
|
type: 'FeatureCollection',
|
|
features: features,
|
|
properties: {
|
|
Creator: 'OpenRouteService.org',
|
|
records: features.length,
|
|
summary: 'gradient'
|
|
}
|
|
}
|
|
];
|
|
},
|
|
|
|
/**
|
|
* 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.
|
|
* The array must have at least 2 elements.
|
|
*/
|
|
_calculateGradient: function(latLngs) {
|
|
// the array is guaranteed to have 2+ elements
|
|
var altDelta = latLngs[latLngs.length - 1].alt - latLngs[0].alt;
|
|
var distance = this._calculateDistance(latLngs);
|
|
|
|
var currentGradientPercentage = distance == 0 ? 0 : (altDelta * 100) / distance;
|
|
var currentGradient = this._mapGradient(currentGradientPercentage);
|
|
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
|
|
// coordinates: [[point1.lng, point1.lat, point1.alt], [point2.lng, point2.lat, point2.alt]]
|
|
},
|
|
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;
|
|
};
|