feat(globe): add screenshot export

src/scripts/components/globe-navigation/globe-navigation.tsx

@@ -8,6 +8,7 @@ import {DownloadIcon} from '../icons/download-icon';
 import setGlobeProjectionAction from '../../actions/set-globe-projection';
 import {projectionSelector} from '../../selectors/globe/projection';
 import setFlyToAction from '../../actions/set-fly-to';
+import {downloadScreenshot} from '../../libs/download-screenshot';
 
 import {GlobeProjection} from '../../types/globe-projection';
 
@@ -40,7 +41,7 @@ const GlobeNavigation: FunctionComponent = () => {
       <Button
         className={styles.downloadIcon}
         icon={DownloadIcon}
-        onClick={() => console.log('placeholder')}
+        onClick={() => downloadScreenshot()}
       />
     </div>
   );

src/scripts/components/globe/globe.tsx

@@ -36,7 +36,12 @@ const cesiumOptions = {
   navigationHelpButton: false,
   animation: false,
   timeline: false,
-  baseLayerPicker: false
+  baseLayerPicker: false,
+  contextOptions: {
+    webgl: {
+      preserveDrawingBuffer: true
+    }
+  }
 };
 
 interface Props {

src/scripts/libs/download-screenshot.ts

@@ -0,0 +1,42 @@
+// Downloads one or both Cesium canvases as an image file
+export function downloadScreenshot() {
+  const canvases = Array.from(
+    document.querySelectorAll('.cesium-viewer canvas') as NodeListOf<
+      HTMLCanvasElement
+    >
+  );
+
+  const finalCanvas = combineCanvases(canvases);
+  download(finalCanvas.toDataURL());
+}
+
+function combineCanvases(canvases: HTMLCanvasElement[]) {
+  if (canvases.length < 2) {
+    return canvases[0];
+  }
+
+  const canvas = document.createElement('canvas');
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+  const ctx = canvas.getContext('2d');
+
+  canvases.forEach((tmpCanvas, index) =>
+    ctx?.drawImage(tmpCanvas, (window.innerWidth / 2) * index, 0)
+  );
+
+  return canvas;
+}
+
+function download(url: string) {
+  const link = document.createElement('a');
+  link.setAttribute('href', url);
+  link.setAttribute('download', 'globe.png');
+  link.style.display = 'none';
+
+  document.body.appendChild(link);
+
+  setTimeout(() => {
+    link.click();
+    document.body.removeChild(link);
+  }, 1);
+}