diff --git a/src/common/util/colors.js b/src/common/util/colors.js index 535540e309..87963a4b8b 100644 --- a/src/common/util/colors.js +++ b/src/common/util/colors.js @@ -22,9 +22,11 @@ const interpolateTurbo = (value) => { ]; }; -const getSpeedColor = (speed, maxSpeed) => { - const normalizedSpeed = Math.max(0, Math.min(1, speed / maxSpeed)); +const getSpeedColor = (speed, minSpeed, maxSpeed) => { + const normalizedSpeed = (speed - minSpeed) / (maxSpeed - minSpeed); + const [r, g, b] = interpolateTurbo(normalizedSpeed); + return `rgb(${r}, ${g}, ${b})`; }; diff --git a/src/map/MapRoutePoints.js b/src/map/MapRoutePoints.js index 7ee4dc6363..e561c32830 100644 --- a/src/map/MapRoutePoints.js +++ b/src/map/MapRoutePoints.js @@ -58,6 +58,8 @@ const MapRoutePoints = ({ positions, onClick }) => { useEffect(() => { const maxSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.max(a, b), -Infinity); + const minSpeed = positions.map((p) => p.speed).reduce((a, b) => Math.min(a, b), Infinity); + map.getSource(id)?.setData({ type: 'FeatureCollection', features: positions.map((position, index) => ({ @@ -70,7 +72,7 @@ const MapRoutePoints = ({ positions, onClick }) => { index, id: position.id, rotation: position.course, - color: getSpeedColor(position.speed, maxSpeed), + color: getSpeedColor(position.speed, minSpeed, maxSpeed), }, })), });