fix(notebook): enable map to show in pdf/png download (#3963)

* feat: enable map background to show up in download pdf/png

* fix: enable download map in pdf/png

* chore: add comment on canvas option

Author: appletreeisyellow

src/flows/components/header/index.tsx

@@ -204,6 +204,8 @@ const FlowHeader: FC = () => {
         .querySelectorAll('[data-download-hide]')
         .forEach(d => (d.style.display = 'block'))
     },
+    // Enable map background
+    useCORS: true,
   }
 
   const handleDownloadAsPNG = () => {

src/flows/pipes/Visualization/view.tsx

@@ -35,10 +35,15 @@ import {downloadImage} from 'src/shared/utils/download'
 import {isFlagEnabled} from 'src/shared/utils/featureFlag'
 import ErrorBoundary from 'src/shared/components/ErrorBoundary'
 
+// Enable map background
+const canvasOption = {
+  useCORS: true,
+}
+
 const downloadAsImage = (pipeID: string) => {
   const canvas = document.getElementById(pipeID)
   import('html2canvas').then((module: any) =>
-    module.default(canvas as HTMLDivElement).then(result => {
+    module.default(canvas as HTMLDivElement, canvasOption).then(result => {
       downloadImage(result.toDataURL(), 'visualization.png')
     })
   )
@@ -47,7 +52,7 @@ const downloadAsImage = (pipeID: string) => {
 const downloadAsPDF = (pipeID: string) => {
   const canvas = document.getElementById(pipeID)
   import('html2canvas').then((module: any) =>
-    module.default(canvas as HTMLDivElement).then(result => {
+    module.default(canvas as HTMLDivElement, canvasOption).then(result => {
       import('jspdf').then((jsPDF: any) => {
         const doc = new jsPDF.default({
           orientation: 'l',