Custom geofence colors (fix #967)

3 files changed, 17 insertions, 14 deletions

diff --git a/modern/src/map/MapGeofenceEdit.js b/modern/src/map/MapGeofenceEdit.js
index 045eddc2..c387a086 100644
--- a/modern/src/map/MapGeofenceEdit.js
+++ b/modern/src/map/MapGeofenceEdit.js
@@ -7,6 +7,7 @@ import { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
+import { useTheme } from '@mui/styles';
 import { map } from './core/MapView';
 import { geofenceToFeature, geometryToArea } from './core/mapUtil';
 import { errorsActions, geofencesActions } from '../store';
@@ -37,6 +38,7 @@ const draw = new MapboxDraw({
 });
 
 const MapGeofenceEdit = ({ selectedGeofenceId }) => {
+  const theme = useTheme();
   const dispatch = useDispatch();
   const navigate = useNavigate();
 
@@ -133,7 +135,7 @@ const MapGeofenceEdit = ({ selectedGeofenceId }) => {
   useEffect(() => {
     draw.deleteAll();
     Object.values(geofences).forEach((geofence) => {
-      draw.add(geofenceToFeature(geofence));
+      draw.add(geofenceToFeature(theme, geofence));
     });
   }, [geofences]);
 
diff --git a/modern/src/map/core/mapUtil.js b/modern/src/map/core/mapUtil.js
index 2aa86c68..087c499b 100644
--- a/modern/src/map/core/mapUtil.js
+++ b/modern/src/map/core/mapUtil.js
@@ -67,23 +67,24 @@ export const reverseCoordinates = (it) => {
   };
 };
 
-export const geofenceToFeature = (item) => {
+export const geofenceToFeature = (theme, item) => {
+  let geometry;
   if (item.area.indexOf('CIRCLE') > -1) {
     const coordinates = item.area.replace(/CIRCLE|\(|\)|,/g, ' ').trim().split(/ +/);
     const options = { steps: 32, units: 'meters' };
     const polygon = circle([Number(coordinates[1]), Number(coordinates[0])], Number(coordinates[2]), options);
-    return {
-      id: item.id,
-      type: 'Feature',
-      geometry: polygon.geometry,
-      properties: { name: item.name },
-    };
+    geometry = polygon.geometry;
+  } else {
+    geometry = reverseCoordinates(parse(item.area));
   }
   return {
     id: item.id,
     type: 'Feature',
-    geometry: reverseCoordinates(parse(item.area)),
-    properties: { name: item.name },
+    geometry,
+    properties: {
+      name: item.name,
+      color: item.attributes.color || theme.palette.colors.geometry,
+    },
   };
 };
 
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
index b62cd378..12eedf7d 100644
--- a/modern/src/map/main/MapGeofence.js
+++ b/modern/src/map/main/MapGeofence.js
@@ -29,8 +29,8 @@ const MapGeofence = () => {
         ['==', '$type', 'Polygon'],
       ],
       paint: {
-        'fill-color': theme.palette.colors.geometry,
-        'fill-outline-color': theme.palette.colors.geometry,
+        'fill-color': ['get', 'color'],
+        'fill-outline-color': ['get', 'color'],
         'fill-opacity': 0.1,
       },
     });
@@ -39,7 +39,7 @@ const MapGeofence = () => {
       id: 'geofences-line',
       type: 'line',
       paint: {
-        'line-color': theme.palette.colors.geometry,
+        'line-color': ['get', 'color'],
         'line-width': 2,
       },
     });
@@ -77,7 +77,7 @@ const MapGeofence = () => {
   useEffect(() => {
     map.getSource(id).setData({
       type: 'FeatureCollection',
-      features: Object.values(geofences).map(geofenceToFeature),
+      features: Object.values(geofences).map((geofence) => geofenceToFeature(theme, geofence)),
     });
   }, [geofences]);