force redraw in screenshot image

GlobalFishingWatch · Apr 17, 2024 · 7c808e4 · 7c808e4
1 parent 786172b
commit 7c808e4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 6 deletions.
diff --git a/apps/fishing-map/features/map/Map.tsx b/apps/fishing-map/features/map/Map.tsx
@@ -38,6 +38,7 @@ import useRulers from './overlays/rulers/rulers.hooks'
 import { useDrawLayer } from './overlays/draw/draw.hooks'
 import { useMapDrawConnect } from './map-draw.hooks'
 import MapInfo from './controls/MapInfo'
+import { MAP_CANVAS_ID } from './map.config'
 
 // This avoids type checking to complain
 // https://github.com/visgl/deck.gl/issues/7304#issuecomment-1277850750
@@ -224,7 +225,7 @@ const MapWrapper = () => {
   return (
     <div className={styles.container}>
       <DeckGL
-        id="map"
+        id={MAP_CANVAS_ID}
         ref={deckRef}
         views={MAP_VIEW}
         layers={deckRef ? (layers as LayersList) : []}
@@ -233,9 +234,6 @@ const MapWrapper = () => {
         }}
         style={mapStyles}
         getCursor={getCursor}
-        // more info about preserveDrawingBuffer
-        // https://github.com/visgl/deck.gl/issues/4436#issuecomment-610472868
-        glOptions={{ preserveDrawingBuffer: true }}
         layerFilter={({ renderPass, layer }) => {
           // This avoids performing the default picking
           // since we are handling it through pickMultipleObjects

diff --git a/apps/fishing-map/features/map/MapScreenshot.tsx b/apps/fishing-map/features/map/MapScreenshot.tsx
@@ -5,6 +5,7 @@ import { Deck } from '@deck.gl/core'
 import { getCSSVarValue } from 'utils/dom'
 import { useDeckMap } from 'features/map/map-context.hooks'
 import styles from './Map.module.css'
+import { MAP_WRAPPER_ID } from './map.config'
 
 type PrintSize = {
   px: number
@@ -28,6 +29,7 @@ export const getMapImage = (map: Deck): Promise<string> => {
     }
     const canvas = map.getCanvas()
     if (canvas) {
+      map.redraw('screenshot')
       resolve(canvas.toDataURL())
     } else {
       reject('No map canvas found')
@@ -73,15 +75,20 @@ function MapScreenshot() {
 
   // insert the image just below the canvas
   // TODO:deck migrate this
-  const canvasDomElement = document.querySelector('.maplibregl-canvas-container')
+  const canvasDomElement = document.getElementById(MAP_WRAPPER_ID)
   if (!canvasDomElement) return null
   const size = isPrintSupported
     ? `${printSize.current?.width.in} ${printSize.current?.height.in}`
     : 'landscape'
   return createPortal(
     <Fragment>
       {/* eslint-disable-next-line @next/next/no-img-element */}
-      <img className={styles.screenshot} src={screenshotImage} alt="map screenshot" />
+      <img
+        id="screenshot-img"
+        className={styles.screenshot}
+        src={screenshotImage}
+        alt="map screenshot"
+      />
       <style>
         {`@page {
           size: ${size};

diff --git a/apps/fishing-map/features/map/map.config.ts b/apps/fishing-map/features/map/map.config.ts
@@ -1,5 +1,8 @@
 import { RULER_INTERACTIVE_LAYER } from '@globalfishingwatch/layer-composer'
 
+export const MAP_CANVAS_ID = 'map'
+export const MAP_WRAPPER_ID = `${MAP_CANVAS_ID}-wrapper`
+
 export const WORKSPACES_POINTS_TYPE = 'workspace'
 export const WORKSPACE_GENERATOR_ID = 'workspace_points'
 export const REPORT_BUFFER_GENERATOR_ID = 'report-area-buffer'