aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-07-03 11:48:36 -0700
committerAnton Tananaev <anton@traccar.org>2022-07-03 11:48:36 -0700
commita78b32f7d59d51effe7f1419902637fe39a451b9 (patch)
tree2a1b2ac8ab40be9f90b5762f4b1be4e39eafdf63 /modern
parent0ed3111ec95e588f90e8d4f14472b651714444d9 (diff)
downloadtrackermap-web-a78b32f7d59d51effe7f1419902637fe39a451b9.tar.gz
trackermap-web-a78b32f7d59d51effe7f1419902637fe39a451b9.tar.bz2
trackermap-web-a78b32f7d59d51effe7f1419902637fe39a451b9.zip
Custom geofence colors (fix #967)
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/MapGeofenceEdit.js4
-rw-r--r--modern/src/map/core/mapUtil.js19
-rw-r--r--modern/src/map/main/MapGeofence.js8
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]);