Use viridis colormap for roads' count layers

frontend/src/components/ColorMapLegend.tsx

@@ -4,12 +4,13 @@ type ColorMap = [number, string][]
 
 import styles from './ColorMapLegend.module.less'
 
-export default function ColorMapLegend({map}: {map: ColorMap}) {
+export default function ColorMapLegend({map, twoTicks = false}: {map: ColorMap, twoTicks?: boolean}) {
   const min = map[0][0]
   const max = map[map.length - 1][0]
   const normalizeValue = (v) => (v - min) / (max - min)
   const gradientId = useMemo(() => `gradient${Math.floor(Math.random() * 1000000)}`, []);
   const gradientUrl = `url(#${gradientId})`;
+  const tickValues = twoTicks ? [map[0], map[map.length-1]] : map
   return (
     <div className={styles.colorMapLegend}>
       <svg width="100%" height="20" version="1.1" xmlns="http://www.w3.org/2000/svg">
@@ -23,7 +24,7 @@ export default function ColorMapLegend({map}: {map: ColorMap}) {
 
         <rect id="rect1" x="0" y="0" width="100%" height="100%" fill={gradientUrl} />
       </svg>
-      {map.map(([value]) => (
+      {tickValues.map(([value]) => (
         <span className={styles.tick} key={value} style={{left: normalizeValue(value) * 100 + '%'}}>
           {value.toFixed(2)}
         </span>

frontend/src/mapstyles/index.js

@@ -22,6 +22,10 @@ function rgbArrayToColor(arr) {
   return ['rgb', ...arr.map((v) => Math.round(v * 255))]
 }
 
+function rgbArrayToHtml(arr) {
+  return "#" + arr.map((v) => Math.round(v * 255).toString(16)).map(v => (v.length == 1 ? '0' : '') + v).join('')
+}
+
 export function colormapToScale(colormap, value, min, max) {
   return [
     'interpolate-hcl',
@@ -32,6 +36,7 @@ export function colormapToScale(colormap, value, min, max) {
 }
 
 export const viridis = simplifyColormap(viridisBase.map(rgbArrayToColor), 20)
+export const viridisSimpleHtml = simplifyColormap(viridisBase.map(rgbArrayToHtml), 10)
 export const grayscale = ['#FFFFFF', '#000000']
 export const reds = [
   'rgba( 255, 0, 0, 0)',

frontend/src/pages/MapPage/LayerSidebar.tsx

@@ -8,7 +8,7 @@ import {
   setMapConfigFlag as setMapConfigFlagAction,
   initialState as defaultMapConfig,
 } from 'reducers/mapConfig'
-import {colorByDistance, colorByCount, reds} from 'mapstyles'
+import {colorByDistance, colorByCount, viridisSimpleHtml} from 'mapstyles'
 import {ColorMapLegend} from 'components'
 
 const BASEMAP_STYLE_OPTIONS = [
@@ -93,7 +93,7 @@ function LayerSidebar({
                 />
               </List.Item>
               <List.Item>
-                <ColorMapLegend map={_.chunk(colorByCount('obsRoads.maxCount',mapConfig.obsRoads.maxCount, reds).slice(3), 2)} />
+                <ColorMapLegend map={_.chunk(colorByCount('obsRoads.maxCount', mapConfig.obsRoads.maxCount, viridisSimpleHtml ).slice(3), 2)} twoTicks />
               </List.Item></>
             ) :
             (

frontend/src/pages/MapPage/index.tsx

@@ -44,7 +44,8 @@ const getRoadsLayer = (colorAttribute, maxCount) =>
   produce(untaggedRoadsLayer, (draft) => {
     draft.id = 'obs_roads_normal'
     if (colorAttribute.endsWith('_count')) {
-      delete draft.filter
+      // delete draft.filter
+      draft.filter = ['to-boolean', ['get', colorAttribute]]
     } else {
       draft.filter = draft.filter[1] // remove '!'
     }
@@ -52,7 +53,7 @@ const getRoadsLayer = (colorAttribute, maxCount) =>
     draft.paint['line-color'] = colorAttribute.startsWith('distance_')
       ? colorByDistance(colorAttribute)
       : colorAttribute.endsWith('_count')
-      ? colorByCount(colorAttribute, maxCount, reds)
+      ? colorByCount(colorAttribute, maxCount)
       : '#DDD'
     draft.paint['line-opacity'][3] = 12
     draft.paint['line-opacity'][5] = 13