Merge pull request #237 from opendatasoft/feature/add-preserve-drawin…

…g-buffer-option-for-maps

feat: add preserveDrawingBuffer option to Maplibre maps

packages/visualizations/src/components/Map/WebGl/ChoroplethGeoJson.svelte

@@ -47,6 +47,7 @@
     // Data source link
     let sourceLink: Source | undefined;
     let cooperativeGestures: boolean | GestureOptions | undefined;
+    let preserveDrawingBuffer: boolean;
 
     // Used to apply a chosen color for shapes without values (default: #cccccc)
     let emptyValueColor: Color;
@@ -71,6 +72,7 @@
         navigationMaps,
         sourceLink,
         cooperativeGestures,
+        preserveDrawingBuffer = false,
     } = options);
 
     // Choropleth is always display over a blank map, for readability purposes
@@ -137,6 +139,7 @@
         {data}
         {sourceLink}
         {cooperativeGestures}
+        {preserveDrawingBuffer}
     />
 </div>
 

packages/visualizations/src/components/Map/WebGl/ChoroplethVectorTiles.svelte

@@ -56,6 +56,7 @@
     // Data source link
     let sourceLink: Source | undefined;
     let cooperativeGestures: boolean | GestureOptions | undefined;
+    let preserveDrawingBuffer: boolean;
     let fixedMaxBounds: LngLatBoundsLike | undefined;
 
     // Used to apply a chosen color for shapes without values (default: #cccccc)
@@ -84,6 +85,7 @@
         navigationMaps,
         sourceLink,
         cooperativeGestures,
+        preserveDrawingBuffer = false,
         fixedMaxBounds,
     } = options);
 
@@ -163,6 +165,7 @@
     {data}
     {sourceLink}
     {cooperativeGestures}
+    {preserveDrawingBuffer}
     {fixedMaxBounds}
 />
 

packages/visualizations/src/components/Map/WebGl/MapRender.svelte

@@ -69,6 +69,7 @@
     // Data source link
     export let sourceLink: Source | undefined;
     export let cooperativeGestures: boolean | GestureOptions | undefined;
+    export let preserveDrawingBuffer: boolean;
     // Fixed max bounds that will overide the automatic map.getBounds when setting the bbox
     export let fixedMaxBounds: LngLatBoundsLike | undefined | null = null;
 
@@ -133,6 +134,7 @@
             customAttribution: attribution,
             renderWorldCopies: false,
             cooperativeGestures,
+            preserveDrawingBuffer,
         };
 
         map = new maplibregl.Map({
@@ -435,7 +437,7 @@
     figcaption h3 {
         margin: 0;
     }
-    /* To add classes programmatically in svelte we will use a global selector. 
+    /* To add classes programmatically in svelte we will use a global selector.
     We place it inside a local selector to obtain some encapsulation and avoid side effects */
     .map-card :global(.tooltip-on-hover > .maplibregl-popup-content) {
         border-radius: 6px;

packages/visualizations/src/components/Map/types.ts

@@ -47,6 +47,8 @@ export interface ChoroplethOptions {
     /** Link button to source */
     sourceLink?: Source;
     cooperativeGestures?: boolean | GestureOptions;
+    /** If true, the map's canvas can be exported to an image using toDataURL. This is false by default as a performance optimization. */
+    preserveDrawingBuffer?: boolean;
 }
 
 export interface MapFilter {

packages/visualizations/src/components/MapPoi/Map.svelte

@@ -40,6 +40,7 @@
         images,
         transformRequest,
         cooperativeGestures,
+        preserveDrawingBuffer,
     } = getMapOptions(options));
 
     const bbox = createDeepEqual(_bbox);
@@ -70,6 +71,7 @@
             {images}
             {transformRequest}
             {cooperativeGestures}
+            {preserveDrawingBuffer}
         />
     {/key}
 </div>

packages/visualizations/src/components/MapPoi/MapRender.svelte

@@ -39,6 +39,7 @@
     export let legend: CategoryLegendType | undefined;
     export let description: string | undefined;
     export let cooperativeGestures: boolean | GestureOptions | undefined;
+    export let preserveDrawingBuffer: boolean;
     // Data source link
     export let sourceLink: Source | undefined;
 
@@ -73,6 +74,7 @@
             minZoom,
             maxZoom,
             cooperativeGestures,
+            preserveDrawingBuffer,
         };
         map.initialize(style, container, options);
     });
@@ -135,7 +137,7 @@
         margin: 0;
     }
 
-    /* To add classes programmatically in svelte we will use a global selector. 
+    /* To add classes programmatically in svelte we will use a global selector.
     We place it inside a local selector to obtain some encapsulation and avoid side effects */
 
     /* --- POPUP ---  */

packages/visualizations/src/components/MapPoi/types.ts

@@ -58,6 +58,8 @@ export interface PoiMapOptions {
     /** Link button to source */
     sourceLink?: Source;
     cooperativeGestures?: boolean | GestureOptions;
+    /** If true, the map's canvas can be exported to an image using toDataURL. This is false by default as a performance optimization. */
+    preserveDrawingBuffer?: boolean;
     /** Images to load by the Map. keys are image ids  */
     images?: Images;
 }

packages/visualizations/src/components/MapPoi/utils.ts

@@ -172,6 +172,7 @@ export const getMapOptions = (options: PoiMapOptions) => {
         sourceLink,
         transformRequest,
         cooperativeGestures,
+        preserveDrawingBuffer = false,
         images,
     } = options;
     return {
@@ -189,6 +190,7 @@ export const getMapOptions = (options: PoiMapOptions) => {
         sourceLink,
         transformRequest,
         cooperativeGestures,
+        preserveDrawingBuffer,
         images,
     };
 };