Merge pull request #9 from dominik-korsa/elevation-map

Start elevation legend at 0

src/components/GradientsManager.js

@@ -7,11 +7,12 @@ function getMinMax(trackColorMode, scenery) {
         if (!scenery) return null;
         if (scenery.trackElevationBounds.minY > scenery.trackElevationBounds.maxY) return null;
 
-        // Ensure min and max values are even so that the min, max and middle values are integers
-        const min = Math.floor(scenery.trackElevationBounds.minY/2)*2;
-        let max = Math.ceil((scenery.trackElevationBounds.maxY)/2)*2;
-        // Make sure max > min even on flat sceneries, otherwise `diff` calculation would result in division by 0
-        if (max <= min) max = min + 2;
+        const min = scenery.trackElevationBounds.minY;
+        // Make sure diff > 0 even on flat sceneries
+        let diff = Math.max(scenery.trackElevationBounds.maxY - scenery.trackElevationBounds.minY, 1);
+        // Ensure `diff` is even so that the min, max and middle legend values are integers
+        diff = Math.ceil(diff / 2)*2;
+        const max = min + diff;
 
         return [min, max];
     }
@@ -38,6 +39,7 @@ function createGradientSettings(trackColorMode, scenery, def) {
             legendMin: minValue,
             legendMax: maxValue,
             unit: gradient.unit,
+            startLegendAt0: gradient.startLegendAt0 ?? false,
         };
     }
     return null;

src/components/sidemenu/track-color-mode/TrackColorModeLegend.js

@@ -50,15 +50,21 @@ function LegendGradient(props) {
     const to = MiscHelper.getTrackGradientColor(gradientDef, gradientDef.legendMax);
     const gradientStyle = `linear-gradient(to right, ${from}, ${to})`;
 
-    const midVal = (gradientDef.legendMin + gradientDef.legendMax) / 2;
+    let { legendMin, legendMax } = gradientDef;
+    if (gradientDef.startLegendAt0) {
+        legendMax -= legendMin;
+        legendMin = 0;
+    }
+
+    const midVal = (legendMin + legendMax) / 2;
 
     return (
         <div className="gradient">
             <div className="gradient-bar" style={{ background: gradientStyle}}></div>
             <div className="gradient-labels">
-                <span className="gradient-label">{gradientDef.legendMin} {gradientDef.unit}</span>
+                <span className="gradient-label">{legendMin} {gradientDef.unit}</span>
                 <span className="gradient-label">{midVal} {gradientDef.unit}</span>
-                <span className="gradient-label">{gradientDef.legendMax} {gradientDef.unit}</span>
+                <span className="gradient-label">{legendMax} {gradientDef.unit}</span>
             </div>
         </div>
     );

src/helpers/constants.js

@@ -166,6 +166,7 @@ const Constants = {
                 legendMin: 0,
                 legendMax: 10,
                 unit: '‰',
+                startLegendAt0: false,
             }
         },
         'max-speed': {
@@ -177,6 +178,7 @@ const Constants = {
                 legendMin: 0,
                 legendMax: 170,
                 unit: 'km/h',
+                startLegendAt0: false,
             },
             options: {
                 'derail': ['#f22', 'Derail track'],
@@ -190,8 +192,9 @@ const Constants = {
                 min: [0, 190, 0],
                 max: [255, 22, 22],
                 defaultMin: 0,
-                defaultMax: 1,
+                defaultMax: 2,
                 unit: 'm',
+                startLegendAt0: true,
             },
         },
     }