aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
authorAnton Tananaev <anton@traccar.org>2023-12-02 08:30:57 -0800
committerAnton Tananaev <anton@traccar.org>2023-12-02 08:30:57 -0800
commit70130b2f4fbd2464ba473e2d32b5602e7bfe65a2 (patch)
tree5dd27b2496bf3e045fed2a68d70aec100c1eb742 /modern
parente9524aa3968c44627bfc559898f11b88a5e76ef4 (diff)
downloadtrackermap-web-70130b2f4fbd2464ba473e2d32b5602e7bfe65a2.tar.gz
trackermap-web-70130b2f4fbd2464ba473e2d32b5602e7bfe65a2.tar.bz2
trackermap-web-70130b2f4fbd2464ba473e2d32b5602e7bfe65a2.zip
Show arrows for route points
Diffstat (limited to 'modern')
-rw-r--r--modern/src/map/MapRoutePoints.js20
-rw-r--r--modern/src/map/core/preloadImages.js2
-rw-r--r--modern/src/resources/images/arrow.svg4
3 files changed, 16 insertions, 10 deletions
diff --git a/modern/src/map/MapRoutePoints.js b/modern/src/map/MapRoutePoints.js
index e93b91eb..34dc4b5d 100644
--- a/modern/src/map/MapRoutePoints.js
+++ b/modern/src/map/MapRoutePoints.js
@@ -1,12 +1,9 @@
import { useId, useCallback, useEffect } from 'react';
-import { useTheme } from '@mui/styles';
import { map } from './core/MapView';
-const MapPositions = ({ positions, onClick }) => {
+const MapRoutePoints = ({ positions, onClick }) => {
const id = useId();
- const theme = useTheme();
-
const onMouseEnter = () => map.getCanvas().style.cursor = 'pointer';
const onMouseLeave = () => map.getCanvas().style.cursor = '';
@@ -28,12 +25,14 @@ const MapPositions = ({ positions, onClick }) => {
});
map.addLayer({
id,
- type: 'circle',
+ type: 'symbol',
source: id,
- paint: {
- 'circle-radius': 5,
- 'circle-color': theme.palette.geometry.main,
- },
+ layout: {
+ 'icon-image': 'arrow',
+ 'icon-allow-overlap': true,
+ 'icon-rotate': ['get', 'rotation'],
+ 'icon-rotation-alignment': 'map',
+ },
});
map.on('mouseenter', id, onMouseEnter);
@@ -66,6 +65,7 @@ const MapPositions = ({ positions, onClick }) => {
properties: {
index,
id: position.id,
+ rotation: position.course,
},
})),
});
@@ -74,4 +74,4 @@ const MapPositions = ({ positions, onClick }) => {
return null;
};
-export default MapPositions;
+export default MapRoutePoints;
diff --git a/modern/src/map/core/preloadImages.js b/modern/src/map/core/preloadImages.js
index 19c3c35e..a0056d4c 100644
--- a/modern/src/map/core/preloadImages.js
+++ b/modern/src/map/core/preloadImages.js
@@ -2,6 +2,7 @@ import { grey } from '@mui/material/colors';
import createPalette from '@mui/material/styles/createPalette';
import { loadImage, prepareIcon } from './mapUtil';
+import arrowSvg from '../../resources/images/arrow.svg';
import directionSvg from '../../resources/images/direction.svg';
import backgroundSvg from '../../resources/images/background.svg';
import animalSvg from '../../resources/images/icon/animal.svg';
@@ -64,6 +65,7 @@ export default async () => {
const background = await loadImage(backgroundSvg);
mapImages.background = await prepareIcon(background);
mapImages.direction = await prepareIcon(await loadImage(directionSvg));
+ mapImages.arrow = await prepareIcon(await loadImage(arrowSvg));
await Promise.all(Object.keys(mapIcons).map(async (category) => {
const results = [];
['info', 'success', 'error', 'neutral'].forEach((color) => {
diff --git a/modern/src/resources/images/arrow.svg b/modern/src/resources/images/arrow.svg
new file mode 100644
index 00000000..d0f30a2e
--- /dev/null
+++ b/modern/src/resources/images/arrow.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" fill="#000000" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path d="m12 2-7.5 18.29 0.71 0.71 6.79-3 6.79 3 0.71-0.71z" fill="#3bb2d0"/>
+</svg>