fourwings static layer state typing and error handling

libs/deck-layers/src/layers/fourwings/heatmap/FourwingsHeatmapStaticLayer.ts

@@ -59,6 +59,7 @@ const defaultProps: DefaultProps<FourwingsHeatmapStaticLayerProps> = {
 export class FourwingsHeatmapStaticLayer extends CompositeLayer<FourwingsHeatmapTileLayerProps> {
   static layerName = 'FourwingsHeatmapStaticLayer'
   static defaultProps = defaultProps
+  state!: Omit<FourwingsTileLayerState, 'tilesCache'>
 
   initializeState(context: LayerContext) {
     super.initializeState(context)
@@ -76,16 +77,23 @@ export class FourwingsHeatmapStaticLayer extends CompositeLayer<FourwingsHeatmap
   }
 
   _getState() {
-    return this.state as FourwingsTileLayerState
+    return this.state
   }
 
   _getColorRanges = () => {
     return this.props.sublayers.map(({ colorRamp }) =>
       getColorRamp({ rampId: colorRamp as ColorRampId })
     )
   }
+
+  _onLayerError = (error: Error) => {
+    console.warn(error.message)
+    this.setState({ error: error.message })
+    return true
+  }
+
   getError(): string {
-    return (this.state as FourwingsTileLayerState).error
+    return this.state.error
   }
   _calculateColorDomain = () => {
     // TODO use to get the real bin value considering the NO_DATA_VALUE and negatives
@@ -160,7 +168,7 @@ export class FourwingsHeatmapStaticLayer extends CompositeLayer<FourwingsHeatmap
   }
 
   getFillColor = (feature: Feature<Geometry, FourwingsStaticFeatureProperties>) => {
-    const { scales } = this.state as FourwingsTileLayerState
+    const { scales } = this.state
     const scale = scales?.[0]
     if (
       !scale ||
@@ -196,7 +204,7 @@ export class FourwingsHeatmapStaticLayer extends CompositeLayer<FourwingsHeatmap
   renderLayers(): Layer<{}> | LayersList {
     const { tilesUrl, sublayers, resolution, minVisibleValue, maxVisibleValue, maxZoom } =
       this.props
-    const { colorDomain, colorRanges } = this.state as FourwingsTileLayerState
+    const { colorDomain, colorRanges } = this.state
     const { zoom } = this.context.viewport
     const params = {
       datasets: sublayers.flatMap((sublayer) => sublayer.datasets),
@@ -214,6 +222,7 @@ export class FourwingsHeatmapStaticLayer extends CompositeLayer<FourwingsHeatmap
         loaders: [GFWMVTLoader],
         zoomOffset: getZoomOffsetByResolution(resolution!, zoom),
         onTileLoad: this._onTileLoad,
+        onTileError: this._onLayerError,
         onViewportLoad: this._onViewportLoad,
         getPolygonOffset: (params) => getLayerGroupOffset(LayerGroup.HeatmapStatic, params),
         getFillColor: this.getFillColor,
@@ -303,11 +312,11 @@ export class FourwingsHeatmapStaticLayer extends CompositeLayer<FourwingsHeatmap
   }
 
   getColorDomain = () => {
-    return (this.state as FourwingsTileLayerState).colorDomain
+    return this.state.colorDomain
   }
 
   getColorRange = () => {
-    return (this.state as FourwingsTileLayerState).colorRanges
+    return this.state.colorRanges
   }
 
   getColorScale = () => {