feat: test recolor

package.json

@@ -68,7 +68,7 @@
     "ngx-toastr": "^17.0.2",
     "nouislider": "^15.6.1",
     "npm": "^8.11.0",
-    "ol": "^7.4.0",
+    "ol": "^10.2.1",
     "popper.js": "^1.16.1",
     "postcss": "^8.3.4",
     "prismjs": "^1.28.0",

src/app/services/browse-map.service.ts

@@ -5,7 +5,7 @@ import View from 'ol/View.js';
 import ImageLayer from 'ol/layer/Image';
 import * as polygonStyle from './map/polygon.style';
 import Static from 'ol/source/ImageStatic.js';
-import { XYZ } from 'ol/source';
+import XYZ from 'ol/source/XYZ';
 import { mapOptions } from '@models';
 import TileLayer from 'ol/layer/WebGLTile.js';
 import { Layer, Vector } from 'ol/layer';
@@ -62,7 +62,7 @@ export class BrowseMapService {
       wrapX: mapOptions.wrapX,
       tileSize: [512, 512]
     });
-
+    //@ts-ignore
     const map_layer = new TileLayer({ source: mapSource });
 
     if (!this.map) {

src/app/services/map/map.service.ts

@@ -5,7 +5,7 @@ import { first, map, sampleTime, tap } from 'rxjs/operators';
 
 import { Collection, Feature, Map, View } from 'ol';
 import { Layer, Vector as VectorLayer } from 'ol/layer';
-import { Vector as VectorSource, XYZ } from 'ol/source';
+import { ImageTile,  Vector as VectorSource } from 'ol/source';
 import * as proj from 'ol/proj';
 import Point from 'ol/geom/Point';
 import { OverviewMap, ScaleLine } from 'ol/control';
@@ -46,6 +46,8 @@ import { SetGeocode } from '@store/filters';
 import { Extent } from 'ol/extent';
 import { MultiPolygon } from 'ol/geom';
 import GeoJSON from 'ol/format/GeoJSON.js';
+import RasterSource from 'ol/source/Raster';
+import ImageLayer from 'ol/layer/Image';
 
 @Injectable({
   providedIn: 'root'
@@ -73,7 +75,7 @@ export class MapService {
 
   private localBrowseImageURL: string;
 
-  private displacementOverview: TileLayer;
+  private displacementOverview: ImageLayer<any>;
   public displacementOverview$ = new BehaviorSubject<models.DisplacementLayerTypes | null>(null);
   private priorityOverview: VectorLayer<VectorSource>;
 
@@ -763,15 +765,23 @@ export class MapService {
         this.displacementOverview = null;
       }
 
-      const overview_source = new XYZ({
-        'url': `${base_url}/{z}/{x}/{y}.png`,
-        wrapX: models.mapOptions.wrapX,
-        tileSize: [256, 256]
+      const overview_source = new RasterSource({
+        sources: [
+          new ImageTile({
+            'url': `${base_url}/{z}/{x}/{y}.png`,
+            tileSize: 256,
+            maxZoom: 12
+          })
+        ],
+        operation: function (pixels, _data) {
+          let test = pixels[0];
+          test[1] = 255;
+          return test;
+        },
       });
-
-      this.displacementOverview = new TileLayer({
+      this.displacementOverview = new ImageLayer({
         'source': overview_source,
-        'extent': response['extent']
+        'extent': response['extent'],
       });
 
       this.map.addLayer(this.displacementOverview);

src/app/services/map/views/antarctic.ts

@@ -40,6 +40,7 @@ export function antarctic(): MapView {
 
   const source = new WMTS(options);
 
+    //@ts-ignore
   const layer = new TileLayer({ source, extent });
 
   const view = new View({

src/app/services/map/views/arctic.ts

@@ -48,6 +48,7 @@ export function arctic(): MapView  {
   };
 
   const source = new WMTS(options);
+    //@ts-ignore
   const layer = new TileLayer({ source, extent });
 
 

src/app/services/map/views/equatorial.ts

@@ -17,6 +17,7 @@ function equatorialView(url: string): MapView {
     tileSize: [512, 512]
   });
 
+    //@ts-ignore
   const layer = new TileLayer({ source });
 
   const lonFormatter = function(lon: number) {