aboutsummaryrefslogtreecommitdiff
path: root/modern/src/map
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-05-15 09:58:37 -0700
committerAnton Tananaev <anton@traccar.org>2022-05-15 09:58:37 -0700
commit63cf082bd077087e551d2946c3e2a48a605a3532 (patch)
tree15587eaa69ea5daa4ab483e2caa16cf665f37597 /modern/src/map
parentdcaaa40f71f45070add4f23ffda66d18b611562c (diff)
downloadtrackermap-web-63cf082bd077087e551d2946c3e2a48a605a3532.tar.gz
trackermap-web-63cf082bd077087e551d2946c3e2a48a605a3532.tar.bz2
trackermap-web-63cf082bd077087e551d2946c3e2a48a605a3532.zip
Clean up replay page
Diffstat (limited to 'modern/src/map')
-rw-r--r--modern/src/map/PositionsMap.js13
-rw-r--r--modern/src/map/main/CurrentPositionsMap.js13
2 files changed, 17 insertions, 9 deletions
diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js
index 74b58beb..2e152d34 100644
--- a/modern/src/map/PositionsMap.js
+++ b/modern/src/map/PositionsMap.js
@@ -1,16 +1,14 @@
import { useCallback, useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
import { map } from './core/Map';
import { getStatusColor } from '../common/util/formatter';
-import { devicesActions } from '../store';
import usePersistedState from '../common/util/usePersistedState';
-const PositionsMap = ({ positions }) => {
+const PositionsMap = ({ positions, onClick }) => {
const id = 'positions';
const clusters = `${id}-clusters`;
- const dispatch = useDispatch();
const devices = useSelector((state) => state.devices.items);
const [mapCluster] = usePersistedState('mapCluster', true);
@@ -18,6 +16,7 @@ const PositionsMap = ({ positions }) => {
const createFeature = (devices, position) => {
const device = devices[position.deviceId];
return {
+ id: position.id,
deviceId: position.deviceId,
name: device.name,
category: device.category || 'default',
@@ -30,8 +29,10 @@ const PositionsMap = ({ positions }) => {
const onMarkerClick = useCallback((event) => {
const feature = event.features[0];
- dispatch(devicesActions.select(feature.properties.deviceId));
- }, [dispatch]);
+ if (onClick) {
+ onClick(feature.properties.id, feature.properties.deviceId);
+ }
+ }, [onClick]);
const onClusterClick = useCallback((event) => {
const features = map.queryRenderedFeatures(event.point, {
diff --git a/modern/src/map/main/CurrentPositionsMap.js b/modern/src/map/main/CurrentPositionsMap.js
index 80795497..76a0a0b9 100644
--- a/modern/src/map/main/CurrentPositionsMap.js
+++ b/modern/src/map/main/CurrentPositionsMap.js
@@ -1,11 +1,18 @@
-import React, { } from 'react';
-import { useSelector } from 'react-redux';
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { devicesActions } from '../../store';
import PositionsMap from '../PositionsMap';
const CurrentPositionsMap = () => {
+ const dispatch = useDispatch();
+
+ const onClick = useCallback((_, deviceId) => {
+ dispatch(devicesActions.select(deviceId));
+ }, [dispatch]);
+
const positions = useSelector((state) => state.positions.items);
- return (<PositionsMap positions={Object.values(positions)} />);
+ return (<PositionsMap positions={Object.values(positions)} onClick={onClick} />);
};
export default CurrentPositionsMap;