refactor(isochrones): changes colouring of isochrones to be a red to …

…blue scale

Modified the way that the colouring of isochrone polygons is done to use a linear colour scale (red
to blue) rather than the pre-defined discrete colourings.

src/support/map-data-services/ors-response-data-extractors/response-extractors/v2/isochrones.js

@@ -61,12 +61,15 @@ class IsochronesBuilder {
   getPolygons = () => {
     const polygons = []
     if (this.responseData.features) {
+      // When you request multiple points in an isochrone request, ors returns them all as a single array
+      // of polygon features
+      const ranges = this.responseData.metadata.query.range
+      const maxRange = Math.max(ranges)
+
       this.responseData.features.forEach((feature, index) => {
         const polygon = { geometry: feature.geometry, properties: feature.properties }
         polygon.properties.range_type = this.responseData.metadata.query.range_type
-
-        PolygonUtils.preparePolygonForView(polygon, this.translations, index)
-
+        PolygonUtils.preparePolygonForView(polygon, this.translations, index, maxRange)
         polygons.push(polygon)
       })
     }

src/support/polygon-utils.js

@@ -2,6 +2,7 @@ import htmlColors from 'html-colors'
 import GeoUtils from '@/support/geo-utils'
 import Leaflet from 'leaflet'
 import store from '@/store/store'
+import utils from '@/support/utils'
 
 const PolygonUtils = {
 
@@ -10,10 +11,12 @@ const PolygonUtils = {
    * @param {*} polygon
    * @param {*} translations
    * @param {*} index
+   * @param {number} maxRange
    */
-  preparePolygonForView (polygon, translations, index) {
+  preparePolygonForView: function (polygon, translations, index, maxRange) {
     polygon.properties = polygon.properties || {}
-    polygon.properties.color = polygon.properties.color || PolygonUtils.buildPolygonColor(index)
+    // the "value" property contains the range for the feature
+    polygon.properties.color = polygon.properties.color || PolygonUtils.buildPolygonColorFromScale(polygon.properties.value, maxRange)
     polygon.properties.fillColor = polygon.properties.fillColor || polygon.properties.color
     polygon.properties.label = polygon.properties.label || PolygonUtils.buildPolygonLabel(polygon, translations)
     polygon.properties.area = PolygonUtils.calcPolygonArea(polygon)
@@ -94,6 +97,23 @@ const PolygonUtils = {
     const color = htmlColors.hex(names[index + 6])
     return color
   },
+  /**
+   * Generate a color (from red to blue) on a linear scale
+   * @param {Number} value The number to be placed on the scale
+   * @param {Number} scaleMax The maximum value of the scale
+   * @returns {String} color
+   */
+  buildPolygonColorFromScale(value, scaleMax) {
+    let modifier = parseInt(255 * (value/scaleMax))
+
+    let red = modifier * 2
+    let blue = (255 - modifier) * 2
+    // Cap values to 255. By multiplying by two we ensure that we get a good middle color (where both are 255)
+    if (red > 255) red = 255
+    if (blue > 255) blue = 255
+
+    return utils.rgbDecimalToHex(red, 0, blue)
+  },
   /**
    * Build polygon label
    * @param {Number} index

src/support/utils.js

@@ -15,7 +15,31 @@ const Utils = {
     const textColor = tinyColor2(backgroundColor).isLight() ? 'black' : 'white'
     return textColor
   },
-
+  /**
+   * Get a hexadecimal RGB representation of decimal (0-255) color values
+   * @param red
+   * @param green
+   * @param blue
+   * @returns {string}
+   */
+  rgbDecimalToHex (red, green, blue) {
+    let r = this.decimalToHex(red)
+    let g = this.decimalToHex(green)
+    let b = this.decimalToHex(blue)
+    return '#'+r+g+b
+  },
+  /**
+   * Convert a decimal value to its hexadecimal representation
+   * @param decimal
+   * @returns {string}
+   */
+  decimalToHex (decimal) {
+    let hex = Number(decimal).toString(16)
+    if (hex.length < 2) {
+      hex = '0' + hex
+    }
+    return hex
+  },
   /**
    * Blur the active element in order to close
    * the mobile virtual keyboard if it is open