diff options
author | Anton Tananaev <anton.tananaev@gmail.com> | 2020-11-03 14:34:49 -0800 |
---|---|---|
committer | Anton Tananaev <anton.tananaev@gmail.com> | 2020-11-03 14:34:49 -0800 |
commit | 155e3b90365994a4bfbf3b43505f0452fb3fe88a (patch) | |
tree | db814b99a6c77798e59fd49656535758b2a44491 /modern/src/map | |
parent | d53632348f684f35719b035ff39744a41c088f3e (diff) | |
download | trackermap-web-155e3b90365994a4bfbf3b43505f0452fb3fe88a.tar.gz trackermap-web-155e3b90365994a4bfbf3b43505f0452fb3fe88a.tar.bz2 trackermap-web-155e3b90365994a4bfbf3b43505f0452fb3fe88a.zip |
Show replay position
Diffstat (limited to 'modern/src/map')
-rw-r--r-- | modern/src/map/CurrentPositionsMap.js | 11 | ||||
-rw-r--r-- | modern/src/map/PositionsMap.js | 33 |
2 files changed, 27 insertions, 17 deletions
diff --git a/modern/src/map/CurrentPositionsMap.js b/modern/src/map/CurrentPositionsMap.js new file mode 100644 index 00000000..0bfe4fcd --- /dev/null +++ b/modern/src/map/CurrentPositionsMap.js @@ -0,0 +1,11 @@ +import React, { } from 'react'; +import { useSelector } from 'react-redux'; + +import PositionsMap from './PositionsMap'; + +const CurrentPositionsMap = () => { + const positions = useSelector(state => Object.values(state.positions.items)); + return (<PositionsMap positions={positions} />); +} + +export default CurrentPositionsMap; diff --git a/modern/src/map/PositionsMap.js b/modern/src/map/PositionsMap.js index 0ad9a69d..fa7b431a 100644 --- a/modern/src/map/PositionsMap.js +++ b/modern/src/map/PositionsMap.js @@ -8,13 +8,14 @@ import store from '../store'; import { useHistory } from 'react-router-dom'; import StatusView from './StatusView'; -const PositionsMap = () => { +const PositionsMap = ({ positions }) => { const id = 'positions'; const history = useHistory(); + const devices = useSelector(state => state.devices.items); - const createFeature = (state, position) => { - const device = state.devices.items[position.deviceId] || null; + const createFeature = (devices, position) => { + const device = devices[position.deviceId] || null; return { deviceId: position.deviceId, name: device ? device.name : '', @@ -22,18 +23,6 @@ const PositionsMap = () => { } }; - const positions = useSelector(state => ({ - type: 'FeatureCollection', - features: Object.values(state.positions.items).map(position => ({ - type: 'Feature', - geometry: { - type: 'Point', - coordinates: [position.longitude, position.latitude] - }, - properties: createFeature(state, position), - })), - })); - const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer'; const onMouseLeave = () => map.getCanvas().style.cursor = ''; @@ -106,8 +95,18 @@ const PositionsMap = () => { }, [onClickCallback]); useEffect(() => { - map.getSource(id).setData(positions); - }, [positions]); + map.getSource(id).setData({ + type: 'FeatureCollection', + features: positions.map(position => ({ + type: 'Feature', + geometry: { + type: 'Point', + coordinates: [position.longitude, position.latitude], + }, + properties: createFeature(devices, position), + })) + }); + }, [devices, positions]); return null; } |