wip: include maplibre with new commit

package.json

@@ -33,6 +33,7 @@
     "@ngx-translate/core": "14.0.0",
     "arlas-wui-toolkit": "~24.3.4",
     "hammerjs": "^2.0.8",
+    "maplibre-gl": "^3.4.0",
     "ng-packagr": "^14.2.2",
     "ngx-markdown": "14.0.1",
     "patch-package": "^6.4.7",
@@ -48,8 +49,8 @@
     "@angular/cli": "^14.2.13",
     "@angular/compiler-cli": "^14.2.12",
     "@angular/language-service": "^14.2.12",
-    "@gisaia/ngx-translate-extract": "8.2.0",
     "@biesbjerg/ngx-translate-extract-marker": "1.0.0",
+    "@gisaia/ngx-translate-extract": "8.2.0",
     "@types/jasmine": "~3.10.0",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "16.11.20",

src/app/components/arlas-wui-root/arlas-wui-root.component.ts

@@ -50,7 +50,7 @@ import {
   ProcessService,
   TimelineComponent
 } from 'arlas-wui-toolkit';
-import * as mapboxgl from 'mapbox-gl';
+import * as maplibregl from 'maplibre-gl';
 import { Observable, Subject, Subscription, fromEvent, merge, of, timer, zip } from 'rxjs';
 import { debounceTime, mergeMap, takeWhile } from 'rxjs/operators';
 import { environment } from '../../../environments/environment';
@@ -116,7 +116,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
   };
   public featuresToSelect: Array<ElementIdentifier> = [];
   private allowMapExtend: boolean;
-  private mapBounds: mapboxgl.LngLatBounds;
+  private mapBounds: maplibregl.LngLatBounds;
   private mapEventListener = new Subject();
   private mapExtendTimer: number;
   private MAP_EXTEND_PARAM = 'extend';
@@ -168,7 +168,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
   public recalculateExtend = true;
   public zoomChanged = false;
   public zoomStart: number;
-  public popup: mapboxgl.Popup;
+  public popup: maplibregl.Popup;
   public aoiEdition: AoiEdition;
 
   @Input() public hiddenAnalyticsTabs: string[] = [];
@@ -290,6 +290,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
         this.configService.getValue('arlas-wui.web.app.name_background_color') : '#FF4081';
       this.analyticsContributor = this.arlasStartUpService.contributorRegistry.get('analytics') as AnalyticsContributor;
       this.mapComponentConfig = this.configService.getValue('arlas.web.components.mapgl.input');
+      console.error('map comp config', this.mapComponentConfig)
       const mapExtendTimer = this.configService.getValue('arlas.web.components.mapgl.mapExtendTimer');
       this.mapExtendTimer = (mapExtendTimer !== undefined) ? mapExtendTimer : 4000;
       this.allowMapExtend = this.configService.getValue('arlas.web.components.mapgl.allowMapExtend');
