Adding Wpt icons

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',

src/components/wpt/Wpt.tsx

@@ -153,6 +153,13 @@ export const Wpt: Component<Props> = ({ vectorSource, wptId: wptId }) => {
               setEditedWpt({ ...editedWpt(), name: value });
             }}
           />
+          <TextField
+            label={t('sym')}
+            defaultValue={wpt()?.sym}
+            onChange={(event: any, value: string) => {
+              setEditedWpt({ ...editedWpt(), sym: value });
+            }}
+          />
           <Stack spacing={2} direction='row' sx={{ marginTop: '20px' }}>
             <Button variant='outlined' color='secondary' onClick={closeHandler}>
               {t('cancel')}