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

Disable gradient normalization in profile; add legend

Browse source
This commit is contained in:
alexcojocaru 2024-02-25 15:45:59 -08:00 • committed by Gautier P
parent 135340781d
commit 12dc322a54
4 changed files with 218 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

4
css/style.css
View file

@ -970,12 +970,8 @@ table.dataTable.display tbody tr:hover.selected {
/* /*
* Heightgraph customizations; * Heightgraph customizations;
* since the legend and the gradient types are in the way, hide them;
* since there's only the gradient layer, hide the layer selector. * since there's only the gradient layer, hide the layer selector.
*/ */
.legend-hover {
display: none;
}
#selectionText { #selectionText {
display: none; display: none;
} }

256
js/plugin/Heightgraph.js
View file

@ -11,49 +11,137 @@ BR.Heightgraph = function (map, layersControl, routing, pois) {
expandControls: false, expandControls: false,
mappings: { mappings: {
gradient: { gradient: {
'-16': {
text: '< -15%',
color: '#81A850',
},
'-15': {
text: '-15%',
color: '#89AA55',
},
'-14': {
text: '-14%',
color: '#91AD59',
},
'-13': {
text: '-13%',
color: '#99AF5E',
},
'-12': {
text: '-12%',
color: '#A1B162',
},
'-11': {
text: '-11%',
color: '#A8B367',
},
'-10': {
text: '-10%',
color: '#B0B66B',
},
'-9': {
text: '-9%',
color: '#B8B870',
},
'-8': {
text: '-8%',
color: '#C0BA75',
},
'-7': {
text: '-7%',
color: '#C8BC79',
},
'-6': {
text: '-6%',
color: '#D0BF7E',
},
'-5': { '-5': {
text: '- 16%+', text: '-5%',
color: '#028306', color: '#D8C182',
}, },
'-4': { '-4': {
text: '- 10-15%', text: '-4%',
color: '#2AA12E', color: '#E0C387',
}, },
'-3': { '-3': {
text: '- 7-9%', text: '-3%',
color: '#53BF56', color: '#E7C58B',
}, },
'-2': { '-2': {
text: '- 4-6%', text: '-2%',
color: '#7BDD7E', color: '#EFC890',
}, },
'-1': { '-1': {
text: '- 1-3%', text: '-1%',
color: '#A4FBA6', color: '#F7CA94',
}, },
0: { 0: {
text: '0%', text: '0%',
color: '#ffcc99', color: '#FFCC99',
}, },
1: { 1: {
text: '1-3%', text: '1%',
color: '#F29898', color: '#FCC695',
}, },
2: { 2: {
text: '4-6%', text: '2%',
color: '#E07575', color: '#FAC090',
}, },
3: { 3: {
text: '7-9%', text: '3%',
color: '#CF5352', color: '#F7BA8C',
}, },
4: { 4: {
text: '10-15%', text: '4%',
color: '#BE312F', color: '#F5B588',
}, },
5: { 5: {
text: '16%+', text: '5%',
color: '#AD0F0C', color: '#F2AF83',
},
6: {
text: '6%',
color: '#F0A97F',
},
7: {
text: '7%',
color: '#EDA37A',
},
8: {
text: '8%',
color: '#EB9D76',
},
9: {
text: '9%',
color: '#E89772',
},
10: {
text: '10%',
color: '#E5916D',
},
11: {
text: '11%',
color: '#E38B69',
},
12: {
text: '12%',
color: '#E08665',
},
13: {
text: '13%',
color: '#DE8060',
},
14: {
text: '14%',
color: '#DB7A5C',
},
15: {
text: '15%',
color: '#D97457',
},
16: {
text: '> 15%',
color: '#D66E53',
}, },
}, },
}, },
@ -167,29 +255,10 @@ BR.Heightgraph = function (map, layersControl, routing, pois) {
} else { } else {
$('#no-elevation-data').hide(); $('#no-elevation-data').hide();
} }
var chartWidth;
if (document.getElementsByClassName('heightgraph-container').length > 0) {
var hgElement = document.getElementsByClassName('heightgraph-container')[0];
if (hgElement.getElementsByTagName('g').length > 0) {
hgGElement = hgElement.getElementsByTagName('g')[0];
if (hgGElement.getElementsByClassName('grid').length > 1) {
hgGRectElement = hgGElement.getElementsByClassName('grid')[1];
chartWidth = hgGRectElement.getBoundingClientRect().width;
}
}
}
// if I cannot get the chart width (e.g. the chart is not visible),
// get the width of the content element - that's close enough
if (typeof chartWidth === 'undefined' || chartWidth === 0) {
var contentElement = document.getElementById('content');
if (contentElement) {
chartWidth = contentElement.getBoundingClientRect().width;
}
}
var geojsonFeatures = geoDataExchange.buildGeojsonFeatures(track.getLatLngs(), { var geojsonFeatures = geoDataExchange.buildGeojsonFeatures(track.getLatLngs(), {
interpolate: false, interpolate: false,
normalize: true, normalize: false,
chartWidthInPixels: chartWidth,
}); });
this.addData(geojsonFeatures); this.addData(geojsonFeatures);
@ -220,6 +289,109 @@ BR.Heightgraph = function (map, layersControl, routing, pois) {
$('#elevation-chart').collapse('hide'); $('#elevation-chart').collapse('hide');
} }
}, },
_createLegend: function () {
if (this._categories.length > 0) {
// find the min and the max gradients for the current profile
var minGradient = 16;
var maxGradient = -16;
// this legend object has the profile gradients as keys; it was built by heightgraph
var allLegend = this._categories[this.options.selectedAttributeIdx].legend;
for (key in allLegend) {
var gradient = parseInt(key);
if (minGradient > gradient) {
minGradient = gradient;
}
if (maxGradient < gradient) {
maxGradient = gradient;
}
}
// define the simplified legend with all known gradients
var simplifiedLegend = [
{
type: -16,
text: this.options.mappings.gradient['-16'].text,
color: this.options.mappings.gradient['-16'].color,
},
{
type: -10,
text: this.options.mappings.gradient['-10'].text,
color: this.options.mappings.gradient['-10'].color,
},
{
type: -5,
text: this.options.mappings.gradient['-5'].text,
color: this.options.mappings.gradient['-5'].color,
},
{
type: 0,
text: this.options.mappings.gradient['0'].text,
color: this.options.mappings.gradient['0'].color,
},
{
type: 5,
text: this.options.mappings.gradient['5'].text,
color: this.options.mappings.gradient['5'].color,
},
{
type: 10,
text: this.options.mappings.gradient['10'].text,
color: this.options.mappings.gradient['10'].color,
},
{
type: 16,
text: this.options.mappings.gradient['16'].text,
color: this.options.mappings.gradient['16'].color,
},
];
// then, keep only the range relevant to the current profile
// (e.g. if min gradient of profile is -6, remove -16 and -15 from range)
for (var i = 0; i < simplifiedLegend.length; i++) {
if (simplifiedLegend[i].type > minGradient) {
simplifiedLegend.splice(0, i - 1);
break;
}
}
for (var i = simplifiedLegend.length - 1; i > -1; i--) {
if (simplifiedLegend[i].type < maxGradient) {
simplifiedLegend.splice(i + 2);
break;
}
}
this._categories[this.options.selectedAttributeIdx].legend = simplifiedLegend;
}
var existingLegend = document.querySelector('.legend-container');
if (existingLegend !== null) {
existingLegend.remove();
}
var legend = L.DomUtil.create('div', 'legend-container', this._container);
// hack to keep the chart from getting too tall,
// and to keep it from growing vertically on window resize
legend.style.setProperty('position', 'absolute');
// naively align the legend vertically with the y-axis
legend.style.setProperty('margin-left', '65px');
legend.style.setProperty('margin-top', '-18px');
var legendLabel = L.DomUtil.create('span', 'legend-hover legend-text', legend);
legendLabel.textContent = this._getTranslation('legend') + ':';
this._categories[this.options.selectedAttributeIdx].legend.forEach((l) => {
var color = L.DomUtil.create('span', 'legend-rect', legend);
color.style.setProperty('padding-left', '10px');
color.style.setProperty('padding-right', '3px');
color.style.setProperty('width', '6px');
color.style.setProperty('height', '6px');
color.style.setProperty('color', l.color);
color.innerHTML = '&#9632;';
var label = L.DomUtil.create('span', 'legend-text', legend);
label.textContent = l.text;
});
},
}); });
var heightgraphControl = new Heightgraph(); var heightgraphControl = new Heightgraph();