@@ -512,9 +513,9 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
         if (extendValue) {
           const stringBounds = extendValue.split(',');
           if (stringBounds.length === 4) {
-            this.mapBounds = new mapboxgl.LngLatBounds(
-              new mapboxgl.LngLat(+stringBounds[0], +stringBounds[1]),
-              new mapboxgl.LngLat(+stringBounds[2], +stringBounds[3])
+            this.mapBounds = new maplibregl.LngLatBounds(
+              new maplibregl.LngLat(+stringBounds[0], +stringBounds[1]),
+              new maplibregl.LngLat(+stringBounds[2], +stringBounds[3])
             );
           }
         }
@@ -525,8 +526,8 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
           cdrs.forEach(cdr => {
             this.collectionToDescription.set(cdr.collection_name, cdr.params);
           });
-          const bounds = (<mapboxgl.Map>this.mapglComponent.map).getBounds();
-          (<mapboxgl.Map>this.mapglComponent.map).fitBounds(bounds, { duration: 0 });
+          const bounds = (<maplibregl.Map>this.mapglComponent.map).getBounds();
+          (<maplibregl.Map>this.mapglComponent.map).fitBounds(bounds, { duration: 0 });
           if (this.resultlistContributors.length > 0) {
             this.resultlistContributors.forEach(c => c.sort = this.collectionToDescription.get(c.collection).id_path);
           }
@@ -616,7 +617,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
 
       this.mapEventListener.pipe(debounceTime(this.mapExtendTimer)).subscribe(() => {
         /** Change map extend in the url */
-        const bounds = (<mapboxgl.Map>this.mapglComponent.map).getBounds();
+        const bounds = (<maplibregl.Map>this.mapglComponent.map).getBounds();
         const extend = bounds.getWest() + ',' + bounds.getSouth() + ',' + bounds.getEast() + ',' + bounds.getNorth();
         const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams);
         queryParams[this.MAP_EXTEND_PARAM] = extend;
@@ -643,7 +644,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
       this.mapService.setMap(this.mapglComponent.map);
       this.visualizeService.setMap(this.mapglComponent.map);
       if (this.mapBounds && this.allowMapExtend) {
-        (<mapboxgl.Map>this.mapglComponent.map).fitBounds(this.mapBounds, { duration: 0 });
+        (<maplibregl.Map>this.mapglComponent.map).fitBounds(this.mapBounds, { duration: 0 });
         this.mapBounds = null;
       }
       this.mapglComponent.map.on('movestart', (e) => {
@@ -685,6 +686,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  // TODO: remove all any
   public updateMapStyle(ids: Array<string | number>, collection: string) {
     // use always this.previewListContrib because it's the current resultlist contributor
     if (!!this.mapComponentConfig.mapLayers.events.onHover) {
@@ -693,22 +695,22 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
         if (ids && ids.length > 0) {
           if (!!layer && layer.source.indexOf(collection) >= 0 && ids.length > 0 &&
             // Tests value in camel and kebab case due to an unknown issue on other projects
-            (layer.metadata.isScrollableLayer || layer.metadata['is-scrollable-layer'])) {
-            this.mapglComponent.map.setFilter(l, this.getVisibleElementLayerFilter(l, ids));
+            ((layer.metadata as any).isScrollableLayer  || layer.metadata['is-scrollable-layer'])) {
+            this.mapglComponent.map.setFilter(l, (this.getVisibleElementLayerFilter(l, ids)  as any));
             const strokeLayerId = l.replace('_id:', '-fill_stroke-');
             const strokeLayer = this.mapglComponent.map.getLayer(strokeLayerId);
             if (!!strokeLayer) {
-              this.mapglComponent.map.setFilter(strokeLayerId, this.getVisibleElementLayerFilter(strokeLayerId, ids));
+              this.mapglComponent.map.setFilter(strokeLayerId, (this.getVisibleElementLayerFilter(strokeLayerId, ids)  as any));
             }
           }
         } else {
           if (!!layer && layer.source.indexOf(collection) >= 0) {
-            this.mapglComponent.map.setFilter(l, this.mapglComponent.layersMap.get(l).filter);
+            this.mapglComponent.map.setFilter(l,( this.mapglComponent.layersMap.get(l)  as any).filter);
             const strokeLayerId = l.replace('_id:', '-fill_stroke-');
             const strokeLayer = this.mapglComponent.map.getLayer(strokeLayerId);
             if (!!strokeLayer) {
               this.mapglComponent.map.setFilter(strokeLayerId,
-                this.mapglComponent.layersMap.get(strokeLayerId).filter);
+                (this.mapglComponent.layersMap.get(strokeLayerId)  as any).filter);
             }
           }
         }
@@ -961,7 +963,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
     // Update data only when the collections info are presents
     if (this.collectionToDescription.size > 0) {
       /** Change map extend in the url */
-      const bounds = (<mapboxgl.Map>this.mapglComponent.map).getBounds();
+      const bounds = (<maplibregl.Map>this.mapglComponent.map).getBounds();
       const extend = bounds.getWest() + ',' + bounds.getSouth() + ',' + bounds.getEast() + ',' + bounds.getNorth();
       const queryParams = Object.assign({}, this.activatedRoute.snapshot.queryParams);
       const visibileVisus = this.mapglComponent.visualisationSetsConfig.filter(v => v.enabled).map(v => v.name).join(';');
@@ -1096,7 +1098,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
             if (!!this.popup) {
               this.popup.remove();
             }
-            this.popup = new mapboxgl.Popup({ closeOnClick: false })
+            this.popup = new maplibregl.Popup({ closeOnClick: false })
               .setLngLat(event.point)
               .setDOMContent(popupContent);
             this.popup.addTo(this.mapglComponent.map);
@@ -1198,6 +1200,7 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  // TODO: to see
   private adjustCoordinates(): void {
     const timelineToolsMaxWidth = 420;
     const scaleMaxWidth = 100;
@@ -1270,8 +1273,9 @@ export class ArlasWuiRootComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
 
+  // TODO: remove any
   private getVisibleElementLayerFilter(l, ids) {
-    const lFilter = this.mapglComponent.layersMap.get(l).filter;
+    const lFilter = (this.mapglComponent.layersMap.get(l)  as any). filter;
     const filters = [];
     if (lFilter) {
       lFilter.forEach(f => {

src/app/services/visualize.service.ts

@@ -28,7 +28,7 @@ import { ElementIdentifier } from 'arlas-web-contributors';
 import { getElementFromJsonObject } from 'arlas-web-contributors/utils/utils';
 import { projType } from 'arlas-web-core';
 import { ArlasCollaborativesearchService } from 'arlas-wui-toolkit';
-import { Popup } from 'mapbox-gl';
+import { Popup } from 'maplibre-gl';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { parse } from 'wellknown';

src/config.json

@@ -692,21 +692,35 @@
           "nbVerticesLimit": 100,
           "input": {
             "defaultBasemapStyle": {
-              "name": "Streets-dark",
-              "styleFile": "https://api.maptiler.com/maps/a1e62ee0-aca6-451a-a4b8-42250422a212/style.json?key=xIhbu1RwgdbxfZNmoXn4"
+              "name": "Streets-light",
+              "styleFile": "https://api.maptiler.com/maps/208a41eb-368f-4003-8e3c-2dba0d90b3cb/style.json?key=xIhbu1RwgdbxfZNmoXn4",
+              "image": "https://api.maptiler.com/maps/208a41eb-368f-4003-8e3c-2dba0d90b3cb/0/0/0.png?key=xIhbu1RwgdbxfZNmoXn4"
             },
             "basemapStyles": [
               {
                 "name": "Basic",
-                "styleFile": "https://api.maptiler.com/maps/basic/style.json?key=xIhbu1RwgdbxfZNmoXn4"
+                "styleFile": "https://api.maptiler.com/maps/basic/style.json?key=xIhbu1RwgdbxfZNmoXn4",
+                "image": "https://cloud.maptiler.com/static/img/maps/basic.png"
+              },
+              {
+                "name": "Satellite Hybrid",
+                "styleFile": "https://api.maptiler.com/maps/hybrid/style.json?key=xIhbu1RwgdbxfZNmoXn4",
+                "image": "https://cloud.maptiler.com/static/img/maps/hybrid.png"
               },
               {
                 "name": "Streets-dark",
-                "styleFile": "https://api.maptiler.com/maps/a1e62ee0-aca6-451a-a4b8-42250422a212/style.json?key=xIhbu1RwgdbxfZNmoXn4"
+                "styleFile": "https://api.maptiler.com/maps/a1e62ee0-aca6-451a-a4b8-42250422a212/style.json?key=xIhbu1RwgdbxfZNmoXn4",
+                "image": "https://api.maptiler.com/maps/a1e62ee0-aca6-451a-a4b8-42250422a212/0/0/0.png?key=xIhbu1RwgdbxfZNmoXn4"
               },
               {
                 "name": "Streets-light",
-                "styleFile": "https://api.maptiler.com/maps/208a41eb-368f-4003-8e3c-2dba0d90b3cb/style.json?key=xIhbu1RwgdbxfZNmoXn4"
+                "styleFile": "https://api.maptiler.com/maps/208a41eb-368f-4003-8e3c-2dba0d90b3cb/style.json?key=xIhbu1RwgdbxfZNmoXn4",
+                "image": "https://api.maptiler.com/maps/208a41eb-368f-4003-8e3c-2dba0d90b3cb/0/0/0.png?key=xIhbu1RwgdbxfZNmoXn4"
+              },
+              {
+                "name": "Streets-light - No label",
+                "styleFile": "https://api.maptiler.com/maps/bfbf9c99-aa66-4830-8b6c-2251d177f2f5/style.json?key=xIhbu1RwgdbxfZNmoXn4",
+                "image": "https://api.maptiler.com/maps/bfbf9c99-aa66-4830-8b6c-2251d177f2f5/0/0/0.png?key=xIhbu1RwgdbxfZNmoXn4"
               }
             ],
             "margePanForLoad": 5,
@@ -1424,7 +1438,7 @@
       "externalNode": {}
     },
     "server": {
-      "url": "http://localhost:9994/arlas",
+      "url": "https://demo.cloud.arlas.io/arlas/server",
       "max_age_cache": 120,
       "collection": {
         "name": "demo_eo"

src/config.map.json

@@ -25,18 +25,18 @@
           "#0087e9",
           "SPOT 5",
           "#0041ff",
-          "SPOT 4",
-          "#00b4ff",
           "SPOT 7",
           "#1102c6",
+          "SPOT 4",
+          "#00b4ff",
           "TerraSAR-X 1",
           "#5e5e5e",
+          "SPOT 1",
+          "#f941ff",
           "ALOS2",
           "#00c926",
           "SENTINEL 2A",
           "#ff0094",
-          "DRONE",
-          "#ffe300",
           "#9d9ca9"
         ]
       },
@@ -85,18 +85,18 @@
           "#0087e9",
           "SPOT 5",
           "#0041ff",
-          "SPOT 4",
-          "#00b4ff",
           "SPOT 7",
           "#1102c6",
+          "SPOT 4",
+          "#00b4ff",
           "TerraSAR-X 1",
           "#5e5e5e",
+          "SPOT 1",
+          "#f941ff",
           "ALOS2",
           "#00c926",
           "SENTINEL 2A",
           "#ff0094",
-          "DRONE",
-          "#ffe300",
           "#9d9ca9"
         ]
       },
@@ -631,18 +631,18 @@
           "#0087e9",
           "SPOT 5",
           "#0041ff",
-          "SPOT 4",
-          "#00b4ff",
           "SPOT 7",
           "#1102c6",
+          "SPOT 4",
+          "#00b4ff",
           "TerraSAR-X 1",
           "#5e5e5e",
+          "SPOT 1",
+          "#f941ff",
           "ALOS2",
           "#00c926",
           "SENTINEL 2A",
           "#ff0094",
-          "DRONE",
-          "#ffe300",
           "#9d9ca9"
         ]
       }
@@ -666,4 +666,4 @@
       "on": "select"
     }
   ]
-}
+}

src/environments/prod/settings.yaml

@@ -4,11 +4,8 @@
 ########################################################
 authentication:
   use_authent: ${ARLAS_USE_AUTHENT}
-  auth_mode: ${ARLAS_AUTHENT_MODE}
   force_connect: ${ARLAS_AUTHENT_FORCE_CONNECT}
   use_discovery: ${ARLAS_AUTHENT_USE_DISCOVERY}
-  threshold: ${ARLAS_AUTHENT_THRESHOLD}
-  url: ${ARLAS_IAM_SERVER_URL}
   issuer: ${ARLAS_AUTHENT_ISSUER}
   client_id: ${ARLAS_AUTHENT_CLIENT_ID}
   redirect_uri: ${ARLAS_AUTHENT_REDIRECT_URI}
@@ -37,15 +34,6 @@ arlas_hub_url: ${ARLAS_HUB_URL}
 links: ${ARLAS_STATIC_LINKS}
 ticketing_key: ${ARLAS_TICKETING_KEY}
 tab_name:  ${ARLAS_TAB_NAME}
-dashboards_shortcut: ${ARLAS_WUI_DASHBOARDS_SHORTCUT}
 histogram:
   max_buckets: ${ARLAS_HISTOGRAMS_MAX_BUCKETS}
   export_nb_buckets: ${ARLAS_EXPORT_HISTOGRAMS_NB_BUCKETS}
-process:
-  url: ${ARLAS_PROCESS_URL}
-  check_url: ${ARLAS_PROCESS_CHECK_URL}
-  max_items: ${ARLAS_PROCESS_MAX_ITEMS}
-  settings:
-    url: ${ARLAS_PROCESS_SETTINGS_URL}
-  status:
-    url: ${ARLAS_PROCESS_STATUS_URL}

src/settings.yaml

@@ -2,11 +2,8 @@
 ############   AUTHENTICATION SETTINGS   ###############
 ########################################################
 authentication:
-  use_authent: true
-  auth_mode: iam
-  url: http://localhost:9997/arlas_iam_server
+  use_authent: false
   force_connect: false
-  threshold: 60000
   use_discovery: false
   issuer: https://arlas-cloud-dev.eu.auth0.com/
   client_id: TrAfmjESYNWrikvK1d7RPnc5Uve7WJqs
@@ -26,32 +23,6 @@ authentication:
   custom_query_params: [{"audience":"http://arlas.io/api/server"}]
 ticketing_key:
 tab_name: "ARLAS Wui"
-persistence:
-  url: 'http://localhost:19997/arlas-persistence-server/'
 histogram:
   max_buckets: 200
   export_nb_buckets: 1000
-arlas_hub_url: http://localhost:81/hub
-dashboards_shortcut: false
-process:
-  url: 'https://arlas/processes/download/execution'
-  max_items: 15
-  settings:
-    url: 'assets/processes/download.json'
-  status:
-    url: 'http://arlas/jobs'
-links:
-  - name: Explorer
-    icon: landscape
-    check_url: https://google.com
-  - name: ARLAS Builder
-    icon: build
-    check_url: http://localhost:9997/arlas_iam_server
-  - name: ARLAS Hub
-    icon: hub
-    check_url: http://localhost:81/server/explore/demo_algoe/_count?&righthand=false&pretty=false&max-age-cache=120
-    url: https://demo.cloud.arlas.io/
-  - name: Fam
-    icon: satellite_alt
-    url: https://demo.cloud.arlas.io/
-    check_url: http://localhost:9997/arlas_iam_server

tsconfig.json

@@ -12,6 +12,8 @@
     "allowSyntheticDefaultImports":true,
     "experimentalDecorators": true,
     "resolveJsonModule":true,
+    "strictNullChecks": false,
+    "skipLibCheck": true,
     "target": "es6",
     "types": [
       "node",