From 9beb1eb1a33cb682e74d8729c68990823fa67b95 Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Mon, 24 Apr 2023 15:26:03 +0200
Subject: [PATCH] Displaying thumbnails on the map

---
 src/components/gpx/styles.ts | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/gpx/styles.ts b/src/components/gpx/styles.ts
index e1336aa..5facecf 100644
--- a/src/components/gpx/styles.ts
+++ b/src/components/gpx/styles.ts
@@ -33,6 +33,7 @@ import {
 } from '../map-tile-provider/MapTileProvider';
 import { getCenter } from 'ol/extent';
 import { getVectorTileFeatureType } from '../overlays/overlay-definitions';
+import { Category } from '../wpt/WptEditDialog';
 
 interface StyleParameters {
   type: string;
@@ -175,23 +176,30 @@ const memoizeOptions = {
 const styles = {
   wpt: {
     getParameters: (feature: Feature) => {
-      const minZoom = feature.get('extensions')?.['dyo:minZoom'];
+      const extensions = feature.get('extensions');
+      const minZoom = extensions?.['dyo:minZoom'];
+      const category = extensions?.category;
       return {
         isSelected: feature.get('isSelected') ?? false,
         text: feature.get('name'),
         customIcon:
           icons[feature.get('sym') as keyof typeof icons] ||
-          icons[feature.get('extensions')?.category as keyof typeof icons],
+          icons[category as keyof typeof icons],
+        thumbnailUrl:
+          category === Category.PICTURE ? extensions?.thumbnailUrl : undefined,
         hidden: minZoom && getZoominteger() < minZoom,
       };
     },
     getStyle: memoize((params: any) => {
-      //      console.log({ caller: 'getStyle', params });
-      const { isSelected, text, customIcon, hidden } = params;
+      // console.log({ caller: 'getStyle', params });
+      const { isSelected, text, customIcon, hidden, thumbnailUrl } = params;
       if (hidden) {
         return null;
       }
-      const icon = customIcon ?? wptIconObj;
+      const thumbnailIcon = !!thumbnailUrl
+        ? { src: thumbnailUrl, scale: 1 / 2, anchor: [0.5, 0.5] }
+        : undefined;
+      const icon = customIcon ?? thumbnailIcon ?? wptIconObj;
       return new Style({
         image: new Icon(icon),
         text: new Text({