Use Heightgraph transpiled
This commit is contained in:
alexcojocaru
parent
5fd3977768
commit
77ed28cb76
3 changed files with 236 additions and 238 deletions
|
|
@ -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;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -46,7 +46,6 @@
|
|||
"bootstrap-select": "1.13.6",
|
||||
"bootstrap-slider": "^9.8.1",
|
||||
"codemirror": "^5.35.0",
|
||||
"d3": "~3.5.5",
|
||||
"datatables": "~1.10.18",
|
||||
"font-awesome": "^4.7.0",
|
||||
"i18next": "^15.0.4",
|
||||
|
|
@ -175,11 +174,10 @@
|
|||
},
|
||||
"leaflet.heightgraph": {
|
||||
"main": [
|
||||
"src/L.Control.Heightgraph.js",
|
||||
"dist/L.Control.Heightgraph.js",
|
||||
"src/L.Control.Heightgraph.css",
|
||||
"src/img/*.svg"
|
||||
],
|
||||
"dependencies": null
|
||||
"dist/img/*.svg"
|
||||
]
|
||||
},
|
||||
"leaflet-control-geocoder": {
|
||||
"main": [
|
||||
|
|
|
|||
|
|
@ -2552,11 +2552,6 @@ d3-voronoi@1.1.2:
|
|||
resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"
|
||||
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:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue