From 0530bd4656b57933857b80b3e38c85e1d22a2ed8 Mon Sep 17 00:00:00 2001
From: Kevin Fabre <kevin.fabre@opendatasoft.com>
Date: Thu, 7 Dec 2023 09:27:29 +0100
Subject: [PATCH] fix(POI Maps): add pixel ratio option for image

Allow to support HDI displays
---
 .../stories/Poi/PoiMap.stories.tsx                 | 14 ++++++++------
 .../visualizations/src/components/MapPoi/Map.ts    |  7 ++++---
 .../visualizations/src/components/MapPoi/types.ts  |  4 +++-
 3 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
index f11bbc8d..9784539f 100644
--- a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
+++ b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -110,6 +110,13 @@ const legend = {
     align: 'start' as const,
 };
 
+const images: PoiMapOptions['images'] = {
+    pixelRatio: 1,
+    'battle-icon':
+        'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Big_battle_symbol.svg/14px-Big_battle_symbol.svg.png',
+    'battle-icon-red':
+        'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Battle_icon_gladii_red.svg/14px-Battle_icon_gladii_red.svg.png',
+};
 const options: PoiMapOptions = {
     style: BASE_STYLE,
     bbox,
@@ -117,12 +124,7 @@ const options: PoiMapOptions = {
     subtitle: 'Dolor Sit Amet',
     description: 'More aria description',
     sourceLink: defaultSource,
-    images: {
-        'battle-icon':
-            'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Big_battle_symbol.svg/14px-Big_battle_symbol.svg.png',
-        'battle-icon-red':
-            'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/Battle_icon_gladii_red.svg/14px-Battle_icon_gladii_red.svg.png',
-    },
+    images,
 };
 
 const meta: ComponentMeta<typeof PoiMap> = {
diff --git a/packages/visualizations/src/components/MapPoi/Map.ts b/packages/visualizations/src/components/MapPoi/Map.ts
index 23a96ce4..96897e5d 100644
--- a/packages/visualizations/src/components/MapPoi/Map.ts
+++ b/packages/visualizations/src/components/MapPoi/Map.ts
@@ -326,11 +326,12 @@ export default class MapPOI {
      * Load images into the map.
      * Remove automatically any images previously loaded that are no longer defined in the images object.
      */
-    loadImages(images?: Record<string, string>) {
+    loadImages(images?: { [key: string]: string } & { pixelRatio?: number }) {
         if (!images) return;
         this.queue((map) => {
+            const { pixelRatio, ...rest } = images;
             const loadedImages = map.listImages();
-            const imagesIds = Object.keys(images);
+            const imagesIds = Object.keys(rest);
 
             const imagesToRemove = difference(loadedImages, imagesIds);
             const imagesToAdd = difference(imagesIds, loadedImages);
@@ -345,7 +346,7 @@ export default class MapPOI {
                         // eslint-disable-next-line no-console
                         console.warn(`Fail to load image: ${imageId}`);
                     } else {
-                        map.addImage(imageId, image);
+                        map.addImage(imageId, image, { pixelRatio });
                     }
                 });
             });
diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/MapPoi/types.ts
index ec9fc0ef..fa1314b4 100644
--- a/packages/visualizations/src/components/MapPoi/types.ts
+++ b/packages/visualizations/src/components/MapPoi/types.ts
@@ -54,7 +54,7 @@ export interface PoiMapOptions {
     sourceLink?: Source;
     cooperativeGestures?: boolean | GestureOptions;
     /** Images to load by the Map. keys are image ids  */
-    images?: Record<string, string>;
+    images?: { [key: string]: string } & { pixelRatio: number };
 }
 
 export type PoiMapStyleOption = Partial<Pick<StyleSpecification, 'sources' | 'layers'>>;
@@ -94,6 +94,8 @@ export type CircleLayer = BaseLayer & {
 
 export type SymbolLayer = BaseLayer & {
     type: SymbolLayerSpecification['type'];
+    /** Scales the original size of the icon by the provided factor. */
+    // iconSize: number,
     /** id of the image to use as icon-image */
     iconImageId: string;
     /**