Displaying a cycle icon when GPX locomotion tag is cycling

.vscode/settings.json

@@ -4,5 +4,6 @@
         "docuri",
         "Dyomedea",
         "stackoverflow"
-    ]
+    ],
+    "workbench.colorTheme": "Default Light Modern"
 }

src/components/gpx/styles.ts

@@ -9,6 +9,7 @@ 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 hikerIcon from '../../icons/hiker-svgrepo-com.svg';
+import cycleIcon from '../../icons/bicycle-man-svgrepo-com.svg';
 import blackArrowheadPointingUp from '../../icons/black-arrowhead-pointing-up-svgrepo-com.svg';
 import noteIcon from '../../icons/note-svgrepo-com.svg';
 import { Feature } from 'ol';
@@ -28,6 +29,7 @@ import {
 } from '../overlays/overlay-definitions';
 import { Category } from '../wpt/WptEditDialog';
 import { mustBeDrawn } from '../drawing-selector';
+import { getTagValue } from '../../lib/tags/tags';
 
 interface StyleParameters {
   type: string;
@@ -290,17 +292,19 @@ const styles = {
     getParameters: (feature: Feature) => {
       if (!mustBeDrawn(feature)) return null;
       const positions: Set<string> = feature.get('positions');
+      const tags: any = feature.get('tags') || {};
       return {
         isLast: positions.has('gpx-end') && positions.has('trk-end'),
+        locomotion: getTagValue(tags, 'locomotion') || 'hiking',
       };
     },
     getStyle: memoize((params: any) => {
       //      console.log({ caller: 'getStyle', params });
-      const { isLast } = params;
+      const { isLast, locomotion } = params;
       if (isLast) {
         return new Style({
           image: new Icon({
-            src: hikerIcon,
+            src: locomotion === 'cycling' ? cycleIcon : hikerIcon,
             scale: 1 / 20,
             opacity: 0.9,
             anchor: [0.5, 0.5],

src/components/trkseg/Trkseg.tsx

@@ -118,6 +118,7 @@ export const Trkseg: Component<Props> = ({
               id: trksegId,
               context: { ...context, trkseg, trksegId },
               positions: positions(),
+              tags,
             },
             id: trksegId,
           },
@@ -141,6 +142,7 @@ export const Trkseg: Component<Props> = ({
               id: trksegId,
               context: { ...context, trkseg, trksegId },
               positions: positions(),
+              tags,
             },
             id: `${trksegId}/end`,
           },

src/icons/bicycle-man-svgrepo-com.svg

@@ -0,0 +1,21 @@
+<?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 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="si-glyph si-glyph-bicycle-man">
+
<title>1102</title>
+
<defs>
+
</defs>
+
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+
<g transform="translate(1.000000, 2.000000)" fill="#434343">
+
<path d="M8.5,12.969 C8.141,12.967 8.005,12.68 8.006,12.316 L8.021,9.532 L5.153,6.44 C4.934,6.151 4.99,5.737 5.274,5.515 L8.836,2.582 C8.972,2.477 9.147,2.428 9.316,2.451 C9.486,2.473 9.641,2.564 9.746,2.703 L11.29,4.508 L13.579,5.605 C13.914,5.735 14.083,6.116 13.956,6.457 C13.828,6.798 13.453,6.97 13.117,6.84 L10.656,5.677 C10.543,5.633 10.445,5.56 10.371,5.462 L9.111,4.033 L6.687,6.16 L8.878,8.698 C8.964,8.814 8.968,8.912 8.968,9.058 L8.985,12.312 C8.984,12.676 8.859,12.97 8.5,12.969 L8.5,12.969 L8.5,12.969 Z" class="si-glyph-fill">
+
</path>
+
<g transform="translate(0.000000, 8.000000)">
+
<path d="M12.98,-0.018 C11.335,-0.018 10.003,1.326 10.003,2.983 C10.003,4.64 11.335,5.984 12.98,5.984 C14.625,5.984 15.958,4.64 15.958,2.983 C15.958,1.326 14.625,-0.018 12.98,-0.018 L12.98,-0.018 Z M12.975,5.046 C11.83,5.046 10.903,4.123 10.903,2.984 C10.903,1.845 11.831,0.922 12.975,0.922 C14.116,0.922 15.044,1.845 15.044,2.984 C15.044,4.123 14.115,5.046 12.975,5.046 L12.975,5.046 Z" class="si-glyph-fill">
+
</path>
+
<path d="M2.991,0.023 C1.349,0.023 0.02,1.353 0.02,2.994 C0.02,4.636 1.349,5.965 2.991,5.965 C4.631,5.965 5.962,4.636 5.962,2.994 C5.962,1.354 4.631,0.023 2.991,0.023 L2.991,0.023 Z M2.991,5.063 C1.847,5.063 0.922,4.137 0.922,2.994 C0.922,1.851 1.848,0.925 2.991,0.925 C4.133,0.925 5.06,1.851 5.06,2.994 C5.06,4.137 4.133,5.063 2.991,5.063 L2.991,5.063 Z" class="si-glyph-fill">
+
</path>
+
</g>
+
<ellipse cx="11.469" cy="1.486" rx="1.469" ry="1.486" class="si-glyph-fill">
+
</ellipse>
+
</g>
+
</g>
+
</svg>