From 4e489ebeda8ca5e6133d33143419a3a0e9b1f6d0 Mon Sep 17 00:00:00 2001 From: Mohamed Hamou Date: Thu, 17 Oct 2024 11:28:26 +0200 Subject: [PATCH] Add a button to remove all raster layers added to the map --- src/app/app.module.ts | 4 +- .../arlas-wui-root.component.html | 3 + .../arlas-wui-root.component.scss | 22 +++++- .../rasters-manager.component.html | 3 + .../rasters-manager.component.scss | 23 ++++++ .../rasters-manager.component.ts | 40 ++++++++++ src/app/services/visualize.service.ts | 76 +++++++++++++------ src/assets/i18n/en.json | 1 + src/assets/i18n/es.json | 1 + src/assets/i18n/fr.json | 1 + src/assets/i18n/template.json | 1 + src/settings.yaml | 4 +- src/styles/variables.scss | 1 + 13 files changed, 150 insertions(+), 30 deletions(-) create mode 100644 src/app/components/map/raster-layers-manager/rasters-manager.component.html create mode 100644 src/app/components/map/raster-layers-manager/rasters-manager.component.scss create mode 100644 src/app/components/map/raster-layers-manager/rasters-manager.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 5b39c766..7be1dc18 100644 --- a/src/app/app.module.ts +++ b/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, diff --git a/src/app/components/arlas-wui-root/arlas-wui-root.component.html b/src/app/components/arlas-wui-root/arlas-wui-root.component.html index a1efc898..9b678808 100644 --- a/src/app/components/arlas-wui-root/arlas-wui-root.component.html +++ b/src/app/components/arlas-wui-root/arlas-wui-root.component.html @@ -80,6 +80,9 @@ +
+ +
diff --git a/src/app/components/arlas-wui-root/arlas-wui-root.component.scss b/src/app/components/arlas-wui-root/arlas-wui-root.component.scss index 8f2e2045..1e81f577 100644 --- a/src/app/components/arlas-wui-root/arlas-wui-root.component.scss +++ b/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; diff --git a/src/app/components/map/raster-layers-manager/rasters-manager.component.html b/src/app/components/map/raster-layers-manager/rasters-manager.component.html new file mode 100644 index 00000000..234a9def --- /dev/null +++ b/src/app/components/map/raster-layers-manager/rasters-manager.component.html @@ -0,0 +1,3 @@ +
+ visibility_off +
\ No newline at end of file diff --git a/src/app/components/map/raster-layers-manager/rasters-manager.component.scss b/src/app/components/map/raster-layers-manager/rasters-manager.component.scss new file mode 100644 index 00000000..be51d1a0 --- /dev/null +++ b/src/app/components/map/raster-layers-manager/rasters-manager.component.scss @@ -0,0 +1,23 @@ +@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; + } +} \ No newline at end of file diff --git a/src/app/components/map/raster-layers-manager/rasters-manager.component.ts b/src/app/components/map/raster-layers-manager/rasters-manager.component.ts new file mode 100644 index 00000000..ff0d1d25 --- /dev/null +++ b/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(); + } + +} \ No newline at end of file diff --git a/src/app/services/visualize.service.ts b/src/app/services/visualize.service.ts index cbffc7ef..6c2191e7 100644 --- a/src/app/services/visualize.service.ts +++ b/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> = []; + /** @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,33 +130,51 @@ 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, 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 + * @param maxZoom + * @param bounds + * @param id + * @param beforeId + */ + public addRaster(url, maxZoom, bounds: Array, 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' @@ -153,6 +182,7 @@ export class VisualizeService { }, 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(); diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index cc16748f..6c1e5f0a 100644 --- a/src/assets/i18n/en.json +++ b/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", diff --git a/src/assets/i18n/es.json b/src/assets/i18n/es.json index 1d157722..1a4a76ee 100644 --- a/src/assets/i18n/es.json +++ b/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", diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 4095a1a7..ae001bcf 100644 --- a/src/assets/i18n/fr.json +++ b/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", diff --git a/src/assets/i18n/template.json b/src/assets/i18n/template.json index 58d90025..6ea2f789 100644 --- a/src/assets/i18n/template.json +++ b/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", diff --git a/src/settings.yaml b/src/settings.yaml index b71e2236..c7547dac 100644 --- a/src/settings.yaml +++ b/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 diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 93ed358d..d7e9fc3d 100644 --- a/src/styles/variables.scss +++ b/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;