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(-) (limited to 'modern') 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