Specific icon for notes

src/components/gpx/styles.ts

@@ -13,6 +13,7 @@ import caveIcon from '../../icons/cave-entrance-svgrepo-com.svg';
 import hikerIcon from '../../icons/hiker-svgrepo-com.svg';
 import leftArrowIcon from '../../icons/right-arrow-svgrepo-com.svg';
 import blackArrowheadPointingUp from '../../icons/black-arrowhead-pointing-up-svgrepo-com.svg';
+import noteIcon from '../../icons/note-svgrepo-com.svg';
 import wptIconSel from '../../icons/location-pin-svgrepo-com-red.svg';
 import { Feature } from 'ol';
 import memoize from 'memoizee';
@@ -45,6 +46,12 @@ getAllPoiTypes().forEach((type) => {
 });
 
 const icons = {
+  note: {
+    src: noteIcon,
+    scale: 1 / 20,
+    opacity: 0.9,
+    anchor: [0.5, 1],
+  },
   house: {
     src: houseIcon,
     scale: 1 / 15,
@@ -182,7 +189,9 @@ const styles = {
       return {
         isSelected: feature.get('isSelected') ?? false,
         text: feature.get('name'),
-        customIcon: icons[feature.get('sym') as keyof typeof icons],
+        customIcon:
+          icons[feature.get('sym') as keyof typeof icons] ||
+          icons[feature.get('extensions')?.category as keyof typeof icons],
         hidden: minZoom && getZoominteger() < minZoom,
       };
     },

src/icons/note-svgrepo-com.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 14V7C20 5.34315 18.6569 4 17 4H7C5.34315 4 4 5.34315 4 7V17C4 18.6569 5.34315 20 7 20H13.5M20 14L13.5 20M20 14H15.5C14.3954 14 13.5 14.8954 13.5 16V20" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8H16" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 12H12" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>