From c79b32e769d2aa35571d9fb4bb9d30210db17f12 Mon Sep 17 00:00:00 2001
From: Artem Halushko <ahalushko@thingsboard.io>
Date: Fri, 20 Mar 2020 19:24:19 +0200
Subject: [PATCH] add bounds padding

---
 .../home/components/widget/lib/maps/leaflet-map.ts        | 8 ++++----
 .../modules/home/components/widget/lib/maps/map-models.ts | 1 +
 .../home/components/widget/lib/maps/map-widget2.ts        | 2 ++
 .../modules/home/components/widget/lib/maps/polygon.ts    | 2 --
 .../modules/home/components/widget/lib/maps/polyline.ts   | 5 +++++
 5 files changed, 12 insertions(+), 6 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 9c15a378fd..a2e906a963 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
@@ -210,8 +210,8 @@ export default abstract class LeafletMap {
     private createMarker(key, data: FormattedData, dataSources: FormattedData[], settings: MarkerSettings, setFocus = true) {
         this.ready$.subscribe(() => {
             const newMarker = new Marker(this.map, this.convertPosition(data), settings, data, dataSources, () => { }, this.dragMarker);
-            if (setFocus)
-                this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()));
+            if (setFocus && settings.fitMapBounds)
+                this.map.fitBounds(this.bounds.extend(newMarker.leafletMarker.getLatLng()).pad(0.2));
             this.markers.set(key, newMarker);
         });
     }
@@ -245,10 +245,10 @@ export default abstract class LeafletMap {
             if (data.length) {
                 const dataSource = polyData.map(arr => arr[0]);
                 if (this.poly) {
-                    this.updatePolyline(data, dataSource, this.options);
+                    this.updatePolyline(data, polyData, this.options);
                 }
                 else {
-                    this.createPolyline(data, dataSource, this.options);
+                    this.createPolyline(data, polyData, this.options);
                 }
             }
         })
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
index 92b6c094d9..de939cff9f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-models.ts
@@ -70,6 +70,7 @@ export type MarkerSettings = {
     markerImages?: string[];
     useMarkerImage: boolean;
     markerImageSize: number;
+    fitMapBounds: boolean;
     markerImage: {
         length: number
     }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
index c1fc2a4264..997aa7f013 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/map-widget2.ts
@@ -166,6 +166,8 @@ export class MapWidgetController implements MapWidgetInterface {
     }
 
     update() {
+        console.log(parseArray(this.data));
+        
         if (this.drawRoutes)
             this.map.updatePolylines(parseArray(this.data));
         if (this.settings.showPolygon) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
index e38eaae1c6..80d0bce7f8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polygon.ts
@@ -46,9 +46,7 @@ export class Polygon {
     }
 
     updatePolygonColor(settings) {
-        console.log('Polygon -> updatePolygonColor -> settings', settings)
         const style: L.PathOptions = {
-
             fill: true,
             fillColor: settings.color,
             color: settings.color,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts
index 9feb0ff08e..0fc992fdfb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/maps/polyline.ts
@@ -34,6 +34,7 @@ export class Polyline {
         this.leafletPoly = L.polyline(locations,
             this.getPolyStyle(settings)
         ).addTo(this.map);
+        
         if (settings.usePolylineDecorator) {
             this.polylineDecorator = L.polylineDecorator(this.leafletPoly, this.getDecoratorSettings(settings)).addTo(this.map);
         }
@@ -62,12 +63,16 @@ export class Polyline {
 
     updatePolyline(settings, data, dataSources) {
         this.leafletPoly.setStyle(this.getPolyStyle(settings));
+        console.log( this.getPolyStyle(settings));
+
       //  this.setPolylineLatLngs(data);
       if(this.polylineDecorator)
         this.polylineDecorator.setPaths(this.leafletPoly);
     }
 
     getPolyStyle(settings: PolylineSettings): L.PolylineOptions {
+        console.log(this.data,this.dataSources, this.dataSources[this.data[0]?.dsIndex], this.data[0]?.dsIndex);
+        
         return {
             color: settings.useColorFunction ?
                 safeExecute(settings.colorFunction, [this.data, this.dataSources, this.data[0]?.dsIndex]) : settings.color,