diff --git a/src/support/map-data-services/ors-response-data-extractors/response-extractors/v2/isochrones.js b/src/support/map-data-services/ors-response-data-extractors/response-extractors/v2/isochrones.js index 9eeeb29a..69c66c39 100644 --- a/src/support/map-data-services/ors-response-data-extractors/response-extractors/v2/isochrones.js +++ b/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) }) } diff --git a/src/support/polygon-utils.js b/src/support/polygon-utils.js index eeef6c61..6055a9b8 100644 --- a/src/support/polygon-utils.js +++ b/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 diff --git a/src/support/utils.js b/src/support/utils.js index 15f3d9d3..fe051409 100644 --- a/src/support/utils.js +++ b/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