From b06183b783ee62bec91002af3fa78519323162bd Mon Sep 17 00:00:00 2001
From: mikems66 <>
Date: Fri, 5 Mar 2021 10:25:06 +0100
Subject: Transform circle fence to polygon fence for display

---
 modern/src/map/GeofenceMap.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/modern/src/map/GeofenceMap.js b/modern/src/map/GeofenceMap.js
index 53d951d..cdf379c 100644
--- a/modern/src/map/GeofenceMap.js
+++ b/modern/src/map/GeofenceMap.js
@@ -4,6 +4,15 @@ import { useEffect, useState } from 'react';
 import { map } from './Map';
 import { useEffectAsync } from '../reactHelper';
 import { reverseCoordinates } from './mapUtil';
+import circle from '@turf/circle';
+
+
+const circleToPolygon = (item) => {
+  let coord = item.area.replace(/CIRCLE|\(|\)|,/g, " ").trim().split(/ +/);
+  var options = {steps: 64, units: 'meters'};
+  let c = circle([Number(coord[1]), Number(coord[0])], Number(coord[2]), options);
+  return [item.name, c.geometry];
+}
 
 const GeofenceMap = () => {
   const id = 'geofences';
@@ -72,9 +81,10 @@ const GeofenceMap = () => {
   }, []);
 
   useEffect(() => {
+    let circleFence = geofences.filter((item => item.area.indexOf('CIRCLE') > -1)).map(circleToPolygon);
     map.getSource(id).setData({
       type: 'FeatureCollection',
-      features: geofences.map(item => [item.name, reverseCoordinates(wellknown(item.area))]).filter(([, geometry]) => !!geometry).map(([name, geometry]) => ({
+      features: geofences.map(item => [item.name, reverseCoordinates(wellknown(item.area))]).filter(([, geometry]) => !!geometry).concat(circleFence).map(([name, geometry]) => ({
         type: 'Feature',
         geometry: geometry,
         properties: { name },
-- 
cgit v1.2.3


From 7d3454b40dfaf170000be00fdc70a11a27f78139 Mon Sep 17 00:00:00 2001
From: mikems66 <>
Date: Mon, 8 Mar 2021 12:22:20 +0100
Subject: Changed variable names and number of polygon steps.

---
 modern/src/map/GeofenceMap.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/modern/src/map/GeofenceMap.js b/modern/src/map/GeofenceMap.js
index cdf379c..31da290 100644
--- a/modern/src/map/GeofenceMap.js
+++ b/modern/src/map/GeofenceMap.js
@@ -8,10 +8,10 @@ import circle from '@turf/circle';
 
 
 const circleToPolygon = (item) => {
-  let coord = item.area.replace(/CIRCLE|\(|\)|,/g, " ").trim().split(/ +/);
-  var options = {steps: 64, units: 'meters'};
-  let c = circle([Number(coord[1]), Number(coord[0])], Number(coord[2]), options);
-  return [item.name, c.geometry];
+  let coordinates = item.area.replace(/CIRCLE|\(|\)|,/g, " ").trim().split(/ +/);
+  var options = { steps: 32, units: 'meters' };
+  let polygon = circle([Number(coordinates[1]), Number(coordinates[0])], Number(coordinates[2]), options);
+  return [item.name, polygon.geometry];
 }
 
 const GeofenceMap = () => {
-- 
cgit v1.2.3


From dfebe4fde8da3fdae568b1b5e4f07686c6c4a7f3 Mon Sep 17 00:00:00 2001
From: mikems66 <>
Date: Wed, 10 Mar 2021 15:12:32 +0100
Subject: Moved geofence feature creation to mapUtil.

---
 modern/src/map/GeofenceMap.js | 19 ++-----------------
 modern/src/map/mapUtil.js     | 24 ++++++++++++++++++++++++
 2 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/modern/src/map/GeofenceMap.js b/modern/src/map/GeofenceMap.js
index 31da290..c98a8c1 100644
--- a/modern/src/map/GeofenceMap.js
+++ b/modern/src/map/GeofenceMap.js
@@ -1,18 +1,8 @@
-import wellknown from 'wellknown';
 import { useEffect, useState } from 'react';
 
 import { map } from './Map';
 import { useEffectAsync } from '../reactHelper';
-import { reverseCoordinates } from './mapUtil';
-import circle from '@turf/circle';
-
-
-const circleToPolygon = (item) => {
-  let coordinates = item.area.replace(/CIRCLE|\(|\)|,/g, " ").trim().split(/ +/);
-  var options = { steps: 32, units: 'meters' };
-  let polygon = circle([Number(coordinates[1]), Number(coordinates[0])], Number(coordinates[2]), options);
-  return [item.name, polygon.geometry];
-}
+import { geofenceToFeature } from './mapUtil';
 
 const GeofenceMap = () => {
   const id = 'geofences';
@@ -81,14 +71,9 @@ const GeofenceMap = () => {
   }, []);
 
   useEffect(() => {
-    let circleFence = geofences.filter((item => item.area.indexOf('CIRCLE') > -1)).map(circleToPolygon);
     map.getSource(id).setData({
       type: 'FeatureCollection',
-      features: geofences.map(item => [item.name, reverseCoordinates(wellknown(item.area))]).filter(([, geometry]) => !!geometry).concat(circleFence).map(([name, geometry]) => ({
-        type: 'Feature',
-        geometry: geometry,
-        properties: { name },
-      })),
+      features: geofences.map(geofenceToFeature)
     });
   }, [geofences]);
 
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
index 15f1620..e7dc032 100644
--- a/modern/src/map/mapUtil.js
+++ b/modern/src/map/mapUtil.js
@@ -1,3 +1,6 @@
+import wellknown from 'wellknown';
+import circle from '@turf/circle';
+
 export const loadImage = (url) => {
   return new Promise(imageLoaded => {
     const image = new Image();
@@ -43,3 +46,24 @@ export const reverseCoordinates = it => {
     }
   }
 }
+
+export const geofenceToFeature = (item) => {
+  if (item.area.indexOf('CIRCLE') > -1) {
+    let coordinates = item.area.replace(/CIRCLE|\(|\)|,/g, " ").trim().split(/ +/);
+    var options = { steps: 32, units: 'meters' };
+    let polygon = circle([Number(coordinates[1]), Number(coordinates[0])], Number(coordinates[2]), options);
+    return { 
+      type: 'Feature',
+      geometry: polygon.geometry,
+      properties: { name: item.name }
+    };
+  } else {
+    return { 
+      type: 'Feature',
+      geometry: reverseCoordinates(wellknown(item.area)),
+      properties: { name: item.name }
+    };
+  }
+}
+
+  
-- 
cgit v1.2.3