From cffe2135f2149cb748ca5e355f40e146640b27c5 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Mon, 10 Aug 2020 10:29:55 +0300
Subject: [PATCH] Fix updated bounds for marker cluster mode

---
 .../components/widget/lib/maps/leaflet-map.ts | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
index 33c36e3ce8..33c0c36c3b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/leaflet-map.ts
@@ -320,9 +320,13 @@ export default abstract class LeafletMap {
         bounds.extend(polygon.leafletPoly.getBounds());
       });
     }
-    this.markers.forEach((marker) => {
-      bounds.extend(marker.leafletMarker.getLatLng());
-    });
+    if ((this.options as MarkerSettings).useClusterMarkers) {
+      bounds.extend(this.markersCluster.getBounds());
+    } else {
+      this.markers.forEach((marker) => {
+        bounds.extend(marker.leafletMarker.getLatLng());
+      });
+    }
 
     const mapBounds = this.map.getBounds();
     if (bounds.isValid() && (!this.bounds || !mapBounds.contains(bounds))) {
@@ -396,16 +400,20 @@ export default abstract class LeafletMap {
 
     private createMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings,
                          updateBounds = true, callback?): Marker {
-        const newMarker = new Marker(this, this.convertPosition(data), settings, data, dataSources, this.dragMarker);
-        if (callback)
-            newMarker.leafletMarker.on('click', () => { callback(data, true) });
-        if (this.bounds && updateBounds)
-            this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
-        this.markers.set(key, newMarker);
-        if (!this.options.useClusterMarkers) {
-          this.map.addLayer(newMarker.leafletMarker);
-        }
-        return newMarker;
+      const newMarker = new Marker(this, this.convertPosition(data), settings, data, dataSources, this.dragMarker);
+      if (callback) {
+        newMarker.leafletMarker.on('click', () => {
+          callback(data, true)
+        });
+      }
+      if (this.bounds && updateBounds && !(this.options as MarkerSettings).useClusterMarkers) {
+        this.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
+      }
+      this.markers.set(key, newMarker);
+      if (!this.options.useClusterMarkers) {
+        this.map.addLayer(newMarker.leafletMarker);
+      }
+      return newMarker;
     }
 
     private updateMarker(key: string, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings): Marker {