Add a button to remove all raster layers added to the map

src/app/app.module.ts

@@ -77,6 +77,7 @@ import { VisualizeService } from './services/visualize.service';
 import { ArlasTranslateLoader, ArlasWalkthroughLoader } from './tools/customLoader';
 import { LazyLoadImageHooks } from './tools/lazy-loader';
 import { LAZYLOAD_IMAGE_HOOKS, LazyLoadImageModule } from 'ng-lazyload-image';
+import { RastersManagerComponent } from './components/map/raster-layers-manager/rasters-manager.component';
 
 
 @NgModule({
@@ -88,7 +89,8 @@ import { LAZYLOAD_IMAGE_HOOKS, LazyLoadImageModule } from 'ng-lazyload-image';
     ConfigsListComponent,
     RoundKilometer,
     SquareKilometer,
-    GeocodingComponent
+    GeocodingComponent,
+    RastersManagerComponent
   ],
   exports: [
     AoiDimensionComponent,

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

@@ -80,6 +80,9 @@
                 </div>
               </div>
             </div>
+            <div class="arlas-rasters-manager" [class.arlas-rasters-manager_with_geocoding]="enableGeocodingFeature" *ngIf="visualizeService.isRasterOnMap">
+              <arlas-rasters-manager></arlas-rasters-manager>
+            </div>
 
             <div class="shortcut-list" *ngIf="showShortcuts || analyticsService.activeTab === undefined">
               <ng-container *ngFor="let shortcut of shortcuts; let idx=index">

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

@@ -228,7 +228,9 @@
 .app-container-reduce-analytics,
 .app-container-reduce {
   .arlas-map-action,
-  .arlas-map-settings {
+  .arlas-map-settings,
+  .arlas-rasters-manager
+  {
     right: calc($result-list-width + $sm-spacing);
   }
   .aoi-dimensions {
@@ -254,7 +256,8 @@
 .app-container-with-list-analytics,
 .app-container-with-list {
   .arlas-map-action,
-  .arlas-map-settings {
+  .arlas-map-settings,
+  .arlas-rasters-manager {
     right: calc($preview-result-list-width + $sm-spacing);
   }
   .aoi-dimensions {
@@ -396,6 +399,21 @@
 .if-geocoding-button {
   bottom: 30px;
 }
+.arlas-rasters-manager {
+  position: absolute;
+  top: calc(
+    $sm-spacing + $map-attributions-height + $sm-spacing + $map-actions-width + $sm-spacing + $map-actions-length +
+    $sm-spacing + $map-settings-height + $sm-spacing
+  );
+  right: $sm-spacing;
+  z-index: 2;
+}
+.arlas-rasters-manager_with_geocoding {
+  top: calc(
+    $sm-spacing + $map-attributions-height + $sm-spacing + $map-actions-width + $sm-spacing + $map-actions-length +
+    $sm-spacing + $map-settings-height + $map-actions-width + $sm-spacing 
+  );
+}
 
 .arlas-map-settings {
   position: absolute;

src/app/components/map/raster-layers-manager/rasters-manager.component.html

@@ -0,0 +1,3 @@
+<div class="wrapper" (click)="removeLayers()">
+    <mat-icon [matTooltip]="'Remove all rasters' | translate" class="icon">visibility_off</mat-icon>
+</div>

src/app/components/map/raster-layers-manager/rasters-manager.component.scss

@@ -0,0 +1,42 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+@import "../../../../styles/variables.scss";
+@import "../../../../styles/app/sizes.scss";
+@import "../../../../styles/app/mixin.scss";
+
+.wrapper {
+    cursor: pointer;
+    width: $map-actions-width;
+    height: $map-actions-width;
+    margin-bottom: $sm-spacing;
+    @include box-border();
+    box-shadow: none;
+    padding: 0;
+    background-color: white;
+
+    .icon {
+      height: $map-actions-width;
+      width: $map-actions-width;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+}

src/app/components/map/raster-layers-manager/rasters-manager.component.ts

@@ -0,0 +1,40 @@
+/*
+ * Licensed to Gisaïa under one or more contributor
+ * license agreements. See the NOTICE.txt file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Gisaïa licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { VisualizeService } from '../../../services/visualize.service';
+import { AoiEdition } from 'arlas-web-components';
+
+@Component({
+  selector: 'arlas-rasters-manager',
+  templateUrl: './rasters-manager.component.html',
+  styleUrls: ['./rasters-manager.component.scss']
+})
+export class RastersManagerComponent {
+
+  public constructor(private visualisationService: VisualizeService) {
+
+  }
+
+  /** Removes all raster layers from the map. */
+  public removeLayers() {
+    this.visualisationService.removeRasters();
+  }
+
+}

src/app/services/visualize.service.ts

@@ -40,12 +40,18 @@ const GEOCODING_PREVIEW_ID = 'geojson-geocoding-preview';
 export class VisualizeService {
   public map;
   public fitbounds: Array<Array<number>> = [];
+  /**  @deprecated. Use isRasterOnMap instead. */
   public isWMTSOnMap = false;
+  public isRasterOnMap = false;
 
   public constructor(public collaborativeService: ArlasCollaborativesearchService,
     private translateService: TranslateService, private snackBar: MatSnackBar
   ) { }
 
+  /**
+   * Sets the mapbox map object + loads the 'cross' icon to it.
+   * @param m Mapbox map object.
+   */
   public setMap(m) {
     this.map = m;
     this.map.loadImage(
@@ -102,13 +108,18 @@ export class VisualizeService {
     }));
   }
 
+  /** @deprecated Use removeRasters instead. */
   public removeWMTS(id?: string) {
+    this.removeRasters(id);
+  }
+
+  public removeRasters(id?: string) {
     if (id) {
-      if (this.map.getLayer('wmts-layer-' + id)) {
-        this.map.removeLayer('wmts-layer-' + id);
+      if (this.map.getLayer('raster-layer-' + id)) {
+        this.map.removeLayer('raster-layer-' + id);
       }
-      if (this.map.getSource('wmts-source-' + id)) {
-        this.map.removeSource('wmts-source-' + id);
+      if (this.map.getSource('raster-source-' + id)) {
+        this.map.removeSource('raster-source-' + id);
       }
       if (this.map.getLayer(CROSS_LAYER_PREFIX + id)) {
         this.map.removeLayer(CROSS_LAYER_PREFIX + id);
@@ -119,40 +130,59 @@ export class VisualizeService {
     } else {
       this.map.getStyle().layers
         .filter(layer => layer.source !== undefined)
-        .filter(layer => layer.source.indexOf('wmts-source-') >= 0 || layer.source.indexOf(CROSS_LAYER_PREFIX) >= 0)
+        .filter(layer => layer.source.indexOf('raster-source-') >= 0 || layer.source.indexOf(CROSS_LAYER_PREFIX) >= 0)
         .forEach(layer => {
           this.map.removeLayer(layer.id);
           this.map.removeSource(layer.source);
         });
       this.isWMTSOnMap = false;
+      this.isRasterOnMap = false;
     }
+    this.isRasterOnMap = this.map.getStyle().layers
+      .filter(layer => layer.source !== undefined)
+      .filter(layer => layer.source.indexOf('raster-source-') >= 0 || layer.source.indexOf(CROSS_LAYER_PREFIX) >= 0).length > 0;
+    this.isWMTSOnMap = this.isRasterOnMap;
   }
 
+  /** @deprecated Use add raster instead. */
   public addWMTS(urlWmts, maxZoom, bounds: Array<number>, id: string, beforeId?: string) {
-    if (this.map.getLayer('wmts-layer-' + id)) {
-      this.map.removeLayer('wmts-layer-' + id);
+    this.addRaster(urlWmts, maxZoom, bounds, id, beforeId);
+  }
+
+  /**
+   *
+   * @param url Url to the raster source.
+   * @param maxZoom Maximum zoom level.
+   * @param bounds Bounds of the raster. The source won't load tiles beyond these bounds.
+   * @param id Identifier of the raster.
+   * @param beforeId Insert before a given raster id.
+   */
+  public addRaster(url, maxZoom, bounds: Array<number>, id: string, beforeId?: string) {
+    if (this.map.getLayer('raster-layer-' + id)) {
+      this.map.removeLayer('raster-layer-' + id);
     }
-    if (this.map.getSource('wmts-source-' + id)) {
-      this.map.removeSource('wmts-source-' + id);
+    if (this.map.getSource('raster-source-' + id)) {
+      this.map.removeSource('raster-source-' + id);
     }
-    this.map.addSource('wmts-source-' + id, {
+    this.map.addSource('raster-source-' + id, {
       type: 'raster',
-      tiles: [urlWmts],
+      tiles: [url],
       bounds: bounds,
       maxzoom: maxZoom,
       tileSize: 256
     });
     this.map.addLayer({
-      'id': 'wmts-layer-' + id,
+      'id': 'raster-layer-' + id,
       'type': 'raster',
-      'source': 'wmts-source-' + id,
+      'source': 'raster-source-' + id,
       'paint': {},
       'layout': {
         'visibility': 'visible'
       }
     }, beforeId);
     if (id !== 'external') {
       this.isWMTSOnMap = true;
+      this.isRasterOnMap = true;
     }
 
     this.addcrossToRemove(bounds[2], bounds[3], id);
@@ -206,11 +236,7 @@ export class VisualizeService {
       }
     });
     this.map.on('click', CROSS_LAYER_PREFIX + id, (e) => {
-      this.removeWMTS(id);
-      // Remove button 'remove all wmts' if no more wmts left on the map
-      this.isWMTSOnMap = this.map.getStyle().layers
-        .filter(layer => layer.source !== undefined)
-        .filter(layer => layer.source.indexOf('wmts-source-') >= 0 || layer.source.indexOf(CROSS_LAYER_PREFIX) >= 0).length > 0;
+      this.removeRasters(id);
     });
     this.map.on('mousemove', CROSS_LAYER_PREFIX + id, (e) => {
       this.map.getCanvas().style.cursor = 'pointer';
@@ -293,7 +319,7 @@ export class VisualizeService {
 
   public addGeocodingPreviewLayer(geoJson: any) {
     const source = this.map.getSource(GEOCODING_PREVIEW_ID);
-    if(!source) {
+    if (!source) {
       this.map.addSource(GEOCODING_PREVIEW_ID, {
         type: 'geojson',
         data: geoJson
@@ -308,28 +334,28 @@ export class VisualizeService {
       'circle-color': '#3bb2d0',
       'circle-stroke-color': '#3bb2d0'
     };
-    const polygonPaint = {'fill-color':'#3bb2d0','fill-outline-color':'#3bb2d0','fill-opacity':0.1};
+    const polygonPaint = { 'fill-color': '#3bb2d0', 'fill-outline-color': '#3bb2d0', 'fill-opacity': 0.1 };
 
     const type = (geoJson.type === 'Point') ? 'circle' : 'fill';
-    const paint =  (geoJson.type === 'Point') ? circlePaint : polygonPaint;
+    const paint = (geoJson.type === 'Point') ? circlePaint : polygonPaint;
 
     this.map.addLayer({
       'id': GEOCODING_PREVIEW_ID,
       'type': type,
       'source': GEOCODING_PREVIEW_ID,
-      'paint':paint,
+      'paint': paint,
       'layout': {
         'visibility': 'visible'
       }
     });
   }
-  public removeGeocodingPreviewLayer(){
-    if(this.map.getLayer(GEOCODING_PREVIEW_ID)) {
+  public removeGeocodingPreviewLayer() {
+    if (this.map.getLayer(GEOCODING_PREVIEW_ID)) {
       this.map.removeLayer(GEOCODING_PREVIEW_ID);
     }
   }
 
-  public handleGeojsonPreview(geojson: any){
+  public handleGeojsonPreview(geojson: any) {
     this.addGeocodingPreviewLayer(geojson);
     this.map.on('zoomend', () => {
       this.removeGeocodingPreviewLayer();

src/assets/i18n/en.json

@@ -39,6 +39,7 @@
 	"Width": "Width",
 	"envelope": "envelope",
 	"Height": "Height",
+	"Remove all rasters": "Remove all rasters",
 	"Updating Geo-query of ": "Updating Geo-query of {{collection}}",
 	"Loading data of ": "Loading collection {{collection}}",
 	"You have exceeded the number of products authorised for a single download": "You have exceeded the number of products authorised for a single download",

src/assets/i18n/es.json

@@ -39,6 +39,7 @@
 	"Width": "Anchura",
 	"envelope": "cuadro delimitador ",
 	"Height": "Altura",
+	"Remove all rasters": "Quitar todos los rasters",
 	"Updating Geo-query of ": "Carga de la petición geográfica de {{collection}}",
 	"Loading data of ": "Carga de la collección {{collection}}",
 	"You have exceeded the number of products authorised for a single download": "Ha superado el número de productos autorizados para una sola descarga",

src/assets/i18n/fr.json

@@ -39,6 +39,7 @@
 	"Width": "Largeur",
 	"envelope": "enveloppe",
 	"Height": "Hauteur",
+	"Remove all rasters": "Retirer tous les rasters",
 	"Updating Geo-query of ": "Chargement de la requête géographique de {{collection}}",
 	"Loading data of ": "Chargement de la collection {{collection}}",
 	"You have exceeded the number of products authorised for a single download": "Vous avez dépassé le nombre de produits autorisés pour un téléchargement unique",

src/assets/i18n/template.json

@@ -39,6 +39,7 @@
 	"Width": "Width",
 	"envelope": "envelope",
 	"Height": "Height",
+	"Remove all rasters": "Remove all rasters",
 	"Updating Geo-query of ": "Updating Geo-query of ",
 	"Loading data of ": "Loading data of ",
 	"You have exceeded the number of products authorised for a single download": "You have exceeded the number of products authorised for a single download",

src/settings.yaml

@@ -29,8 +29,8 @@ authentication:
 tab_name: "ARLAS Wui"
 
 persistence:
-  url: http://localhost:81/persist
-  use_local_config: true
+  url: https://cloud.arlas.io/arlas/persistence
+  use_local_config: false
 histogram:
   max_buckets: 200
   export_nb_buckets: 1000

src/styles/variables.scss

@@ -31,6 +31,7 @@ $map-scale-border-width: 2px;
 $map-attributions-height: 20px;
 $map-scale-max-width: 100px;
 $map-scale-height: 22px;
+$map-settings-height: 91px;
 
 // Original size of 130px + sm-spacing
 $timeline-height: 135px;