TB-70: Map widget improvement.

ui/src/app/widget/lib/google-map.js

@@ -144,8 +144,8 @@ export default class TbGoogleMap {
     }
 
     /* eslint-disable no-undef */
-    updateMarkerLabel(marker, settings, labelText) {
+    updateMarkerLabel(marker, settings) {
-        marker.set('labelContent', '<div style="color: '+ settings.labelColor +';"><b>'+labelText+'</b></div>');
+        marker.set('labelContent', '<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>');
     }
     /* eslint-enable no-undef */
 
@@ -180,7 +180,7 @@ export default class TbGoogleMap {
             }
             marker.setIcon(pinImage);
             if (settings.showLabel) {
-                marker.set('labelAnchor', new google.maps.Point(50, height + 20));
+                marker.set('labelAnchor', new google.maps.Point(100, height + 20));
             }
         }
         testImage.src = image;
@@ -206,9 +206,9 @@ export default class TbGoogleMap {
                 map: this.map,
                 icon: pinImage,
                 shadow: pinShadow,
-                labelContent: '<div style="color: '+ settings.labelColor +';"><b>'+settings.label+'</b></div>',
+                labelContent: '<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
                 labelClass: "tb-labels",
-                labelAnchor: new google.maps.Point(50, height + 20)
+                labelAnchor: new google.maps.Point(100, height + 20)
             });
         } else {
             marker = new google.maps.Marker({

ui/src/app/widget/lib/map-widget.js

@@ -172,6 +172,7 @@ export default class TbMapWidget {
                         showLabel: subscriptionLocationSettings.showLabel !== false,
                         displayTooltip: subscriptionLocationSettings.displayTooltip !== false,
                         label: datasource.name,
+                        labelText: datasource.name,
                         labelColor: subscriptionLocationSettings.labelColor || this.ctx.widgetConfig.color || '#000000',
                         color: "#FE7569",
                         useColorFunction: false,
@@ -218,6 +219,7 @@ export default class TbMapWidget {
                 showLabel: true,
                 displayTooltip: true,
                 label: "",
+                labelText: "",
                 labelColor: this.ctx.widgetConfig.color || '#000000',
                 color: "#FE7569",
                 useColorFunction: false,
@@ -246,6 +248,7 @@ export default class TbMapWidget {
 
                 this.locationsSettings[i].showLabel = configuredLocationsSettings[i].showLabel !== false;
                 this.locationsSettings[i].label = configuredLocationsSettings[i].label || this.locationsSettings[i].label;
+                this.locationsSettings[i].labelText = this.locationsSettings[i].label;
                 this.locationsSettings[i].color = configuredLocationsSettings[i].color ? tinycolor(configuredLocationsSettings[i].color).toHexString() : this.locationsSettings[i].color;
 
                 this.locationsSettings[i].useColorFunction = configuredLocationsSettings[i].useColorFunction === true;

ui/src/app/widget/lib/map-widget2.js

@@ -52,9 +52,10 @@ export default class TbMapWidgetV2 {
 
         if (!useDynamicLocations) {
             this.subscription = this.ctx.defaultSubscription;
-            this.configureLocationsSettings();
         }
 
+        this.configureLocationsSettings();
+
         var minZoomLevel = this.drawRoutes ? 18 : 15;
 
         var initCallback = function() {
@@ -73,6 +74,30 @@ export default class TbMapWidgetV2 {
         Object.assign(this.callbacks, callbacks);
     }
 
+    clearLocations() {
+        if (this.locations) {
+            var tbMap = this;
+            this.locations.forEach(function(location) {
+                if (location.marker) {
+                    tbMap.map.removeMarker(location.marker);
+                }
+                if (location.polyline) {
+                    tbMap.map.removePolyline(location.polyline);
+                }
+            });
+            this.locations = null;
+            this.markers = [];
+            if (this.drawRoutes) {
+                this.polylines = [];
+            }
+        }
+    }
+
+    setSubscription(subscription) {
+        this.subscription = subscription;
+        this.clearLocations();
+    }
+
     configureLocationsSettings() {
 
         this.locationSettings.latKeyName = this.ctx.settings.latKeyName || 'latitude';
@@ -80,9 +105,6 @@ export default class TbMapWidgetV2 {
 
         this.locationSettings.tooltipPattern = this.ctx.settings.tooltipPattern || "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${"+this.locationSettings.latKeyName+":7}<br/><b>Longitude:</b> ${"+this.locationSettings.lngKeyName+":7}";
 
-        //TODO:
-        //this.locationSettings.tooltipReplaceInfo = procesTooltipPattern(this, this.locationsSettings[i].tooltipPattern, this.subscription.datasources);
-
         this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
         this.locationSettings.displayTooltip = true;
         this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000',
@@ -99,7 +121,7 @@ export default class TbMapWidgetV2 {
         }
 
         this.locationSettings.useMarkerImageFunction = this.ctx.settings.useMarkerImageFunction === true;
-        if (angular.isDefined(this.ctx.settings.markerImageFunction) &&this.ctx.settings.markerImageFunction.length > 0) {
+        if (angular.isDefined(this.ctx.settings.markerImageFunction) && this.ctx.settings.markerImageFunction.length > 0) {
             try {
                 this.locationSettings.markerImageFunction = new Function('data, images, dsData, dsIndex', this.ctx.settings.markerImageFunction);
             } catch (e) {
@@ -121,8 +143,6 @@ export default class TbMapWidgetV2 {
             this.locationSettings.strokeWeight = this.ctx.settings.strokeWeight || 2;
             this.locationSettings.strokeOpacity = this.ctx.settings.strokeOpacity || 1.0;
         }
-
-
     }
 
     update() {
@@ -131,10 +151,9 @@ export default class TbMapWidgetV2 {
 
         function updateLocationLabel(location) {
             if (location.settings.showLabel && location.settings.labelReplaceInfo.variables.length) {
-                var labelText = fillPattern(location.settings.label,
+                location.settings.labelText = fillPattern(location.settings.label,
                     location.settings.labelReplaceInfo, tbMap.subscription.data);
-                tbMap.map.updateMarkerLabel(location.marker, location.settings, labelText);
+                tbMap.map.updateMarkerLabel(location.marker, location.settings);
-                //TODO: update openStreetMap
             }
         }
 
@@ -152,10 +171,9 @@ export default class TbMapWidgetV2 {
             }
         }
 
-        function updateLocationColor(location, dataMap) {
+        function updateLocationColor(location, color, image) {
-            var color = calculateLocationColor(location, dataMap);
             if (!location.settings.calculatedColor || location.settings.calculatedColor !== color) {
-                if (!location.settings.useMarkerImage) {
+                if (!location.settings.useMarkerImage && !image) {
                     tbMap.map.updateMarkerColor(location.marker, color);
                 }
                 if (location.polyline) {
@@ -179,9 +197,8 @@ export default class TbMapWidgetV2 {
             }
         }
 
-        function updateLocationMarkerImage(location, dataMap) {
+        function updateLocationMarkerImage(location, image) {
-            var image = calculateLocationMarkerImage(location, dataMap);
+            if (image && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) {
-            if (image != null && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) {
                 tbMap.map.updateMarkerImage(location.marker, location.settings, image.url, image.size);
                 location.settings.calculatedImage = image;
             }
@@ -189,8 +206,10 @@ export default class TbMapWidgetV2 {
 
         function updateLocationStyle(location, dataMap) {
             updateLocationLabel(location);
-            updateLocationColor(location, dataMap);
+            var color = calculateLocationColor(location, dataMap);
-            updateLocationMarkerImage(location, dataMap);
+            var image = calculateLocationMarkerImage(location, dataMap);
+            updateLocationColor(location, color, image);
+            updateLocationMarkerImage(location, image);
         }
 
         function updateLocation(location, data, dataMap) {
@@ -298,6 +317,7 @@ export default class TbMapWidgetV2 {
                     if (location.settings.showLabel) {
                         location.settings.label = tbMap.utils.createLabelFromDatasource(currentDatasource, location.settings.label);
                         location.settings.labelReplaceInfo = processPattern(location.settings.label, datasources, currentDatasourceIndex);
+                        location.settings.labelText = location.settings.label;
                     }
                     if (location.settings.displayTooltip) {
                         location.settings.tooltipPattern = tbMap.utils.createLabelFromDatasource(currentDatasource, location.settings.tooltipPattern);
@@ -372,7 +392,7 @@ export default class TbMapWidgetV2 {
         }
     }
 
-    static settingsSchema(mapProvider) {
+    static settingsSchema(mapProvider, drawRoutes) {
         var schema;
         if (mapProvider === 'google-map') {
             schema = angular.copy(googleMapSettingsSchema);
@@ -382,6 +402,11 @@ export default class TbMapWidgetV2 {
         angular.merge(schema.schema.properties, commonMapSettingsSchema.schema.properties);
         schema.schema.required = schema.schema.required.concat(commonMapSettingsSchema.schema.required);
         schema.form = schema.form.concat(commonMapSettingsSchema.form);
+        if (drawRoutes) {
+            angular.merge(schema.schema.properties, routeMapSettingsSchema.schema.properties);
+            schema.schema.required = schema.schema.required.concat(routeMapSettingsSchema.schema.required);
+            schema.form = schema.form.concat(routeMapSettingsSchema.form);
+        }
         return schema;
     }
 
@@ -442,7 +467,7 @@ const googleMapSettingsSchema =
 const openstreetMapSettingsSchema =
     {
         "schema":{
-            "title":"Google Map Configuration",
+            "title":"Openstreet Map Configuration",
             "type":"object",
             "properties":{
             },
@@ -574,3 +599,28 @@ const commonMapSettingsSchema =
         ]
 };
 
+const routeMapSettingsSchema =
+    {
+        "schema":{
+            "title":"Route Map Configuration",
+            "type":"object",
+            "properties":{
+                "strokeWeight": {
+                    "title": "Stroke weight",
+                    "type": "number",
+                    "default": 2
+                },
+                "strokeOpacity": {
+                    "title": "Stroke opacity",
+                    "type": "number",
+                    "default": 1.0
+                }
+            },
+            "required":[
+            ]
+        },
+        "form":[
+            "strokeWeight",
+            "strokeOpacity"
+        ]
+    };

ui/src/app/widget/lib/openstreet-map.js

@@ -42,6 +42,12 @@ export default class TbOpenStreetMap {
         return angular.isDefined(this.map);
     }
 
+    updateMarkerLabel(marker, settings) {
+        marker.unbindTooltip();
+        marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
+            { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
+    }
+
     updateMarkerColor(marker, color) {
         var pinColor = color.substr(1);
         var icon = L.icon({
@@ -78,8 +84,9 @@ export default class TbOpenStreetMap {
             marker.setIcon(icon);
             if (settings.showLabel) {
                 marker.unbindTooltip();
-                marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.label+'</b></div>',
+                marker.tooltipOffset = [0, -height + 10];
-                    { className: 'tb-marker-label', permanent: true, direction: 'top', offset: [0, -height + 10] });
+                marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
+                    { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
             }
         }
         testImage.src = image;
@@ -101,8 +108,9 @@ export default class TbOpenStreetMap {
         var marker = L.marker(location, {icon: icon}).addTo(this.map);
 
         if (settings.showLabel) {
-            marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.label+'</b></div>',
+            marker.tooltipOffset = [0, -height + 10];
-                { className: 'tb-marker-label', permanent: true, direction: 'top', offset: [0, -height + 10] });
+            marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
+                { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
         }
 
         if (settings.useMarkerImage) {