ROU-4665: allow preserving the zoom level when user changes it

src/OSFramework/Maps/Configuration/IConfigurationMap.ts

@@ -8,6 +8,7 @@ namespace OSFramework.Maps.Configuration {
         apiKey?: string;
         center: string | OSStructures.OSMap.Coordinates;
         height: string;
+        respectUserZoom?: boolean;
         type?: Enum.OSMap.Type;
         uniqueId: string;
         zoom: Enum.OSMap.Zoom;

src/OSFramework/Maps/Enum/OS_Config_Map.ts

@@ -13,6 +13,7 @@ namespace OSFramework.Maps.Enum {
         markerClustererMinClusterSize,
         markerClustererZoomOnClick,
         offset,
+        respectUserZoom,
         showTraffic,
         staticMap,
         style,

src/OSFramework/Maps/OSMap/AbstractMap.ts

@@ -22,8 +22,10 @@ namespace OSFramework.Maps.OSMap {
         private _shapesSet: Set<Shape.IShape>;
         private _uniqueId: string;
         private _widgetId: string;
+        private _zoomChanged: boolean;
 
         protected _features: Feature.ExposedFeatures;
+        protected _mapZoomChangeCallback: Maps.Callbacks.Generic;
         protected _provider: W;
 
         constructor(
@@ -46,9 +48,15 @@ namespace OSFramework.Maps.OSMap {
             this._mapEvents = new Event.OSMap.MapEventsManager(this);
             this._mapType = mapType;
             this._providerType = providerType;
+            this._zoomChanged = false;
+            this._mapZoomChangeCallback = this._mapZoomChangeHandler.bind(this);
         }
         public abstract get mapTag(): string;
 
+        protected get allowRefreshZoom(): boolean {
+            return !(this.config.respectUserZoom && this._zoomChanged);
+        }
+
         protected get shapes(): Shape.IShape[] {
             return Array.from(this._shapesSet);
         }
@@ -109,6 +117,12 @@ namespace OSFramework.Maps.OSMap {
             return this._widgetId;
         }
 
+        private _mapZoomChangeHandler(): void {
+            if (this.config.respectUserZoom) {
+                this._zoomChanged = true;
+            }
+        }
+
         protected finishBuild(): void {
             this._isReady = true;
 
@@ -168,6 +182,13 @@ namespace OSFramework.Maps.OSMap {
             //Update Map's config when the property is available
             if (this.config.hasOwnProperty(propertyName)) {
                 this.config[propertyName] = propertyValue;
+
+                if (
+                    Maps.Enum.OS_Config_Map.respectUserZoom ===
+                    Maps.Enum.OS_Config_Map[propertyName]
+                ) {
+                    this._zoomChanged = false;
+                }
             } else {
                 this.mapEvents.trigger(
                     Event.OSMap.MapEventType.OnError,

src/Providers/Maps/Google/Configuration/OSMap/GoogleMapConfig.ts

@@ -10,6 +10,7 @@ namespace Provider.Maps.Google.Configuration.OSMap {
         public height: string;
         public markerClusterer: OSFramework.Maps.Configuration.IConfigurationMarkerClusterer;
         public offset: OSFramework.Maps.OSStructures.OSMap.Offset;
+        public respectUserZoom: boolean;
         public showTraffic: boolean;
         public style: OSFramework.Maps.Enum.OSMap.Style;
         public type: OSFramework.Maps.Enum.OSMap.Type;

src/Providers/Maps/Google/OSMap/OSMap.ts

@@ -13,6 +13,7 @@ namespace Provider.Maps.Google.OSMap {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         private _advancedFormatObj: any;
         private _fBuilder: Feature.FeatureBuilder;
+        private _gZoomChangeListener: google.maps.MapsEventListener;
         private _scriptCallback: OSFramework.Maps.Callbacks.Generic;
 
         constructor(mapId: string, configs: JSON) {
@@ -26,6 +27,26 @@ namespace Provider.Maps.Google.OSMap {
             this._scriptCallback = this._createGoogleMap.bind(this);
         }
 
+        private _addMapZoomHandler(): void {
+            /*
+                This timeout is here due to an anomaly in the behaviour of google maps
+                when more than one maker is added to the map, the zoom event is fired twice:
+                https://stackoverflow.com/questions/20436185/google-maps-api-v3-zoom-changed-event-fired-twice-after-fitbounds-called
+
+                However since the event is triggered asynchronously and there's no way
+                to wait for it, or to know it will occur, this hack was added. I'm sorry, I'm ashamed of myself. 
+            */
+            setTimeout(() => {
+                if (this && this._provider) {
+                    this._gZoomChangeListener = google.maps.event.addListener(
+                        this._provider,
+                        Constants.OSMap.ProviderEventNames.zoom_changed,
+                        this._mapZoomChangeCallback
+                    );
+                }
+            }, 100);
+        }
+
         private _buildDrawingTools(): void {
             // There is only one drawingTools per map
             this.drawingTools && this.drawingTools.build();
@@ -113,6 +134,7 @@ namespace Provider.Maps.Google.OSMap {
 
                 // We can only set the events on the provider after its creation
                 this._setMapEvents(this._advancedFormatObj.mapEvents);
+                this._addMapZoomHandler();
             } else {
                 throw Error(`The google.maps lib has not been loaded.`);
             }
@@ -130,6 +152,12 @@ namespace Provider.Maps.Google.OSMap {
             return this.config.getProviderConfig();
         }
 
+        private _removeMapZoomHandler(): void {
+            if (this._gZoomChangeListener) {
+                google.maps.event.removeListener(this._gZoomChangeListener);
+            }
+        }
+
         private _setMapEvents(events?: Array<string>): void {
             SharedComponents.RemoveEventsFromProvider(this);
 
@@ -450,6 +478,9 @@ namespace Provider.Maps.Google.OSMap {
         }
 
         public refresh(): void {
+            //Let's stop listening to the zoom event be caused by the refreshZoom
+            this._removeMapZoomHandler();
+
             let position = this.features.center.getCenter();
             // When the position is empty, we use the default position
             // If the configured center position of the map is equal to the default
@@ -488,15 +519,20 @@ namespace Provider.Maps.Google.OSMap {
             // Refresh the center position
             this.features.center.refreshCenter(position);
 
-            // Refresh the zoom
-            this.features.zoom.refreshZoom();
+            if (this.allowRefreshZoom) {
+                // Refresh the zoom
+                this.features.zoom.refreshZoom();
+            }
 
             // Refresh the offset
             this.features.offset.setOffset(this.features.offset.getOffset);
 
             // Repaint the marker Clusterers
             this.hasMarkerClusterer() &&
                 this.features.markerClusterer.repaint();
+
+            //Re-adding the map zoom handler
+            this._addMapZoomHandler();
         }
 
         public refreshProviderEvents(): void {

src/Providers/Maps/Leaflet/Configuration/OSMap/LeafletMapConfiguration.ts

@@ -7,6 +7,7 @@ namespace Provider.Maps.Leaflet.Configuration.OSMap {
         public center: string | OSFramework.Maps.OSStructures.OSMap.Coordinates;
         public height: string;
         public offset: OSFramework.Maps.OSStructures.OSMap.Offset;
+        public respectUserZoom: boolean;
         public uniqueId: string;
         public zoom: OSFramework.Maps.Enum.OSMap.Zoom;
 

src/Providers/Maps/Leaflet/Constants/OSMap/Events.ts

@@ -22,6 +22,7 @@ namespace Provider.Maps.Leaflet.Constants.OSMap {
         tilesloaded = 'load',
         load = 'load',
         zoom_changed = 'zoom',
+        zoom_end = 'zoomend',
         zoom = 'zoom'
     }
 }

src/Providers/Maps/Leaflet/OSMap/OSMap.ts

@@ -32,6 +32,13 @@ namespace Provider.Maps.Leaflet.OSMap {
             );
         }
 
+        private _addMapZoomHandler(): void {
+            this._provider.on(
+                Constants.OSMap.ProviderEventNames.zoom_end,
+                this._mapZoomChangeCallback
+            );
+        }
+
         private _buildDrawingTools(): void {
             // Here we aren't using a forEach because there is only one drawingTools per map
             this.drawingTools && this.drawingTools.build();
@@ -53,6 +60,13 @@ namespace Provider.Maps.Leaflet.OSMap {
             return this.config.getProviderConfig();
         }
 
+        private _removeMapZoomHandler(): void {
+            this._provider.off(
+                Constants.OSMap.ProviderEventNames.zoom_end,
+                this._mapZoomChangeCallback
+            );
+        }
+
         private _setMapEvents(): void {
             // Any events that got added to the mapEvents via the API Subscribe method will have to be taken care here
             // If the Event type of each handler is MapProviderEvent, we want to make sure to add that event to the listeners of the google maps provider (e.g. click, dblclick, contextmenu, etc)
@@ -189,6 +203,8 @@ namespace Provider.Maps.Leaflet.OSMap {
             // Make sure to change the center after the conversion of the location to coordinates
             this.features.center.updateCenter(currentCenter as string);
             this._setMapEvents();
+
+            this._addMapZoomHandler();
         }
 
         public buildFeatures(): void {
@@ -317,6 +333,8 @@ namespace Provider.Maps.Leaflet.OSMap {
         }
 
         public refresh(): void {
+            this._removeMapZoomHandler();
+
             let position = this.features.center.getCenter();
             // When the position is empty, we use the default position
             // If the configured center position of the map is equal to the default
@@ -355,15 +373,19 @@ namespace Provider.Maps.Leaflet.OSMap {
             // Refresh the center position
             this.features.center.refreshCenter(position);
 
-            // Refresh the zoom
-            this.features.zoom.refreshZoom();
+            if (this.allowRefreshZoom) {
+                // Refresh the zoom
+                this.features.zoom.refreshZoom();
+            }
 
             // Refresh the offset
             this.features.offset.setOffset(this.features.offset.getOffset);
 
             // Repaint the marker Clusterers
             this.hasMarkerClusterer() &&
                 this.features.markerClusterer.repaint();
+
+            this._addMapZoomHandler();
         }
 
         public refreshProviderEvents(): void {