2
package.json
View file

@ -54,7 +54,7 @@
"datatables": "1.10.18", "datatables": "1.10.18",
"fit-file-writer": "tbsmark86/fit-file-writer#3eebe13", "fit-file-writer": "tbsmark86/fit-file-writer#3eebe13",
"font-awesome": "4.7.0", "font-awesome": "4.7.0",
"geo-data-exchange": "alexcojocaru/geo-data-exchange#v2.1.0", "geo-data-exchange": "alexcojocaru/geo-data-exchange#v2.2.0",
"i18next": "19.9.2", "i18next": "19.9.2",
"i18next-browser-languagedetector": "7.0.2", "i18next-browser-languagedetector": "7.0.2",
"i18next-xhr-backend": "3.2.2", "i18next-xhr-backend": "3.2.2",

6
yarn.lock
View file

@ -5632,9 +5632,9 @@ gensync@^1.0.0-beta.2:
resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
geo-data-exchange@alexcojocaru/geo-data-exchange#v2.1.0: geo-data-exchange@alexcojocaru/geo-data-exchange#v2.2.0:
version "2.1.0" version "2.2.0"
resolved "https://codeload.github.com/alexcojocaru/geo-data-exchange/tar.gz/aa1a0bc98f0b3f7233ea3dcbc038bf46a99702d9" resolved "https://codeload.github.com/alexcojocaru/geo-data-exchange/tar.gz/d6d517dee5e07e32ef948eecd7a151479a6d7938"
dependencies: dependencies:
leaflet "^1.5.0" leaflet "^1.5.0"