[feat] custom zoom offset for raster tile layer

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

src/components/src/side-panel/layer-panel/raster-tile-layer-configurator.tsx

@@ -355,12 +355,13 @@ function RasterTileLayerConfiguratorFactory(
       </>
     );
 
-    // For PMTiles in raster format, only show opacity and terrain options for now
+    // For PMTiles in raster format, only show opacity, zoom offset and terrain options for now
     if (stac.pmtilesType === PMTilesType.RASTER) {
       return (
         <StyledLayerConfigurator>
           <LayerConfigGroup {...visConfiguratorProps} label="Visual Settings" collapsible={false}>
             <VisConfigSlider {...layer.visConfigSettings.opacity} {...visConfiguratorProps} />
+            <VisConfigSlider {...layer.visConfigSettings.zoomOffset} {...visConfiguratorProps} />
           </LayerConfigGroup>
           {elevationUI}
         </StyledLayerConfigurator>
@@ -487,6 +488,7 @@ function RasterTileLayerConfiguratorFactory(
 
         <LayerConfigGroup {...visConfiguratorProps} label="Visual Settings" collapsible={false}>
           <VisConfigSlider {...layer.visConfigSettings.opacity} {...visConfiguratorProps} />
+          <VisConfigSlider {...layer.visConfigSettings.zoomOffset} {...visConfiguratorProps} />
           {colormapAllowed && (
             <SidePanelSection>
               <PanelLabel>Colormap</PanelLabel>

src/layers/src/raster-tile/config.ts

@@ -727,6 +727,16 @@ export const rasterVisConfigs = {
     step: 0.05,
     type: 'number'
   } as VisConfigNumber,
+  zoomOffset: {
+    defaultValue: 0,
+    // group: "tiles"
+    isRanged: false,
+    label: 'Zoom Offset',
+    property: 'zoomOffset',
+    range: [-2, 2],
+    step: 1,
+    type: 'number'
+  } as VisConfigNumber,
   _stacQuery: {
     defaultValue: null,
     type: 'input'

src/layers/src/raster-tile/raster-tile-layer.ts

@@ -493,10 +493,11 @@ export default class RasterTileLayer extends KeplerLayer {
     };
 
     const tileLayer = new TileLayer<any, RenderSubLayersProps>({
-      id,
+      id, // : id + '_' + visConfig.zoomOffset,
       minZoom,
       maxZoom,
       tileSize: 512 / devicePixelRatio,
+      zoomOffset: visConfig.zoomOffset,
       getTileData: (args: any) => this.getTileData({...args, ...getTileDataCustomProps}),
       onViewportLoad: this.onViewportLoad.bind(this),
       // @ts-expect-error - TS doesn't know we'll pass appropriate props here
@@ -507,6 +508,7 @@ export default class RasterTileLayer extends KeplerLayer {
       updateTriggers: {
         getTileData: [
           shouldLoadTerrain,
+          // visConfig.zoomOffset,
           // Colormap has changed
           colormapId,
           // assets to be loaded has changed
@@ -570,7 +572,7 @@ export default class RasterTileLayer extends KeplerLayer {
 
     return [
       new TileLayer<any, RasterTileLayerVisConfigCommonSettings>({
-        id,
+        id, // : id + '_' + visConfig.zoomOffset,
         getTileData: (args: any) =>
           this.getTileDataPMTiles({...args, shouldLoadTerrain, metadata}, tileSource),
 
@@ -585,7 +587,7 @@ export default class RasterTileLayer extends KeplerLayer {
         minZoom,
         maxZoom,
         tileSize: 512 / devicePixelRatio,
-        zoomOffset: devicePixelRatio === 1 ? -1 : 0,
+        zoomOffset: devicePixelRatio === 1 ? -1 : 0, // + (visConfig.zoomOffset as unknown as number),
         // @ts-expect-error - TS doesn't know we'll pass appropriate props here
         renderSubLayers: renderSubLayersPMTiles,
 
@@ -596,7 +598,7 @@ export default class RasterTileLayer extends KeplerLayer {
         opacity,
 
         updateTriggers: {
-          getTileData: [shouldLoadTerrain]
+          getTileData: [shouldLoadTerrain /*, visConfig.zoomOffset*/]
         },
         // Props for 3D mode
         ...(shouldLoadTerrain