Use maplibre implementation

angular.json

@@ -54,7 +54,7 @@
             "styles": [
               "src/theme.scss",
               "src/styles.scss",
-              "node_modules/mapbox-gl/dist/mapbox-gl.css",
+              "node_modules/maplibre-gl/dist/maplibre-gl.css",
               "node_modules/jsoneditor/dist/jsoneditor.min.css"
             ],
             "browser": "src/main.ts"

package.json

@@ -35,7 +35,8 @@
     "ajv": "8.8.2",
     "ajv-keywords": "5.1.0",
     "ang-jsoneditor": "3.1.0",
-    "arlas-wui-toolkit": "27.0.0-rc.2",
+    "arlas-wui-toolkit": "27.0.0-rc.6",
+    "arlas-maplibre": "27.0.0-z-rc.0",
     "file-saver": "^2.0.2",
     "jsoneditor": "9.10.2",
     "moment": "^2.29.4",

src/app/modules/map-config/components/filters/filters.component.ts

@@ -26,11 +26,11 @@ import { MainFormService } from '@services/main-form/main-form.service';
 import { ConfirmModalComponent } from '@shared-components/confirm-modal/confirm-modal.component';
 import { ConfigFormGroup } from '@shared-models/config-form';
 import { camelize } from '@utils/tools';
-import { MapglLegendComponent } from 'arlas-web-components';
 import { Subscription } from 'rxjs';
 import { DialogFilterComponent } from '../dialog-filter/dialog-filter.component';
 import { LAYER_MODE } from '../edit-layer/models';
 import { marker } from '@colsen1991/ngx-translate-extract-marker';
