fix: map in settings could do weird movements

Author: AntoineRelief

libs/safe/src/lib/components/ui/map/map.component.ts

@@ -217,7 +217,6 @@ export class MapComponent
     this.setUpMapListeners();
 
     setTimeout(() => {
-      console.log('invalidating');
       this.map.invalidateSize();
       this.mapEvent.emit({
         type: MapEventType.FIRST_LOAD,
@@ -336,19 +335,24 @@ export class MapComponent
       if (this.map.getZoom() !== initialState.viewpoint.zoom) {
         this.map.setZoom(initialState.viewpoint.zoom);
       }
-      const currentCenter = this.map.getCenter();
-      if (
-        initialState.viewpoint.center.latitude !== currentCenter.lat ||
-        initialState.viewpoint.center.longitude !== currentCenter.lng
-      ) {
-        this.map.setView(
-          L.latLng(
-            initialState.viewpoint.center.latitude,
-            initialState.viewpoint.center.longitude
-          ),
-          initialState.viewpoint.zoom
-        );
-      }
+      // Could ask the map to do some unwanted movements
+      // const currentCenter = this.map.getCenter();
+      // if (
+      //   initialState.viewpoint.center.latitude !== currentCenter.lat ||
+      //   initialState.viewpoint.center.longitude !== currentCenter.lng
+      // ) {
+      //   console.log([
+      //     initialState.viewpoint.center.latitude,
+      //     initialState.viewpoint.center.longitude,
+      //   ]);
+      //   this.map.setView(
+      //     L.latLng(
+      //       initialState.viewpoint.center.latitude,
+      //       initialState.viewpoint.center.longitude
+      //     ),
+      //     initialState.viewpoint.zoom
+      //   );
+      // }
     }
 
     // Close layers/bookmarks menu

libs/safe/src/lib/components/widgets/map-settings/map-settings.component.ts

@@ -18,12 +18,9 @@ import {
   MapEvent,
   MapEventType,
 } from '../../ui/map/interfaces/map.interface';
-import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
+import { BehaviorSubject, Subject, debounceTime, takeUntil } from 'rxjs';
 import { SafeUnsubscribeComponent } from '../../utils/unsubscribe/unsubscribe.component';
 import { LayerModel } from '../../../models/layer.model';
-import { SafeMapLayersService } from '../../../services/map/map-layers.service';
-import { SafeConfirmService } from '../../../services/confirm/confirm.service';
-import { TranslateService } from '@ngx-translate/core';
 import { MapComponent } from '../../ui/map';
 import { extendWidgetForm } from '../common/display-settings/extendWidgetForm';
 import { SafeLayoutService } from '../../../services/layout/layout.service';
@@ -66,16 +63,10 @@ export class SafeMapSettingsComponent
   /**
    * Class constructor
    *
-   * @param mapLayersService SafeMapLayersService to add/edit/remove layers
-   * @param confirmService SafeConfirmService
-   * @param translate TranslateService
    * @param cdr ChangeDetectorRef
    * @param layoutService Shared layout service
    */
   constructor(
-    private mapLayersService: SafeMapLayersService,
-    private confirmService: SafeConfirmService,
-    private translate: TranslateService,
     private cdr: ChangeDetectorRef,
     private layoutService: SafeLayoutService
   ) {
@@ -147,37 +138,37 @@ export class SafeMapSettingsComponent
     });
     this.tileForm
       .get('initialState')
-      ?.valueChanges.pipe(takeUntil(this.destroy$))
+      ?.valueChanges.pipe(takeUntil(this.destroy$), debounceTime(1000))
       .subscribe((value) =>
         this.updateMapSettings({
           initialState: value,
         } as MapConstructorSettings)
       );
     this.tileForm
       .get('basemap')
-      ?.valueChanges.pipe(takeUntil(this.destroy$))
+      ?.valueChanges.pipe(takeUntil(this.destroy$), debounceTime(1000))
       .subscribe((value) =>
         this.updateMapSettings({ basemap: value } as MapConstructorSettings)
       );
     this.tileForm
       .get('controls')
-      ?.valueChanges.pipe(takeUntil(this.destroy$))
+      ?.valueChanges.pipe(takeUntil(this.destroy$), debounceTime(1000))
       .subscribe((value) => {
         this.updateMapSettings({
           controls: value,
         } as MapConstructorSettings);
       });
     this.tileForm
       .get('arcGisWebMap')
-      ?.valueChanges.pipe(takeUntil(this.destroy$))
+      ?.valueChanges.pipe(takeUntil(this.destroy$), debounceTime(1000))
       .subscribe((value) =>
         this.updateMapSettings({
           arcGisWebMap: value,
         } as MapConstructorSettings)
       );
     this.tileForm
       .get('layers')
-      ?.valueChanges.pipe(takeUntil(this.destroy$))
+      ?.valueChanges.pipe(takeUntil(this.destroy$), debounceTime(1000))
       .subscribe((value) =>
         this.updateMapSettings({
           layers: value,
@@ -217,7 +208,6 @@ export class SafeMapSettingsComponent
    * @param settings new settings
    */
   private updateMapSettings(settings: MapConstructorSettings) {
-    console.log('update');
     if (this.mapSettings) {
       this.mapSettings = {
         ...this.mapSettings,