fix(electron): make multiple basemaps work offline (#379)

ci/cloudbuild-electron-builder.yaml

@@ -2,6 +2,19 @@ steps:
   - name: 'gcr.io/cloud-builders/npm'
     entrypoint: npm
     args: ['ci']
+
+  - name: 'stedolan/jq'
+    entrypoint: 'bash'
+    args: ['-c', 'jq -r <package.json ".version" > version.txt']
+
+  - name: 'gcr.io/esa-climate-from-space/electron-builder'
+    entrypoint: 'npm'
+    args: ['run', 'electron:prepare-build']
+
+  - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk:alpine'
+    entrypoint: 'bash'
+    args: ['-c', 'gsutil -m cp -r gs://esa-cfs-tiles/$(cat version.txt)/basemaps ./dist']
+
   - name: 'gcr.io/esa-climate-from-space/electron-builder'
     env:
       - 'ELECTRON_CACHE=/root/.cache/electron'

package.json

@@ -21,7 +21,9 @@
     "electron:start": "npm run electron:compile && electron .",
     "electron:install": "electron-builder install-app-deps",
     "electron:clean": "rm -rf ./dist-electron && rm -rf ./dist-src-electron",
-    "electron:build": "npm run electron:clean && npm run electron:install && npm run build && npm run electron:compile && electron-builder -mwl --x64 --config electron-builder.json",
+    "electron:prepare-build": "npm run electron:clean && npm run electron:install && npm run build && npm run electron:compile",
+    "electron:build": "electron-builder -mwl --x64 --config electron-builder.json",
+    "electron:download-basemaps": "gsutil -m cp -r gs://esa-cfs-tiles/${npm_package_version}/basemaps ./dist",
     "story-packages": "./scripts/create-story-packages.sh",
     "clean:story-packages": "find ./storage -type f -name \"*.zip\" -delete",
     "upload-storage": "npm run story-packages && gsutil rsync -r -x \".DS_Store\" ./storage gs://esa-cfs-storage/$npm_package_version && gsutil -m setmeta -r -h \"Cache-Control: no-cache\" gs://esa-cfs-storage/$npm_package_version/ && npm run clean:story-packages"

scripts/basemap-tiles.sh

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 # Usage: ./basemap-tiles.sh <input-file> <output-folder>
-# with Docker: docker run -v `pwd`:/data -w /data --name gdal2 -it --rm geographica/gdal2 ./basemap-tiles
+# with Docker: docker run -v `pwd`:/data -w /data --name gdal2 -it --rm geographica/gdal2 ./basemap-tiles <input-file> <output-folder>
 
 # Images and worldfiles can be found here: https://drive.google.com/drive/folders/15UR1BBZRVPvLlvPF3s5yYNqpdmd6PMcF
 # Upload tiles with: gsutil -m cp -r ./<output-folder>/ gs://esa-cfs-tiles/<version>/basemaps/<name>

src/scripts/components/globe/globe.tsx

@@ -16,6 +16,7 @@ import {
   setGlobeView,
   flyToGlobeView
 } from '../../libs/get-globe-view';
+import {isElectron} from '../../libs/electron/index';
 
 import {GlobeView} from '../../types/globe-view';
 import {GlobeProjection} from '../../types/globe-projection';
@@ -57,10 +58,12 @@ let basemapLayer: Cesium.ImageryLayer | null = null;
 
 function getBasemapUrl(id: BasemapId | null) {
   if (!id || !config.basemapUrls[id]) {
-    return config.basemapUrls[config.defaultBasemap];
+    return isElectron()
+      ? config.basemapUrlsOffline[config.defaultBasemap]
+      : config.basemapUrls[config.defaultBasemap];
   }
 
-  return config.basemapUrls[id];
+  return isElectron() ? config.basemapUrlsOffline[id] : config.basemapUrls[id];
 }
 
 const Globe: FunctionComponent<Props> = ({

src/scripts/config/main.ts

@@ -34,6 +34,13 @@ const basemapUrls = {
   blue: `${baseUrlTiles}/basemaps/blue`
 };
 
+const basemapUrlsOffline = {
+  land: 'basemaps/land',
+  ocean: 'basemaps/ocean',
+  atmosphere: 'basemaps/atmosphere',
+  blue: 'basemaps/blue'
+};
+
 export default {
   api: {
     layers: `${baseUrlStorage}/layers/layers-{lang}.json`,
@@ -47,6 +54,7 @@ export default {
   },
   defaultBasemap: 'land' as keyof typeof basemapUrls,
   basemapUrls,
+  basemapUrlsOffline,
   globe: globeState,
   share: {
     facebook: