diff options
author | Iván Ávalos <avalos@disroot.org> | 2022-05-05 00:00:31 -0500 |
---|---|---|
committer | Iván Ávalos <avalos@disroot.org> | 2022-05-05 00:00:31 -0500 |
commit | a57390425913896128b2472ae95e1504c521422f (patch) | |
tree | 6699282737e0e2db2f1517e099c080f5b096156b /modern/src/map | |
parent | 7f7c56cbb4ecf1d3f3657283cbe7de2637504fff (diff) | |
download | etbsa-traccar-web-a57390425913896128b2472ae95e1504c521422f.tar.gz etbsa-traccar-web-a57390425913896128b2472ae95e1504c521422f.tar.bz2 etbsa-traccar-web-a57390425913896128b2472ae95e1504c521422f.zip |
Geofences now center when clicked in /geofences
Diffstat (limited to 'modern/src/map')
-rw-r--r-- | modern/src/map/SelectedDeviceMap.js | 2 | ||||
-rw-r--r-- | modern/src/map/SelectedGeofenceMap.js | 29 | ||||
-rw-r--r-- | modern/src/map/mapUtil.js | 13 |
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] }; +} |