+import { LegendService } from 'arlas-map';
 
 
 export interface Layer {
@@ -54,12 +54,13 @@ export class FiltersComponent implements OnInit, OnDestroy {
 
   public constructor(
     public dialog: MatDialog,
-    private mainFormService: MainFormService,
-    private mapLayerFormBuilder: MapLayerFormBuilderService
+    private readonly mainFormService: MainFormService,
+    private readonly mapLayerFormBuilder: MapLayerFormBuilderService,
+    private readonly legendService: LegendService
   ) { }
 
   public ngOnInit() {
-    const layerFg = this.layerFg as MapLayerFormGroup;
+    const layerFg = this.layerFg;
     /** import existing filters */
     if (layerFg.customControls.mode.value === LAYER_MODE.featureMetric) {
       this.filtersFa = (layerFg.customControls.featureMetricFg.controls.visibilityStep as ConfigFormGroup)
@@ -133,7 +134,7 @@ export class FiltersComponent implements OnInit, OnDestroy {
 
   public getColorLegend(paint) {
     const styleColor = paint['circle-color'] || paint['heatmap-color'] || paint['fill-color'] || paint['line-color'];
-    const colorLegend = MapglLegendComponent.buildColorLegend(styleColor as any, true, null);
+    const colorLegend = LegendService.buildColorLegend(styleColor, true, null);
     return colorLegend[0];
   }
 

src/app/modules/map-config/components/layers/layers.component.html

@@ -1,7 +1,7 @@
 <div style="display: flex; margin: 10px 0">
     <button mat-stroked-button color="primary" [disabled]="!enableAddLayer" class="add-layer"
-        [matTooltip]="enableAddLayer ? ('Add layer' | translate) : ('No collection with geometries is available in the server' | translate)" matTooltipPosition="below"
-        [routerLink]="['add']" queryParamsHandling="preserve">
+        [matTooltip]="enableAddLayer ? ('Add layer' | translate) : ('No collection with geometries is available in the server' | translate)"
+        matTooltipPosition="below" [routerLink]="['add']" queryParamsHandling="preserve">
         {{'Add layer' | translate}}
     </button>
     <button mat-stroked-button color="primary" class="import-layer" (click)="importLayer()"
@@ -15,6 +15,7 @@
 
 <mat-form-field>
     <mat-icon class="filter-icon" matPrefix>filter_alt</mat-icon>
+    <!-- TODO check if filters still working -->
     <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
 </mat-form-field>
 <table mat-table [dataSource]="dataSource" class="mat-elevation-z1" matSort>
@@ -51,11 +52,11 @@
     <ng-container matColumnDef="representation">
         <th mat-header-cell *matHeaderCellDef>{{'#' | translate}}</th>
         <td mat-cell *matCellDef="let element">
-            <arlas-mapgl-layer-icon [layer]="layerLegend.get(element.arlasId + '#' + element.mode)?.layer"
+            <arlas-layer-icon [layer]="layerLegend.get(element.arlasId + '#' + element.mode)?.layer"
                 [colorLegend]="layerLegend.get(element.arlasId + '#' + element.mode)?.colorLegend"
                 [strokeColorLegend]="layerLegend.get(element.arlasId + '#' + element.mode)?.strokeColorLegend"
                 [lineDasharray]="layerLegend.get(element.arlasId + '#' + element.mode)?.lineDashArray">
-            </arlas-mapgl-layer-icon>
+            </arlas-layer-icon>
         </td>
     </ng-container>
 

src/app/modules/map-config/components/layers/layers.component.ts

@@ -38,7 +38,8 @@ import { StartupService } from '@services/startup/startup.service';
 import { ConfigFormGroupComponent } from '@shared-components/config-form-group/config-form-group.component';
 import { ConfirmModalComponent } from '@shared-components/confirm-modal/confirm-modal.component';
 import { camelize } from '@utils/tools';
-import { ArlasColorService, LayerMetadata, MapglLegendComponent, VisualisationSetConfig } from 'arlas-web-components';
+import { ArlasColorService } from 'arlas-web-components';
+import { LayerMetadata, LegendComponent, LegendService, VisualisationSetConfig } from 'arlas-map';
 import { MapContributor } from 'arlas-web-contributors';
 import { ArlasCollaborativesearchService, ArlasConfigService, ArlasSettingsService, ContributorBuilder } from 'arlas-wui-toolkit';
 import { Subscription } from 'rxjs';
@@ -78,16 +79,17 @@ export class LayersComponent implements OnInit, OnDestroy {
   public constructor(
     protected mainFormService: MainFormService,
     public dialog: MatDialog,
-    private collaborativesearchService: ArlasCollaborativesearchService,
-    private configService: ArlasConfigService,
-    private startupService: StartupService,
-    private collectionService: CollectionService,
-    private mapImportService: MapImportService,
-    private colorService: ArlasColorService,
-    private mapLayerFormBuilder: MapLayerFormBuilderService,
-    private mapGlobalFormBuilder: MapGlobalFormBuilderService,
+    private readonly collaborativesearchService: ArlasCollaborativesearchService,
+    private readonly configService: ArlasConfigService,
+    private readonly startupService: StartupService,
+    private readonly collectionService: CollectionService,
+    private readonly mapImportService: MapImportService,
+    private readonly colorService: ArlasColorService,
+    private readonly mapLayerFormBuilder: MapLayerFormBuilderService,
+    private readonly mapGlobalFormBuilder: MapGlobalFormBuilderService,
     protected mapVisualisationFormBuilder: MapVisualisationFormBuilderService,
-    private settingsService: ArlasSettingsService
+    private readonly settingsService: ArlasSettingsService,
+    private readonly legendService: LegendService
   ) {
     this.layersFa = this.mainFormService.mapConfig.getLayersFa();
     this.visualisationSetFa = this.mainFormService.mapConfig.getVisualisationsFa();
@@ -190,17 +192,17 @@ export class LayersComponent implements OnInit, OnDestroy {
 
   public getColorLegend(paint) {
     const styleColor = paint['circle-color'] || paint['heatmap-color'] || paint['fill-color'] || paint['line-color'] || paint['text-color'];
-    const colorLegend = MapglLegendComponent.buildColorLegend(styleColor as any, true, null);
+    const colorLegend = LegendService.buildColorLegend(styleColor, true, null);
     return colorLegend[0];
   }
 
   public getStrokeColorLegend(paint, metadata: LayerMetadata) {
     const circleStyleColor = paint['circle-stroke-color'];
-    if (!!circleStyleColor) {
-      const colorLegend = MapglLegendComponent.buildColorLegend(circleStyleColor as any, true, null);
+    if (circleStyleColor) {
+      const colorLegend = LegendService.buildColorLegend(circleStyleColor, true, null);
       return colorLegend[0];
     } else if (!!metadata && !!metadata.stroke) {
-      const colorLegend = MapglLegendComponent.buildColorLegend(metadata.stroke.color as any, true, null);
+      const colorLegend = LegendService.buildColorLegend(metadata.stroke.color, true, null);
       return colorLegend[0];
     }
   }

src/app/modules/map-config/components/preview/preview.component.html

@@ -1,21 +1,21 @@
-<arlas-mapgl #map [dataSources]="mapDataSources" [redrawSource]="mapRedrawSources"
+<arlas-map #map [dataSources]="mapDataSources" [redrawSource]="mapRedrawSources"
   [defaultBasemapStyle]="mapComponentConfig?.defaultBasemapStyle" [basemapStyles]="mapComponentConfig?.basemapStyles"
   [margePanForLoad]="mapComponentConfig?.margePanForLoad" [margePanForTest]="mapComponentConfig?.margePanForTest"
-  [initCenter]="mapComponentConfig?.initCenter" [drawData]="mainMapContributor?.geojsondraw"
+  [initCenter]="mapComponentConfig?.initCenter" [drawData]="$any(mainMapContributor?.geojsondraw)"
   [initCenter]="mapComponentConfig?.initCenter" [initZoom]="mapComponentConfig?.initZoom"
   [minZoom]="mapComponentConfig?.minZoom" [maxZoom]="mapComponentConfig?.maxZoom" [displayScale]="true"
-  [maxWidthScale]="mapComponentConfig?.maxWidthScale" [idFeatureField]="mapComponentConfig?.idFieldName"
+  [maxWidthScale]="mapComponentConfig?.maxWidthScale"
   [mapLayers]="mapComponentConfig?.mapLayers" [mapSources]="mapComponentConfig?.mapSources" [drawButtonEnabled]="false"
   [visualisationSetsConfig]="mapComponentConfig?.visualisations_sets" [legendUpdater]="mapLegendUpdater"
   [visibilityUpdater]="mapVisibilityUpdater" [preserveDrawingBuffer]="true"
   (visualisations)="changeVisualisation($event)" (onAoiChanged)="onChangeAoi($event)" (onMove)="onMove($event)">
-</arlas-mapgl>
+</arlas-map>
 
 <button class="preview" mat-raised-button (click)="savePreview()"
   [matTooltip]="'Use the map view as a dashboard preview on the ARLAS Hub' | translate" matTooltipPosition="below">
   {{'Save preview' | translate}}
 </button>
 
 <div class="basemaps" matTooltipPosition="left" matTooltip="{{'Basemaps' | translate}}">
-  <mat-icon style="width:22px;height:22px" (click)="mapglComponent.showBasemapSwitcher()">public</mat-icon>
+  <mat-icon style="width:22px;height:22px" (click)="mapComponent.showBasemapSwitcher()">public</mat-icon>
 </div>

src/app/modules/map-config/components/preview/preview.component.ts

@@ -27,14 +27,24 @@ import { ConfigMapExportHelper } from '@services/main-form-manager/config-map-ex
 import { MainFormService } from '@services/main-form/main-form.service';
 import { StartupService, ZONE_PREVIEW } from '@services/startup/startup.service';
 import { FeatureCollection } from '@turf/helpers';
+import { ArlasMapComponent, ArlasMapFrameworkService } from 'arlas-map';
 import { DataWithLinks } from 'arlas-persistence-api';
-import { ArlasColorService, MapglComponent } from 'arlas-web-components';
+import { ArlasColorService } from 'arlas-web-components';
 import { MapContributor } from 'arlas-web-contributors';
 import { OnMoveResult } from 'arlas-web-contributors/models/models';
-import { ArlasCollaborativesearchService, ArlasConfigService,
-  ArlasSettingsService, ContributorBuilder, PersistenceService } from 'arlas-wui-toolkit';
-import { catchError, map, merge, Observable, of, Subscription, throwError } from 'rxjs';
+import {
+  ArlasCollaborativesearchService, ArlasConfigService,
+  ArlasSettingsService, ContributorBuilder, PersistenceService
+} from 'arlas-wui-toolkit';
+import {
+  AddLayerObject, CanvasSourceSpecification,
+  GeoJSONSource, MapOptions,
+  RasterSourceSpecification, SourceSpecification, TypedStyleLayer
+} from 'maplibre-gl';
+import { MaplibreSourceType } from 'arlas-maplibre';
+
 
+import { catchError, map, merge, Observable, of, Subscription, throwError } from 'rxjs';
 export interface MapglComponentInput {
   mapglContributors: MapContributor[];
   mapComponentConfig: any;
@@ -49,7 +59,8 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
 
   @Input() public mapComponentConfig: any;
   @Input() public mapglContributors: MapContributor[] = [];
-  @ViewChild('map', { static: false }) public mapglComponent: MapglComponent;
+  @ViewChild('map', { static: false }) public mapComponent: ArlasMapComponent<TypedStyleLayer | AddLayerObject,
+    MaplibreSourceType | GeoJSONSource | RasterSourceSpecification | SourceSpecification | CanvasSourceSpecification, MapOptions>;
 
   private onMapLoadSub: Subscription;
   public mapDataSources;
@@ -60,16 +71,18 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
 
   public constructor(
     protected mainFormService: MainFormService,
-    private collaborativeService: ArlasCollaborativesearchService,
-    private configService: ArlasConfigService,
-    private startupService: StartupService,
-    private collectionService: CollectionService,
-    private colorService: ArlasColorService,
-    private cdr: ChangeDetectorRef,
-    private persistenceService: PersistenceService,
-    private snackbar: MatSnackBar,
-    private translate: TranslateService,
-    private settingsService: ArlasSettingsService,
+    public collaborativeService: ArlasCollaborativesearchService,
+    private readonly configService: ArlasConfigService,
+    private readonly startupService: StartupService,
+    private readonly collectionService: CollectionService,
+    private readonly colorService: ArlasColorService,
+    private readonly cdr: ChangeDetectorRef,
+    private readonly persistenceService: PersistenceService,
+    private readonly snackbar: MatSnackBar,
+    private readonly translate: TranslateService,
+    private readonly settingsService: ArlasSettingsService,
+    private readonly mapFrameworkService: ArlasMapFrameworkService<TypedStyleLayer | AddLayerObject,
+      MaplibreSourceType | GeoJSONSource | RasterSourceSpecification | SourceSpecification | CanvasSourceSpecification, MapOptions>,
     @Inject(MAT_DIALOG_DATA) public dataMap: MapglComponentInput
   ) {
     if (this.dataMap.mapglContributors !== undefined || this.dataMap.mapComponentConfig !== undefined) {
@@ -97,12 +110,17 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
       const contributors: MapContributor[] = [];
 
       mapContribConfigs.forEach(mapConfig => {
+        console.log(mapConfig);
+        this.collaborativeService.describe('courses').subscribe();
+        console.log(this.collaborativeService)
+
         const mapContributor = ContributorBuilder.buildContributor('map',
           mapConfig.identifier,
           this.configService,
           this.collaborativeService,
           this.settingsService,
           this.colorService);
+        console.log(mapContributor);
         contributors.push(mapContributor);
       });
       const mapComponentConfig = ConfigExportHelper.getMapComponent(
@@ -117,7 +135,7 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
       this.mapComponentConfig = mapComponentConfig.input;
     }
     if (!!this.mapglContributors) {
-      this.mapDataSources = this.mapglContributors.map(c => c.dataSources).reduce((set1, set2) => new Set([...set1, ...set2]));
+      this.mapDataSources = this.mapglContributors.map(c => c.dataSources).reduce((set1, set2) => new Set([...set1, ...set2]), new Set());
       this.mapRedrawSources = merge(...this.mapglContributors.map(c => c.redrawSource));
       this.mapLegendUpdater = merge(...this.mapglContributors.map(c => c.legendUpdater));
       this.mapVisibilityUpdater = merge(...this.mapglContributors.map(c => c.visibilityUpdater));
@@ -130,9 +148,9 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
   }
 
   public ngAfterViewInit() {
-    this.onMapLoadSub = this.mapglComponent.onMapLoaded.subscribe(isLoaded => {
+    this.onMapLoadSub = this.mapComponent.onMapLoaded.subscribe(isLoaded => {
       if (isLoaded && !!this.mapglContributors) {
-        this.mapglComponent.map.resize();
+        this.mapComponent.map.resize();
         this.mapglContributors.forEach(mapglContributor => {
           mapglContributor.updateData = true;
           mapglContributor.fetchData(null);
@@ -144,20 +162,20 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
   }
 
   public ngOnDestroy() {
-    this.mapglComponent = null;
+    this.mapComponent = null;
     this.onMapLoadSub.unsubscribe();
   }
 
   public changeVisualisation(event: Set<string>) {
     this.mapglContributors.forEach(contrib => contrib.changeVisualisation(event));
   }
 
-  public onChangeAoi(event: FeatureCollection) {
+  public onChangeAoi(event: FeatureCollection<GeoJSON.Geometry>) {
     const configDebounceTime = this.configService.getValue('arlas.server.debounceCollaborationTime');
     const debounceDuration = configDebounceTime !== undefined ? configDebounceTime : 750;
     this.mapglContributors.forEach((contrib, i) => {
       setTimeout(() => {
-        contrib.onChangeAoi(event);
+        contrib.onChangeAoi(event as FeatureCollection);
       }, i * (debounceDuration + 100));
     });
   }
@@ -168,7 +186,7 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
 
   public savePreview() {
     let img;
-    const mapCanvas = this.mapglComponent.map.getCanvas();
+    const mapCanvas = this.mapFrameworkService.getCanvas(this.mapComponent.map);
     const maxWidth = 300;
     const maxHeight = 150;
     const widthScale = maxWidth / mapCanvas.width;
@@ -188,8 +206,8 @@ export class PreviewComponent implements AfterViewInit, OnDestroy {
       context.drawImage(mapCanvas, 0, 0);
       img = rescaledCanvas.toDataURL('image/png');
     }
-    const jsonifiedImg = JSON.stringify({img});
-    this.mapglComponent.map.resize();
+    const jsonifiedImg = JSON.stringify({ img });
+    this.mapComponent.map.resize();
     const resourcesConfig = this.mainFormService.resourcesConfig.getFg();
     const previewId = resourcesConfig.customControls.resources.previewId.value;
     if (!!this.mainFormService.configurationId) {

src/app/modules/map-config/map-config.component.ts

@@ -18,7 +18,6 @@
  */
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
 import { MainFormService } from '@services/main-form/main-form.service';
 import { isFullyTouched } from '@utils/tools';
 import { Subscription } from 'rxjs';
@@ -41,9 +40,8 @@ export class MapConfigComponent implements OnInit, OnDestroy {
   private routerSub: Subscription;
 
   public constructor(
-    private mainFormService: MainFormService,
-    private translate: TranslateService,
-    private router: Router) { }
+    private readonly mainFormService: MainFormService,
+    private readonly router: Router) { }
 
 
   public tabs: Tab[] = [
@@ -84,7 +82,7 @@ export class MapConfigComponent implements OnInit, OnDestroy {
   public ngOnInit() {
     this.routerSub = this.router.events
       .pipe(filter(event => event instanceof NavigationEnd),
-        map(navEnd => (navEnd as NavigationEnd).urlAfterRedirects))
+        map(navEnd => navEnd.urlAfterRedirects))
       .subscribe(url => this.activeTab = this.tabs.find(tabs => url.indexOf(tabs.routeurLink) > 0));
   }