Translate MapPage

frontend/src/pages/MapPage/LayerSidebar.tsx

@@ -1,12 +1,10 @@
-import React from "react";
+import React from 'react'
-import _ from "lodash";
+import _ from 'lodash'
-import { connect } from "react-redux";
+import {connect} from 'react-redux'
-import {List, Select, Input, Divider, Label,
+import {List, Select, Input, Divider, Label, Checkbox, Header} from 'semantic-ui-react'
-  Checkbox,
-  Header,
-} from "semantic-ui-react";
 import { useTranslation } from "react-i18next";
 
+
 import {
   MapConfig,
   setMapConfigFlag as setMapConfigFlagAction,
@@ -24,6 +22,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({
@@ -160,6 +159,21 @@ function LayerSidebar({
                   />
                 </List.Item>
               </>
+            ) : (
+                <List.Item>
+                  <ColorMapLegend
+                    map={_.chunk(
+                      colorByCount(
+                        "obsRoads.maxCount",
+                        mapConfig.obsRoads.maxCount,
+                        viridisSimpleHtml
+                      ).slice(3),
+                      2
+                    )}
+                    twoTicks
+                  />
+                </List.Item>
+              </>
             ) : attribute.endsWith("zone") ? (
               <>
                 <List.Item>