save current state.

frontend/src/mapstyles/index.js

@@ -52,8 +52,8 @@ var steps = {'rural': [1.6,1.8,2.0,2.2],
 
 export function borderByZone() {
   return ["match", ['get', 'zone'],
-  "rural", "brown",
-  "urban", "olive",
+  "rural", "cyan",
+  "urban", "blue",
   "purple"
   ]
 }

frontend/src/pages/MapPage/LayerSidebar.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import _ from 'lodash'
 import {connect} from 'react-redux'
-import {List, Select, Input, Divider, Checkbox, Header} from 'semantic-ui-react'
+import {List, Select, Input, Divider, Label, Checkbox, Header} from 'semantic-ui-react'
 
 import {
   MapConfig,
@@ -23,6 +23,7 @@ const ROAD_ATTRIBUTE_OPTIONS = [
   {value: 'distance_overtaker_median', key: 'distance_overtaker_median', text: 'Overtaker distance median'},
   {value: 'overtaking_event_count', key: 'overtaking_event_count', text: 'Event count'},
   {value: 'usage_count', key: 'usage_count', text: 'Usage count'},
+  {value: 'zone', key: 'zone', text: 'Overtaking distance zone'}
 ]
 
 function LayerSidebar({
@@ -96,6 +97,13 @@ function LayerSidebar({
                 <ColorMapLegend map={_.chunk(colorByCount('obsRoads.maxCount', mapConfig.obsRoads.maxCount, viridisSimpleHtml ).slice(3), 2)} twoTicks />
               </List.Item></>
             ) :
+            attribute.endsWith('zone') ? (
+             <>
+              <List.Item>
+                <Label size="small" style={{background: "blue",color:"white"}}>urban (1.5&nbsp;m)</Label>
+                <Label size="small" style={{background: "cyan", color:"black"}}>rural (2&nbsp;m)</Label>
+              </List.Item></>
+            ) :
             (
               <List.Item>
                 <span style={{color: "olive"}}>Urban</span>
@@ -123,9 +131,9 @@ function LayerSidebar({
         {showEvents && (
           <>
             <List.Item>
-                <span style={{color: "olive"}}>Urban</span>
+                <span style={{color: "blue"}}>Urban</span>
                 <DiscreteColorMapLegend map={colorByDistance('distance_overtaker')[3][5].slice(2)} />
-                <span style={{color: "brown"}}>Rural</span>
+                <span style={{color: "cyan"}}>Rural</span>
                 <DiscreteColorMapLegend map={colorByDistance('distance_overtaker')[3][3].slice(2)} />
             </List.Item>
           </>

frontend/src/pages/MapPage/RoadInfo.tsx

@@ -34,7 +34,7 @@ const LABELS = {
   max: 'Maximum',
   mean: 'Average',
 }
-const ZONE_COLORS = {urban: 'olive', rural: 'brown', motorway: 'purple'}
+const ZONE_COLORS = {urban: 'blue', rural: 'cyan', motorway: 'purple'}
 const CARDINAL_DIRECTIONS = ['north', 'north-east', 'east', 'south-east', 'south', 'south-west', 'west', 'north-west']
 const getCardinalDirection = (bearing) =>
   bearing == null

frontend/src/pages/MapPage/index.tsx

@@ -54,6 +54,8 @@ const getRoadsLayer = (colorAttribute, maxCount) =>
       ? colorByDistance(colorAttribute)
       : colorAttribute.endsWith('_count')
       ? colorByCount(colorAttribute, maxCount)
+      : colorAttribute.endsWith('zone')
+      ? borderByZone()
       : '#DDD'
     draft.paint['line-opacity'][3] = 12
     draft.paint['line-opacity'][5] = 13
@@ -67,8 +69,6 @@ const getEventsLayer = () => ({
   paint: {
     'circle-radius': ['interpolate', ['linear'], ['zoom'], 14, 3, 17, 8],
     'circle-color': colorByDistance('distance_overtaker'),
-    'circle-stroke-color': borderByZone(),
-    'circle-stroke-width':['interpolate', ['linear'], ['zoom'], 14, 1, 17, 4],
   },
   minzoom: 11,
 })

frontend/src/reducers/mapConfig.ts

@@ -11,7 +11,8 @@ type RoadAttribute =
   | "distance_overtaker_max"
   | "distance_overtaker_median"
   | "overtaking_event_count"
-  | "usage_count";
+  | "usage_count"
+  | "zone";
 
 export type MapConfig = {
   baseMap: {