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

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

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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;
     /**