Fix getMap() for node.js

example/node/.gitignore

@@ -0,0 +1 @@
+image.jpeg

example/node/index.js

@@ -167,16 +167,18 @@ async function run() {
   const imageUrl = layerS2L2A.getMapUrl(getMapParams, ApiType.WMS);
   printOut('URL of S2 L2A image:', imageUrl);
 
-  const layerS2L2AWithEvalscript = new S2L2ALayer({ instanceId, layerId: s2l2aLayerId, evalscript: 'return [B02, B03, B04];' });
+  const layerS2L2AWithEvalscript = new S2L2ALayer({
+    instanceId,
+    layerId: s2l2aLayerId,
+    evalscript: 'return [B02, B03, B04];',
+  });
   const imageUrl2 = layerS2L2AWithEvalscript.getMapUrl(getMapParams, ApiType.WMS);
   printOut('URL of S2 L2A image with evalscript:', imageUrl2);
 
-  // this doesn't work because node.js doesn't support Blob:
-  // const fs = require('fs');
-  // const imageBlob = await layerS2L2A.getMap(getMapParams, ApiType.WMS);
-  // fs.writeFileSync('/tmp/imagewms.jpeg', Buffer.from(new Uint8Array(imageBlob)));
-  // const imageBlob2 = await layer.getMap(getMapParams, API_PROCESSING);
-  // fs.writeFileSync('/tmp/imageprocessing.jpeg', Buffer.from(new Uint8Array(imageBlob)));
+  // write the satellite image to JPG file:
+  const fs = require('fs');
+  const imageBlob = await layerS2L2A.getMap(getMapParams, ApiType.WMS);
+  fs.writeFileSync('./image.jpeg', imageBlob, { encoding: null });
 }
 
 run()

src/layer/AbstractLayer.ts

@@ -28,7 +28,11 @@ export class AbstractLayer {
     switch (api) {
       case ApiType.WMS:
         const url = this.getMapUrl(params, api);
-        const requestConfig: AxiosRequestConfig = { responseType: 'blob', useCache: true };
+        const requestConfig: AxiosRequestConfig = {
+          // 'blob' responseType does not work with Node.js:
+          responseType: typeof window !== 'undefined' && window.Blob ? 'blob' : 'arraybuffer',
+          useCache: true,
+        };
         const response = await axios.get(url, requestConfig);
         return response.data;
       default:

src/layer/__tests__/WmsLayer.ts

@@ -75,7 +75,7 @@ test('WmsLayer.getMap makes an appropriate request', () => {
     height: '512',
   });
   expect(axiosParams).toEqual({
-    responseType: 'blob',
+    responseType: typeof window !== 'undefined' && window.Blob ? 'blob' : 'arraybuffer',
     useCache: true,
   });
 });

src/layer/processing.ts

@@ -162,7 +162,8 @@ export async function processingGetMap(shServiceHostname: string, payload: Proce
       'Content-Type': 'application/json',
       Accept: '*/*',
     },
-    responseType: 'blob',
+    // 'blob' responseType does not work with Node.js:
+    responseType: typeof window !== 'undefined' && window.Blob ? 'blob' : 'arraybuffer',
     useCache: true,
   };
   const response = await axios.post(`${shServiceHostname}api/v1/process`, payload, requestConfig);

src/utils/axiosInterceptors.ts

@@ -51,13 +51,17 @@ const fetchCachedResponse = async (request: any): Promise<any> => {
 
   // serve from cache:
   request.adapter = async () => {
-    // when we get data from cache, we want to return it in the same form as the original axios request
-    // (without cache) would, so we convert it appropriately:
+    // when we get data (Response) from cache (Cache API), we want to return it in the
+    // same form as the original axios request (without cache) would, so we convert it
+    // appropriately:
     let responseData;
     switch (request.responseType) {
       case 'blob':
         responseData = await cachedResponse.blob();
         break;
+      case 'arraybuffer':
+        responseData = await cachedResponse.arrayBuffer();
+        break;
       case 'text':
         responseData = await cachedResponse.text();
         break;
@@ -115,8 +119,9 @@ const saveCacheResponse = async (response: any): Promise<any> => {
   let responseData;
   switch (request.responseType) {
     case 'blob':
+    case 'arraybuffer':
     case 'text':
-      // usual response types are strings, so we can save them as they are:
+      // we can save usual responses as they are:
       responseData = response.data;
       break;
     case 'json':