From 2b19746bb299635ddcafa8f399db2d85b729ca78 Mon Sep 17 00:00:00 2001
From: Eric van der Vlist <vdv@dyomedea.com>
Date: Mon, 7 Aug 2023 18:56:28 +0200
Subject: [PATCH] Displaying a cycle icon when GPX locomotion tag is cycling

---
 .vscode/settings.json                 |  3 ++-
 src/components/gpx/styles.ts          |  8 ++++++--
 src/components/trkseg/Trkseg.tsx      |  2 ++
 src/icons/bicycle-man-svgrepo-com.svg | 21 +++++++++++++++++++++
 4 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 src/icons/bicycle-man-svgrepo-com.svg

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 35248e4..55ca310 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,6 @@
         "docuri",
         "Dyomedea",
         "stackoverflow"
-    ]
+    ],
+    "workbench.colorTheme": "Default Light Modern"
 }
\ No newline at end of file
diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts
index b81a070..e24b0c3 100644
--- a/src/components/gpx/styles.ts
+++ b/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],
diff --git a/src/components/trkseg/Trkseg.tsx b/src/components/trkseg/Trkseg.tsx
index ac51680..b0809ea 100644
--- a/src/components/trkseg/Trkseg.tsx
+++ b/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`,
           },
diff --git a/src/icons/bicycle-man-svgrepo-com.svg b/src/icons/bicycle-man-svgrepo-com.svg
new file mode 100644
index 0000000..a38ec0b
--- /dev/null
+++ b/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>
\ No newline at end of file