aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2022-08-21 12:54:25 -0700
committerAnton Tananaev <anton@traccar.org>2022-08-21 12:54:25 -0700
commit4cce933164ace68833a07da463997e53226c1b6a (patch)
tree3f29997490a4f2d9b79305933a84a7efe1bbc9e3 /modern
parentfb8f8764aae3e509df75f5d3f25daf11a19a0029 (diff)
downloadtrackermap-web-4cce933164ace68833a07da463997e53226c1b6a.tar.gz
trackermap-web-4cce933164ace68833a07da463997e53226c1b6a.tar.bz2
trackermap-web-4cce933164ace68833a07da463997e53226c1b6a.zip
Handle direction with clusering
Diffstat (limited to 'modern')
-rw-r--r--modern/src/main/MainPage.js6
-rw-r--r--modern/src/map/MapDirection.js61
-rw-r--r--modern/src/map/MapPositions.js25
3 files changed, 23 insertions, 69 deletions
diff --git a/modern/src/main/MainPage.js b/modern/src/main/MainPage.js
index 59141cf6..83440830 100644
--- a/modern/src/main/MainPage.js
+++ b/modern/src/main/MainPage.js
@@ -32,7 +32,6 @@ import usePersistedState from '../common/util/usePersistedState';
import MapLiveRoutes from '../map/main/MapLiveRoutes';
import { useDeviceReadonly } from '../common/util/permissions';
import MapPositions from '../map/MapPositions';
-import MapDirection from '../map/MapDirection';
import MapOverlay from '../map/overlay/MapOverlay';
import MapGeocoder from '../map/geocoder/MapGeocoder';
import MapScale from '../map/MapScale';
@@ -234,10 +233,7 @@ const MainPage = () => {
<MapGeofence />
<MapAccuracy positions={filteredPositions} />
{mapLiveRoutes && <MapLiveRoutes />}
- <MapPositions positions={filteredPositions} onClick={onClick} showStatus />
- {selectedPosition && selectedPosition.course && (
- <MapDirection position={selectedPosition} />
- )}
+ <MapPositions positions={filteredPositions} onClick={onClick} selectedPosition={selectedPosition} showStatus />
<MapDefaultCamera />
<MapSelectedDevice />
<PoiMap />
diff --git a/modern/src/map/MapDirection.js b/modern/src/map/MapDirection.js
deleted file mode 100644
index 2ccd508b..00000000
--- a/modern/src/map/MapDirection.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useId, useEffect } from 'react';
-import { useAttributePreference } from '../common/util/preferences';
-import { map } from './core/MapView';
-
-const MapDirection = ({ position }) => {
- const id = useId();
-
- const iconScale = useAttributePreference('iconScale', 1);
-
- useEffect(() => {
- map.addSource(id, {
- type: 'geojson',
- data: {
- type: 'FeatureCollection',
- features: [],
- },
- });
- map.addLayer({
- id,
- type: 'symbol',
- source: id,
- layout: {
- 'icon-image': 'direction',
- 'icon-size': iconScale,
- 'icon-rotate': ['get', 'rotation'],
- 'icon-rotation-alignment': 'map',
- },
- });
-
- return () => {
- if (map.getLayer(id)) {
- map.removeLayer(id);
- }
- if (map.getSource(id)) {
- map.removeSource(id);
- }
- };
- }, []);
-
- useEffect(() => {
- map.getSource(id).setData({
- type: 'FeatureCollection',
- features: [
- {
- type: 'Feature',
- geometry: {
- type: 'Point',
- coordinates: [position.longitude, position.latitude],
- },
- properties: {
- rotation: position.course,
- },
- },
- ],
- });
- }, [position]);
-
- return null;
-};
-
-export default MapDirection;
diff --git a/modern/src/map/MapPositions.js b/modern/src/map/MapPositions.js
index e38e2694..92487fee 100644
--- a/modern/src/map/MapPositions.js
+++ b/modern/src/map/MapPositions.js
@@ -7,9 +7,10 @@ import { mapIconKey } from './core/preloadImages';
import { findFonts } from './core/mapUtil';
import { useAttributePreference } from '../common/util/preferences';
-const MapPositions = ({ positions, onClick, showStatus }) => {
+const MapPositions = ({ positions, onClick, showStatus, selectedPosition }) => {
const id = useId();
const clusters = `${id}-clusters`;
+ const direction = `${id}-direction`;
const devices = useSelector((state) => state.devices.items);
@@ -76,7 +77,7 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
id,
type: 'symbol',
source: id,
- filter: ['!', ['has', 'point_count']],
+ filter: ['!has', 'point_count'],
layout: {
'icon-image': '{category}-{color}',
'icon-size': iconScale,
@@ -106,6 +107,21 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
'text-size': 14,
},
});
+ if (selectedPosition && selectedPosition.course) {
+ map.addLayer({
+ id: direction,
+ type: 'symbol',
+ source: id,
+ filter: ['all', ['!has', 'point_count'], ['==', 'id', selectedPosition.id]],
+ layout: {
+ 'icon-image': 'direction',
+ 'icon-size': iconScale,
+ 'icon-allow-overlap': true,
+ 'icon-rotate': ['get', 'rotation'],
+ 'icon-rotation-alignment': 'map',
+ },
+ });
+ }
map.on('mouseenter', id, onMouseEnter);
map.on('mouseleave', id, onMouseLeave);
@@ -130,11 +146,14 @@ const MapPositions = ({ positions, onClick, showStatus }) => {
if (map.getLayer(clusters)) {
map.removeLayer(clusters);
}
+ if (map.getLayer(direction)) {
+ map.removeLayer(direction);
+ }
if (map.getSource(id)) {
map.removeSource(id);
}
};
- }, [mapCluster, clusters, onMarkerClick, onClusterClick]);
+ }, [selectedPosition, mapCluster, clusters, direction, onMarkerClick, onClusterClick]);
useEffect(() => {
map.getSource(id).setData({