fix(POI Maps): add pixel ratio option for image

Allow to support HDI displays
opendatasoft · Dec 7, 2023 · 1f85bba · 1f85bba
1 parent c11c6f0
commit 1f85bba
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx b/packages/visualizations-react/stories/Poi/PoiMap.stories.tsx
@@ -110,19 +110,24 @@ const legend = {
     align: 'start' as const,
 };
 
+const images: PoiMapOptions['images'] = {
+    'battle-icon': {
+        id: 'battle-icon',
+        url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/50/Big_battle_symbol.svg/14px-Big_battle_symbol.svg.png',
+    },
+    'battle-icon-red': {
+        id: 'battle-icon-red',
+        url: '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,
     title: 'Lorem Ipsum',
     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
@@ -11,7 +11,7 @@ import maplibregl, {
 } from 'maplibre-gl';
 
 import { POPUP_OPTIONS, POPUP_WIDTH } from './constants';
-import type { PopupsConfiguration, CenterZoomOptions } from './types';
+import type { PopupsConfiguration, Images, CenterZoomOptions } from './types';
 
 const CURSOR = {
     DEFAULT: 'default',
@@ -326,11 +326,11 @@ 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?: Images) {
         if (!images) return;
         this.queue((map) => {
             const loadedImages = map.listImages();
-            const imagesIds = Object.keys(images);
+            const imagesIds = Object.values(images).map(({ id }) => id);
 
             const imagesToRemove = difference(loadedImages, imagesIds);
             const imagesToAdd = difference(imagesIds, loadedImages);
@@ -340,12 +340,12 @@ export default class MapPOI {
             });
 
             imagesToAdd.forEach((imageId) => {
-                map.loadImage(images[imageId], (error, image) => {
+                map.loadImage(images[imageId].url, (error, image) => {
                     if (error || !image) {
                         // eslint-disable-next-line no-console
                         console.warn(`Fail to load image: ${imageId}`);
                     } else {
-                        map.addImage(imageId, image);
+                        map.addImage(imageId, image, images[imageId].options);
                     }
                 });
             });

diff --git a/packages/visualizations/src/components/MapPoi/types.ts b/packages/visualizations/src/components/MapPoi/types.ts
@@ -6,6 +6,7 @@ import type {
     LngLatLike,
     RequestTransformFunction,
     GestureOptions,
+    StyleImageMetadata,
 } from 'maplibre-gl';
 import type { BBox, GeoJsonProperties } from 'geojson';
 
@@ -18,6 +19,10 @@ export type PoiMapData = Partial<{
     layers: Layer[];
 }>;
 
+export type Images = Record<
+    string,
+    { id: string; url: string; options?: Partial<StyleImageMetadata> }
+>;
 export interface PoiMapOptions {
     /*
      * To render a basemap. Could be:
@@ -54,7 +59,7 @@ export interface PoiMapOptions {
     sourceLink?: Source;
     cooperativeGestures?: boolean | GestureOptions;
     /** Images to load by the Map. keys are image ids  */
-    images?: Record<string, string>;
+    images?: Images;
 }
 
 export type PoiMapStyleOption = Partial<Pick<StyleSpecification, 'sources' | 'layers'>>;
@@ -94,6 +99,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;
     /**