aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map/main/MapGeofence.js
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src/map/main/MapGeofence.js')
-rw-r--r--modern/src/map/main/MapGeofence.js84
1 files changed, 84 insertions, 0 deletions
diff --git a/modern/src/map/main/MapGeofence.js b/modern/src/map/main/MapGeofence.js
new file mode 100644
index 00000000..ee1bc884
--- /dev/null
+++ b/modern/src/map/main/MapGeofence.js
@@ -0,0 +1,84 @@
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+import { map } from '../core/Map';
+import { geofenceToFeature } from '../core/mapUtil';
+
+const MapGeofence = () => {
+ const id = 'geofences';
+
+ const geofences = useSelector((state) => state.geofences.items);
+
+ useEffect(() => {
+ map.addSource(id, {
+ type: 'geojson',
+ data: {
+ type: 'FeatureCollection',
+ features: [],
+ },
+ });
+ map.addLayer({
+ source: id,
+ id: 'geofences-fill',
+ type: 'fill',
+ filter: [
+ 'all',
+ ['==', '$type', 'Polygon'],
+ ],
+ paint: {
+ 'fill-color': '#3bb2d0',
+ 'fill-outline-color': '#3bb2d0',
+ 'fill-opacity': 0.1,
+ },
+ });
+ map.addLayer({
+ source: id,
+ id: 'geofences-line',
+ type: 'line',
+ paint: {
+ 'line-color': '#3bb2d0',
+ 'line-width': 2,
+ },
+ });
+ map.addLayer({
+ source: id,
+ id: 'geofences-title',
+ type: 'symbol',
+ layout: {
+ 'text-field': '{name}',
+ 'text-font': ['Roboto Regular'],
+ 'text-size': 12,
+ },
+ paint: {
+ 'text-halo-color': 'white',
+ 'text-halo-width': 1,
+ },
+ });
+
+ return () => {
+ if (map.getLayer('geofences-fill')) {
+ map.removeLayer('geofences-fill');
+ }
+ if (map.getLayer('geofences-line')) {
+ map.removeLayer('geofences-line');
+ }
+ if (map.getLayer('geofences-title')) {
+ map.removeLayer('geofences-title');
+ }
+ if (map.getSource(id)) {
+ map.removeSource(id);
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ map.getSource(id).setData({
+ type: 'FeatureCollection',
+ features: Object.values(geofences).map(geofenceToFeature),
+ });
+ }, [geofences]);
+
+ return null;
+};
+
+export default MapGeofence;