fix: bug with printing widget

wri · Sep 7, 2023 · c62710d · c62710d
1 parent 0c2ba39
commit c62710d
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 7 deletions.
diff --git a/src/js/components/mapWidgets/widgetContent/printModal.tsx b/src/js/components/mapWidgets/widgetContent/printModal.tsx
@@ -23,7 +23,11 @@ export const PrintModal: FunctionComponent = () => {
 
     const { url } = await mapController.generateMapPDF(printType);
 
-    setURL(url);
+    if (url) {
+      setURL(url);
+    } else {
+      // TODO: display error message that PDF could not be generated?
+    }
     setPDFLoading(false);
   };
 

diff --git a/src/js/controllers/mapController.ts b/src/js/controllers/mapController.ts
@@ -692,24 +692,27 @@ export class MapController {
 
   // All Extra Layers are ignored in query, legend and left panel, layer with MASK ID uses GFW mask endpoint with ISO def expression (if no ISO code is present, we do not add mask layer)
   // Adding MASK Layer, which dims the area that is not the country ISO code based on Config ,separate from the flow as it comes in the config as 'extraLayers' array element, not following previous layer object specs
-  addExtraLayers(): void {
+  async addExtraLayers() {
     const appSettings = store.getState().appSettings;
     const { layerPanel } = appSettings;
     const extraLayers = layerPanel['extraLayers'];
-    extraLayers.forEach((exLayer: any) => {
+
+    for (let i = 0; i < extraLayers.length; i++) {
+      const exLayer = extraLayers[i];
+
       let extraEsriLayer;
       if (exLayer.id === 'MASK' && appSettings.iso && appSettings.iso.length !== 0) {
         exLayer.type = 'MASK';
-        extraEsriLayer = LayerFactory(this._mapview, exLayer);
+        extraEsriLayer = await LayerFactory(this._mapview, exLayer);
       } else if (exLayer.id === 'MASK' && (!appSettings.iso || appSettings.iso.length === 0)) {
         extraEsriLayer = null;
       } else {
-        extraEsriLayer = LayerFactory(this._mapview, exLayer);
+        extraEsriLayer = await LayerFactory(this._mapview, exLayer);
       }
       if (extraEsriLayer) {
         this._map!.add(extraEsriLayer);
       }
-    });
+    }
   }
 
   async addLandsatLayer(layerConfig: LayerProps, year: string): Promise<void> {
@@ -1551,14 +1554,38 @@ export class MapController {
         customTextElements: [{ title: 'GFW Mapbuilder' }, { subtitle: 'Make maps that matter' }],
       },
     });
+    this.toggleMaskLayer(false);
 
     const params = new PrintParameters({
       view: this._mapview,
       template,
     });
 
     if (!this._printTask) return;
-    return await this._printTask.execute(params).catch((e) => console.log('error in generateMapPDF()', e));
+
+    try {
+      const res = await this._printTask.execute(params);
+
+      if (res?.url) {
+        this.toggleMaskLayer(true);
+        return res;
+      }
+    } catch (error) {
+      console.error('error in generateMapPDF()', error);
+      return { url: null };
+    }
+  };
+
+  toggleMaskLayer = (visible: boolean) => {
+    const allLayers = this._mapview?.map.allLayers;
+
+    // set visibility of mask layer to false when printing the map, trying to print map with mask layer visible causes the print service to fail
+    // after printing is complete, set visibility of mask layer back to true
+    allLayers?.items.forEach((layer: any) => {
+      if (layer.id === 'MASK') {
+        layer.visible = visible;
+      }
+    });
   };
 
   setPolygon = async (points: Array<__esri.Point>): Promise<void> => {