3 files changed, 42 insertions, 2 deletions
diff --git a/modern/src/map/SelectedDeviceMap.js b/modern/src/map/SelectedDeviceMap.js
index d05394b..3a5c997 100644
--- a/modern/src/map/SelectedDeviceMap.js
+++ b/modern/src/map/SelectedDeviceMap.js
@@ -16,7 +16,7 @@ const SelectedDeviceMap = () => {
 
   useEffect(() => {
     if (mapCenter) {
-      map.easeTo({ center: mapCenter.position, zoom:18 });
+      map.easeTo({ center: mapCenter.position, zoom: 18 });
     }
   }, [mapCenter]);
   
diff --git a/modern/src/map/SelectedGeofenceMap.js b/modern/src/map/SelectedGeofenceMap.js
new file mode 100644
index 0000000..2ed3a2d
--- /dev/null
+++ b/modern/src/map/SelectedGeofenceMap.js
@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+import { useSelector } from 'react-redux';
+import { map } from './Map';
+import { getGeofenceCenter } from './mapUtil';
+
+const SelectedGeofenceMap = () => {
+  const mapCenter = useSelector((state) => {
+    console.log (state.geofences.selectedId);
+    if (state.geofences.selectedId) {
+      const geofence = state.geofences.items[state.geofences.selectedId] || null;
+      const center = getGeofenceCenter (geofence);
+      if (geofence) {
+        return { position: [center.longitude, center.latitude] };
+      }
+    }
+    return null;
+  });
+
+  useEffect(() => {
+    if (mapCenter) {
+      map.easeTo({ center: mapCenter.position, zoom: 18 });
+    }
+  }, [mapCenter]);
+  
+  return null;
+};
+
+export default SelectedGeofenceMap;
diff --git a/modern/src/map/mapUtil.js b/modern/src/map/mapUtil.js
index e93c146..4df446c 100644
--- a/modern/src/map/mapUtil.js
+++ b/modern/src/map/mapUtil.js
@@ -1,5 +1,5 @@
 import { parse, stringify } from 'wellknown';
-import circle from '@turf/circle';
+import { circle, polygon, centroid } from '@turf/turf';
 
 export const loadImage = (url) => new Promise((imageLoaded) => {
   const image = new Image();
@@ -84,3 +84,14 @@ export const geofenceToFeature = (item) => {
 };
 
 export const geometryToArea = (geometry) => stringify(reverseCoordinates(geometry));
+
+export const getGeofenceCenter = (item) => {
+  if (item.area.indexOf('CIRCLE') > -1) {
+    const coordinates = item.area.replace(/CIRCLE|\(|\)|,/g, ' ').trim().split(/ +/);
+    return { longitude: Number(coordinates[1]), latitude: Number(coordinates[0]) };
+  }
+  const pol = polygon(reverseCoordinates(parse(item.area)).coordinates);
+  const center = centroid(pol);
+  const coords = center.geometry.coordinates;
+  return { longitude: coords[0], latitude: coords[1] };
+}