diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts index 3311134..3554ee9 100644 --- a/src/components/gpx/styles.ts +++ b/src/components/gpx/styles.ts @@ -2,6 +2,14 @@ import { Fill, Text, Icon, Stroke, Style } from 'ol/style'; import startIcon from '../../icons/flag-start-b-svgrepo-com-green.svg'; import finishIcon from '../../icons/flag-finish-b-o-svgrepo-com-red.svg'; import wptIcon from '../../icons/location-pin-svgrepo-com-green.svg'; +import houseIcon from '../../icons/house-svgrepo-com.svg'; +import houseFlatIcon from '../../icons/houseFlat-svgrepo-com.svg'; +import campingIcon from '../../icons/camping-14-svgrepo-com.svg'; +import farmPigIcon from '../../icons/farm-pig-svgrepo-com.svg'; +import cheeseIcon from '../../icons/cheese-svgrepo-com.svg'; +import trainIcon from '../../icons/train-svgrepo-com.svg'; +import picnicIcon from '../../icons/picnic-svgrepo-com.svg'; +import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg'; import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg'; import { Feature } from 'ol'; import memoize from 'memoizee'; @@ -11,6 +19,64 @@ interface StyleParameters { isSelected: boolean; } +const icons = { + house: { + src: houseIcon, + scale: 1 / 15, + opacity: 0.9, + anchor: [0.5, 1], + }, + houseFlat: { + src: houseFlatIcon, + scale: 1 / 15, + opacity: 0.9, + anchor: [0.5, 1], + }, + camping: { + src: campingIcon, + scale: 2, + opacity: 0.9, + anchor: [0.5, 1], + }, + farmPig: { + src: farmPigIcon, + scale: 1 / 12, + opacity: 0.9, + anchor: [0.5, 1], + }, + cheese: { + src: cheeseIcon, + scale: 3 / 4, + opacity: 0.9, + anchor: [0.5, 1], + }, + train: { + src: trainIcon, + scale: 1 / 10, + opacity: 0.9, + anchor: [0.5, 1], + }, + picnic: { + src: picnicIcon, + scale: 1 / 15, + opacity: 0.9, + anchor: [0.5, 1], + }, + cave: { + src: caveIcon, + scale: 1 / 7, + opacity: 0.9, + anchor: [0.5, 1], + }, +}; + +const wptIconObj = { + src: wptIcon, + scale: 0.1, + opacity: 0.9, + anchor: [0.5, 1], +}; + const textStroke = new Stroke({ color: '#fff', width: 3, @@ -47,12 +113,11 @@ const styles = { }), }, wpt: { - image: new Icon({ - src: wptIcon, - scale: 0.1, - opacity: 0.9, - anchor: [0.5, 1], - }), + image: (feature: Feature) => { + const customIcon = icons[feature.get('sym') as keyof typeof icons]; + const icon = customIcon ?? wptIconObj; + return new Icon(icon); + }, text: (feature: Feature) => new Text({ font: '16px Calibri,sans-serif', diff --git a/src/components/wpt/Wpt.tsx b/src/components/wpt/Wpt.tsx index 53f5b1e..b5cbe92 100644 --- a/src/components/wpt/Wpt.tsx +++ b/src/components/wpt/Wpt.tsx @@ -153,6 +153,13 @@ export const Wpt: Component = ({ vectorSource, wptId: wptId }) => { setEditedWpt({ ...editedWpt(), name: value }); }} /> + { + setEditedWpt({ ...editedWpt(), sym: value }); + }} + />