Fix background opacity adjustment

src/app/map/gisaf-mapbox/gisaf-mapbox.component.ts

@@ -197,21 +197,35 @@ export class GisafMapboxComponent implements OnInit, OnDestroy {
   }
 
   _getNewSingleOpacity(layerId: string, originalOpacity: number | object): number | object {
-    if (typeof (originalOpacity) === 'number') {
+    if (originalOpacity === undefined) {
+      return undefined
+    }
+    else if (typeof originalOpacity === 'number') {
       return originalOpacity * this._baseStyleOpacity
     }
-    else {
-      let newOpacity = {}
-      for (const k in originalOpacity) {
-        let v = originalOpacity[k]
-        if (k == 'stops') {
-          newOpacity[k] = v.map(stop => [stop[0], stop[1] * this._baseStyleOpacity])
-        }
-        else {
-          newOpacity[k] = v
-        }
+    else if (typeof originalOpacity === 'object') {  // Also matches array
+      if (originalOpacity[0] == 'interpolate') {
+        // Change the last interpolation point
+        originalOpacity[Object.values(originalOpacity).length - 1] = this._baseStyleOpacity
+        return originalOpacity
       }
-      return newOpacity
+      else {
+        let newOpacity = {}
+        for (const k in originalOpacity) {
+          let v = originalOpacity[k]
+          if (k == 'stops') {
+            newOpacity[k] = v.map(stop => [stop[0], stop[1] * this._baseStyleOpacity])
+          }
+          else {
+            newOpacity[k] = v
+          }
+        }
+        return newOpacity
+      }
+    }
+    else {
+      console.log(`Cannot process opacity of layer ${layerId}, unknown type ${typeof originalOpacity}`)
+      return originalOpacity
     }
   }
 
@@ -219,25 +233,30 @@ export class GisafMapboxComponent implements OnInit, OnDestroy {
     let originalStyle = this.originalBaseStyle.style['layers'].find(
       (_layer: object) => layer['id'] == _layer['id']
     )
-    if (!('paint' in originalStyle)) {
-      originalStyle['paint'] = {}
-    }
-    if (['raster', 'background', 'fill', 'line'].indexOf(layer['type']) != -1) {
-      let prop = layer['type'] + '-opacity'
-      return {
-        [prop]: this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop] || 1.0)
-      }
-    }
-    else {
+    let originalPaint = originalStyle['paint'] || {}
+    if (layer['type'] == 'symbol') {
       let prop1 = 'text-opacity'
       let prop2 = 'icon-opacity'
-      let newOpacity1 = this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop1] || 1.0)
-      let newOpacity2 = this._getNewSingleOpacity(layer['id'], originalStyle['paint'][prop2] || 1.0)
+      let newOpacity1 = this._getNewSingleOpacity(layer['id'], originalPaint[prop1] || 1.0)
+      let newOpacity2 = this._getNewSingleOpacity(layer['id'], originalPaint[prop2] || 1.0)
       return {
         [prop1]: newOpacity1,
         [prop2]: newOpacity2,
       }
     }
+    else if (layer['type'] == 'line') {
+      let prop = layer['type'] + '-opacity'
+      return {
+        [prop]: this._getNewSingleOpacity(layer['id'], originalPaint[prop] || 1.0)
+      }
+    }
+    else {
+      // layer['type'] in ['raster', 'background', 'fill', 'line', 'fill-extrusion']
+      let prop = layer['type'] + '-opacity'
+      return {
+        [prop]: this._getNewSingleOpacity(layer['id'], originalPaint[prop] || 1.0),
+      }
+    }
   }
 
   applyBaseStyleOpacity() {
@@ -247,7 +266,9 @@ export class GisafMapboxComponent implements OnInit, OnDestroy {
         continue
       }
       for (const [key, value] of Object.entries(this._getNewOpacity(bsLayer))) {
-        this.map.setPaintProperty(bsLayer.id, key, value)
+        if (value !== undefined) {
+          this.map.setPaintProperty(bsLayer.id, key, value)
+        }
       }
     }
   }