modern/src/map/SelectedGeofenceMap.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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;