diff options
| -rw-r--r-- | modern/src/map/MapRoutePoints.js | 20 | ||||
| -rw-r--r-- | modern/src/map/core/preloadImages.js | 2 | ||||
| -rw-r--r-- | modern/src/resources/images/arrow.svg | 4 |
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> |
