TB-36: Map widgets: Marker color and icon based on attributes/telemetry values (#40)

ui/package.json

@@ -53,6 +53,7 @@
     "js-beautify": "^1.6.4",
     "json-schema-defaults": "^0.2.0",
     "justgage": "^1.2.2",
+    "leaflet": "^1.0.3",
     "material-ui": "^0.16.1",
     "material-ui-number-input": "^5.0.16",
     "md-color-picker": "^0.2.6",

ui/src/app/api/widget.service.js

@@ -22,6 +22,7 @@ import thinsboardLedLight from '../components/led-light.directive';
 import TbAnalogueLinearGauge from '../widget/lib/analogue-linear-gauge';
 import TbAnalogueRadialGauge from '../widget/lib/analogue-radial-gauge';
 import TbDigitalGauge from '../widget/lib/digital-gauge';
+import TbMapWidget from '../widget/lib/map-widget';
 
 import 'oclazyload';
 import cssjs from '../../vendor/css.js/css';
@@ -44,6 +45,7 @@ function WidgetService($rootScope, $http, $q, $filter, $ocLazyLoad, $window, typ
     $window.TbAnalogueLinearGauge = TbAnalogueLinearGauge;
     $window.TbAnalogueRadialGauge = TbAnalogueRadialGauge;
     $window.TbDigitalGauge = TbDigitalGauge;
+    $window.TbMapWidget = TbMapWidget;
 
     var cssParser = new cssjs();
     cssParser.testMode = false;

ui/src/app/components/react/json-form-image.jsx

@@ -58,7 +58,7 @@ class ThingsboardImage extends React.Component {
         if (event) {
             event.stopPropagation();
         }
-        this.onValueChanged(null);
+        this.onValueChanged("");
     }
 
     render() {

ui/src/app/components/react/json-form-number.jsx

@@ -64,8 +64,11 @@ class ThingsboardNumber extends React.Component {
             fieldClass += " tb-focused";
         }
         var value = this.state.lastSuccessfulValue;
+        if (typeof value !== 'undefined') {
             value = Number(value);
-
+        } else {
+            value = null;
+        }
         return (
             <NumberInput
                 className={fieldClass}

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

@@ -0,0 +1,304 @@
+/*
+ * Copyright © 2016-2017 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import $ from 'jquery';
+
+var gmGlobals = {
+    loadingGmId: null,
+    gmApiKeys: {}
+}
+
+export default class TbGoogleMap {
+    constructor(containerElement, defaultZoomLevel, dontFitMapBounds, minZoomLevel, gmApiKey) {
+
+        var tbMap = this;
+        this.defaultZoomLevel = defaultZoomLevel;
+        this.dontFitMapBounds = dontFitMapBounds;
+        this.minZoomLevel = minZoomLevel;
+        this.tooltips = [];
+
+        function clearGlobalId() {
+            if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) {
+                gmGlobals.loadingGmId = null;
+            }
+        }
+
+        function displayError(message) {
+            $(containerElement).html( // eslint-disable-line angular/angularelement
+                "<div class='error'>"+ message + "</div>"
+            );
+        }
+
+        function initGoogleMap() {
+
+            tbMap.map = new google.maps.Map(containerElement, { // eslint-disable-line no-undef
+                scrollwheel: false,
+                zoom: tbMap.defaultZoomLevel || 8
+            });
+
+        }
+
+        this.mapId = '' + Math.random().toString(36).substr(2, 9);
+        this.apiKey = gmApiKey || '';
+
+        window.gm_authFailure = function() { // eslint-disable-line no-undef, angular/window-service
+            if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) {
+                gmGlobals.loadingGmId = null;
+                gmGlobals.gmApiKeys[tbMap.apiKey].error = 'Unable to authentificate for Google Map API.</br>Please check your API key.';
+                displayError(gmGlobals.gmApiKeys[tbMap.apiKey].error);
+            }
+        };
+
+        this.initMapFunctionName = 'initGoogleMap_' + this.mapId;
+
+        window[this.initMapFunctionName] = function() { // eslint-disable-line no-undef, angular/window-service
+            lazyLoad.load({ type: 'js', path: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerwithlabel/src/markerwithlabel.js' }).then( // eslint-disable-line no-undef
+                function success() {
+                    gmGlobals.gmApiKeys[tbMap.apiKey].loaded = true;
+                    initGoogleMap();
+                    for (var p in gmGlobals.gmApiKeys[tbMap.apiKey].pendingInits) {
+                        var pendingInit = gmGlobals.gmApiKeys[tbMap.apiKey].pendingInits[p];
+                        pendingInit();
+                    }
+                    gmGlobals.gmApiKeys[tbMap.apiKey].pendingInits = [];
+                },
+                function fail(e) {
+                    clearGlobalId();
+                    gmGlobals.gmApiKeys[tbMap.apiKey].error = 'Google map api load failed!</br>'+e;
+                    displayError(gmGlobals.gmApiKeys[tbMap.apiKey].error);
+                }
+            );
+
+        };
+
+        if (this.apiKey && this.apiKey.length > 0) {
+            if (gmGlobals.gmApiKeys[this.apiKey]) {
+                if (gmGlobals.gmApiKeys[this.apiKey].error) {
+                    displayError(gmGlobals.gmApiKeys[this.apiKey].error);
+                } else if (gmGlobals.gmApiKeys[this.apiKey].loaded) {
+                    initGoogleMap();
+                } else {
+                    gmGlobals.gmApiKeys[this.apiKey].pendingInits.push(initGoogleMap);
+                }
+            } else {
+                gmGlobals.gmApiKeys[this.apiKey] = {
+                    loaded: false,
+                    pendingInits: []
+                };
+                var googleMapScriptRes = 'https://maps.googleapis.com/maps/api/js?key='+this.apiKey+'&callback='+this.initMapFunctionName;
+
+                gmGlobals.loadingGmId = this.mapId;
+                lazyLoad.load({ type: 'js', path: googleMapScriptRes }).then( // eslint-disable-line no-undef
+                    function success() {
+                        setTimeout(clearGlobalId, 2000); // eslint-disable-line no-undef, angular/timeout-service
+                    },
+                    function fail(e) {
+                        clearGlobalId();
+                        gmGlobals.gmApiKeys[tbMap.apiKey].error = 'Google map api load failed!</br>'+e;
+                        displayError(gmGlobals.gmApiKeys[tbMap.apiKey].error);
+                    }
+                );
+            }
+        } else {
+            displayError('No Google Map Api Key provided!');
+        }
+    }
+
+    inited() {
+        return angular.isDefined(this.map);
+    }
+
+    /* eslint-disable no-undef */
+    updateMarkerColor(marker, color) {
+        var pinColor = color.substr(1);
+        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
+            new google.maps.Size(21, 34),
+            new google.maps.Point(0,0),
+            new google.maps.Point(10, 34));
+        marker.setIcon(pinImage);
+    }
+    /* eslint-enable no-undef */
+
+    /* eslint-disable no-undef */
+    updateMarkerImage(marker, settings, image, maxSize) {
+        var testImage = new Image();
+        testImage.onload = function() {
+            var width;
+            var height;
+            var aspect = testImage.width / testImage.height;
+            if (aspect > 1) {
+                width = maxSize;
+                height = maxSize / aspect;
+            } else {
+                width = maxSize * aspect;
+                height = maxSize;
+            }
+            var pinImage = {
+                url: image,
+                scaledSize : new google.maps.Size(width, height)
+            }
+            marker.setIcon(pinImage);
+            if (settings.showLabel) {
+                marker.set('labelAnchor', new google.maps.Point(50, height + 20));
+            }
+        }
+        testImage.src = image;
+    }
+    /* eslint-enable no-undef */
+
+    /* eslint-disable no-undef */
+    createMarker(location, settings) {
+        var height = 34;
+        var pinColor = settings.color.substr(1);
+        var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
+            new google.maps.Size(21, 34),
+            new google.maps.Point(0,0),
+            new google.maps.Point(10, 34));
+        var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
+            new google.maps.Size(40, 37),
+            new google.maps.Point(0, 0),
+            new google.maps.Point(12, 35));
+        var marker;
+        if (settings.showLabel) {
+            marker = new MarkerWithLabel({
+                position: location,
+                map: this.map,
+                icon: pinImage,
+                shadow: pinShadow,
+                labelContent: '<b>'+settings.label+'</b>',
+                labelClass: "tb-labels",
+                labelAnchor: new google.maps.Point(50, height + 20)
+            });
+        } else {
+            marker = new google.maps.Marker({
+                position: location,
+                map: this.map,
+                icon: pinImage,
+                shadow: pinShadow
+            });
+        }
+
+        if (settings.useMarkerImage) {
+            this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
+        }
+
+        this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo);
+
+        return marker;
+    }
+    /* eslint-enable no-undef */
+
+    /* eslint-disable no-undef */
+    createTooltip(marker, pattern, replaceInfo) {
+        var popup = new google.maps.InfoWindow({
+            content: ''
+        });
+        marker.addListener('click', function() {
+            popup.open(this.map, marker);
+        });
+        this.tooltips.push( {
+            popup: popup,
+            pattern: pattern,
+            replaceInfo: replaceInfo
+        });
+    }
+    /* eslint-enable no-undef */
+
+    /* eslint-disable no-undef */
+    updatePolylineColor(polyline, settings, color) {
+        var options = {
+            path: polyline.getPath(),
+            strokeColor: color,
+            strokeOpacity: settings.strokeOpacity,
+            strokeWeight: settings.strokeWeight,
+            map: this.map
+        };
+        polyline.setOptions(options);
+    }
+    /* eslint-enable no-undef */
+
+    /* eslint-disable no-undef */
+    createPolyline(locations, settings) {
+        var polyline = new google.maps.Polyline({
+            path: locations,
+            strokeColor: settings.color,
+            strokeOpacity: settings.strokeOpacity,
+            strokeWeight: settings.strokeWeight,
+            map: this.map
+        });
+
+        return polyline;
+    }
+    /* eslint-enable no-undef */
+
+    fitBounds(bounds) {
+        var tbMap = this;
+        google.maps.event.addListenerOnce(this.map, 'bounds_changed', function() { // eslint-disable-line no-undef
+            var newZoomLevel = tbMap.map.getZoom();
+            if (tbMap.dontFitMapBounds && tbMap.defaultZoomLevel) {
+                newZoomLevel = tbMap.defaultZoomLevel;
+            }
+            tbMap.map.setZoom(newZoomLevel);
+
+            if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
+                tbMap.map.setZoom(tbMap.minZoomLevel);
+            }
+        });
+        this.map.fitBounds(bounds);
+    }
+
+    createLatLng(lat, lng) {
+        return new google.maps.LatLng(lat, lng); // eslint-disable-line no-undef
+    }
+
+    getMarkerPosition(marker) {
+        return marker.getPosition();
+    }
+
+    setMarkerPosition(marker, latLng) {
+        marker.setPosition(latLng);
+    }
+
+    getPolylineLatLngs(polyline) {
+        return polyline.getPath().getArray();
+    }
+
+    setPolylineLatLngs(polyline, latLngs) {
+        polyline.setPath(latLngs);
+    }
+
+    createBounds() {
+        return new google.maps.LatLngBounds(); // eslint-disable-line no-undef
+    }
+
+    extendBounds(bounds, polyline) {
+        if (polyline && polyline.getPath()) {
+            var locations = polyline.getPath();
+            for (var i = 0; i < locations.getLength(); i++) {
+                bounds.extend(locations.getAt(i));
+            }
+        }
+    }
+
+    invalidateSize() {
+        google.maps.event.trigger(this.map, "resize"); // eslint-disable-line no-undef
+    }
+
+    getTooltips() {
+        return this.tooltips;
+    }
+
+}

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

@@ -0,0 +1,458 @@
+/*
+ * Copyright © 2016-2017 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import tinycolor from 'tinycolor2';
+
+import TbGoogleMap from './google-map';
+import TbOpenStreetMap from './openstreet-map';
+
+export default class TbMapWidget {
+    constructor(mapProvider, drawRoutes, containerElement, settings, datasources) {
+
+        var tbMap = this;
+
+        this.drawRoutes = drawRoutes;
+        this.markers = [];
+        if (this.drawRoutes) {
+            this.polylines = [];
+        }
+        this.locationsSettings = [];
+        this.varsRegex = /\$\{([^\}]*)\}/g;
+
+        if (settings.defaultZoomLevel) {
+            if (settings.defaultZoomLevel > 0 && settings.defaultZoomLevel < 21) {
+                this.defaultZoomLevel = Math.floor(settings.defaultZoomLevel);
+            }
+        }
+
+        this.dontFitMapBounds = settings.fitMapBounds === false;
+
+        function procesTooltipPattern(pattern) {
+            var match = tbMap.varsRegex.exec(pattern);
+            var replaceInfo = {};
+            replaceInfo.variables = [];
+            while (match !== null) {
+                var variableInfo = {};
+                variableInfo.dataKeyIndex = -1;
+                var variable = match[0];
+                var label = match[1];
+                var valDec = 2;
+                var splitVals = label.split(':');
+                if (splitVals.length > 1) {
+                    label = splitVals[0];
+                    valDec = parseFloat(splitVals[1]);
+                }
+                variableInfo.variable = variable;
+                variableInfo.valDec = valDec;
+
+                if (label.startsWith('#')) {
+                    var keyIndexStr = label.substring(1);
+                    var n = Math.floor(Number(keyIndexStr));
+                    if (String(n) === keyIndexStr && n >= 0) {
+                        variableInfo.dataKeyIndex = n;
+                    }
+                }
+                if (variableInfo.dataKeyIndex === -1) {
+                    var offset = 0;
+                    for (var i=0;i<datasources.length;i++) {
+                        var datasource = datasources[i];
+                        for (var k = 0; k < datasource.dataKeys.length; k++) {
+                            var dataKey = datasource.dataKeys[k];
+                            if (dataKey.label === label) {
+                                variableInfo.dataKeyIndex = offset + k;
+                                break;
+                            }
+                        }
+                        offset += datasource.dataKeys.length;
+                    }
+                }
+                replaceInfo.variables.push(variableInfo);
+                match = tbMap.varsRegex.exec(pattern);
+            }
+            return replaceInfo;
+        }
+
+        var configuredLocationsSettings = drawRoutes ? settings.routesSettings : settings.markersSettings;
+        if (!configuredLocationsSettings) {
+            configuredLocationsSettings = [];
+        }
+
+        for (var i=0;i<configuredLocationsSettings.length;i++) {
+            this.locationsSettings[i] = {
+                latKeyName: "lat",
+                lngKeyName: "lng",
+                showLabel: true,
+                label: "",
+                color: "#FE7569",
+                useColorFunction: false,
+                colorFunction: null,
+                markerImage: null,
+                markerImageSize: 34,
+                useMarkerImage: false,
+                useMarkerImageFunction: false,
+                markerImageFunction: null,
+                markerImages: [],
+                tooltipPattern: "<b>Latitude:</b> ${lat:7}<br/><b>Longitude:</b> ${lng:7}"
+            };
+
+            if (drawRoutes) {
+                this.locationsSettings[i].strokeWeight = 2;
+                this.locationsSettings[i].strokeOpacity = 1.0;
+            }
+
+            if (configuredLocationsSettings[i]) {
+                this.locationsSettings[i].latKeyName = configuredLocationsSettings[i].latKeyName || this.locationsSettings[i].latKeyName;
+                this.locationsSettings[i].lngKeyName = configuredLocationsSettings[i].lngKeyName || this.locationsSettings[i].lngKeyName;
+
+                this.locationsSettings[i].tooltipPattern = configuredLocationsSettings[i].tooltipPattern || "<b>Latitude:</b> ${"+this.locationsSettings[i].latKeyName+":7}<br/><b>Longitude:</b> ${"+this.locationsSettings[i].lngKeyName+":7}";
+
+                this.locationsSettings[i].tooltipReplaceInfo = procesTooltipPattern(this.locationsSettings[i].tooltipPattern);
+
+                this.locationsSettings[i].showLabel = configuredLocationsSettings[i].showLabel !== false;
+                this.locationsSettings[i].label = configuredLocationsSettings[i].label || 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;
+                if (angular.isDefined(configuredLocationsSettings[i].colorFunction) && configuredLocationsSettings[i].colorFunction.length > 0) {
+                    try {
+                        this.locationsSettings[i].colorFunction = new Function('data', configuredLocationsSettings[i].colorFunction);
+                    } catch (e) {
+                        this.locationsSettings[i].colorFunction = null;
+                    }
+                }
+
+                this.locationsSettings[i].useMarkerImageFunction = configuredLocationsSettings[i].useMarkerImageFunction === true;
+                if (angular.isDefined(configuredLocationsSettings[i].markerImageFunction) && configuredLocationsSettings[i].markerImageFunction.length > 0) {
+                    try {
+                        this.locationsSettings[i].markerImageFunction = new Function('data, images', configuredLocationsSettings[i].markerImageFunction);
+                    } catch (e) {
+                        this.locationsSettings[i].markerImageFunction = null;
+                    }
+                }
+
+                this.locationsSettings[i].markerImages = configuredLocationsSettings[i].markerImages || [];
+
+                if (!this.locationsSettings[i].useMarkerImageFunction &&
+                    angular.isDefined(configuredLocationsSettings[i].markerImage) &&
+                    configuredLocationsSettings[i].markerImage.length > 0) {
+                    this.locationsSettings[i].markerImage = configuredLocationsSettings[i].markerImage;
+                    this.locationsSettings[i].useMarkerImage = true;
+                    this.locationsSettings[i].markerImageSize = configuredLocationsSettings[i].markerImageSize || 34;
+                }
+
+                if (drawRoutes) {
+                    this.locationsSettings[i].strokeWeight = configuredLocationsSettings[i].strokeWeight || this.locationsSettings[i].strokeWeight;
+                    this.locationsSettings[i].strokeOpacity = angular.isDefined(configuredLocationsSettings[i].strokeOpacity) ? configuredLocationsSettings[i].strokeOpacity : this.locationsSettings[i].strokeOpacity;
+                }
+            }
+        }
+
+        var minZoomLevel = this.drawRoutes ? 18 : 15;
+        if (mapProvider === 'google-map') {
+            this.map = new TbGoogleMap(containerElement, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey);
+        } else if (mapProvider === 'openstreet-map') {
+            this.map = new TbOpenStreetMap(containerElement, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel);
+        }
+
+    }
+
+    redraw(data, sizeChanged) {
+
+        var tbMap = this;
+
+        function isNumber(n) {
+            return !isNaN(parseFloat(n)) && isFinite(n);
+        }
+
+        function padValue(val, dec, int) {
+            var i = 0;
+            var s, strVal, n;
+
+            val = parseFloat(val);
+            n = (val < 0);
+            val = Math.abs(val);
+
+            if (dec > 0) {
+                strVal = val.toFixed(dec).toString().split('.');
+                s = int - strVal[0].length;
+
+                for (; i < s; ++i) {
+                    strVal[0] = '0' + strVal[0];
+                }
+
+                strVal = (n ? '-' : '') + strVal[0] + '.' + strVal[1];
+            }
+
+            else {
+                strVal = Math.round(val).toString();
+                s = int - strVal.length;
+
+                for (; i < s; ++i) {
+                    strVal = '0' + strVal;
+                }
+
+                strVal = (n ? '-' : '') + strVal;
+            }
+
+            return strVal;
+        }
+
+        function arraysEqual(a, b) {
+            if (a === b) return true;
+            if (a === null || b === null) return false;
+            if (a.length != b.length) return false;
+
+            for (var i = 0; i < a.length; ++i) {
+                if (!a[i].equals(b[i])) return false;
+            }
+            return true;
+        }
+
+        function calculateLocationColor(settings, dataMap) {
+            if (settings.useColorFunction && settings.colorFunction) {
+                var color = '#FE7569';
+                try {
+                    color = settings.colorFunction(dataMap);
+                } catch (e) {
+                    color = '#FE7569';
+                }
+                return tinycolor(color).toHexString();
+            } else {
+                return settings.color;
+            }
+        }
+
+        function updateLocationColor(location, dataMap) {
+            var color = calculateLocationColor(location.settings, dataMap);
+            if (!location.settings.calculatedColor || location.settings.calculatedColor !== color) {
+                if (!location.settings.useMarkerImage && !location.settings.useMarkerImageFunction) {
+                    tbMap.map.updateMarkerColor(location.marker, color);
+                }
+                if (location.polyline) {
+                    tbMap.map.updatePolylineColor(location.polyline, location.settings, color);
+                }
+                location.settings.calculatedColor = color;
+            }
+        }
+
+        function calculateLocationMarkerImage(settings, dataMap) {
+            if (settings.useMarkerImageFunction && settings.markerImageFunction) {
+                var image = null;
+                try {
+                    image = settings.markerImageFunction(dataMap, settings.markerImages);
+                } catch (e) {
+                    image = null;
+                }
+                return image;
+            } else {
+                return null;
+            }
+        }
+
+        function updateLocationMarkerImage(location, dataMap) {
+            var image = calculateLocationMarkerImage(location.settings, dataMap);
+            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;
+            }
+        }
+
+        function updateLocationStyle(location, dataMap) {
+            updateLocationColor(location, dataMap);
+            updateLocationMarkerImage(location, dataMap);
+        }
+
+        function updateLocation(location, data, dataMap) {
+            var locationChanged = false;
+            if (location.latIndex > -1 && location.lngIndex > -1) {
+                var latData = data[location.latIndex].data;
+                var lngData = data[location.lngIndex].data;
+                var lat, lng, latLng;
+                if (latData.length > 0 && lngData.length > 0) {
+                    if (tbMap.drawRoutes) {
+                        // Create or update route
+                        var latLngs = [];
+                        for (var i = 0; i < latData.length; i++) {
+                            lat = latData[i][1];
+                            lng = lngData[i][1];
+                            latLng = tbMap.map.createLatLng(lat, lng);
+                            if (i == 0 || !latLngs[latLngs.length-1].equals(latLng)) {
+                                latLngs.push(latLng);
+                            }
+                        }
+                        if (latLngs.length > 0) {
+                            var markerLocation = latLngs[latLngs.length-1];
+                            if (!location.marker) {
+                                location.marker = tbMap.map.createMarker(markerLocation, location.settings);
+                            } else {
+                                tbMap.map.setMarkerPosition(location.marker, markerLocation);
+                            }
+                        }
+                        if (!location.polyline) {
+                            location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
+                            tbMap.polylines.push(location.polyline);
+                            locationChanged = true;
+                        } else {
+                            var prevPath = tbMap.map.getPolylineLatLngs(location.polyline);
+                            if (!prevPath || !arraysEqual(prevPath, latLngs)) {
+                                tbMap.map.setPolylineLatLngs(location.polyline, latLngs);
+                                locationChanged = true;
+                            }
+                        }
+                    } else {
+                        // Create or update marker
+                        lat = latData[latData.length-1][1];
+                        lng = lngData[lngData.length-1][1];
+                        latLng = tbMap.map.createLatLng(lat, lng);
+                        if (!location.marker) {
+                            location.marker = tbMap.map.createMarker(latLng, location.settings);
+                            tbMap.markers.push(location.marker);
+                            locationChanged = true;
+                        } else {
+                            var prevPosition = tbMap.map.getMarkerPosition(location.marker);
+                            if (!prevPosition.equals(latLng)) {
+                                tbMap.map.setMarkerPosition(location.marker, latLng);
+                                locationChanged = true;
+                            }
+                        }
+                    }
+                    updateLocationStyle(location, dataMap);
+                }
+            }
+            return locationChanged;
+        }
+
+        function toLabelValueMap(data) {
+            var dataMap = {};
+            for (var i = 0; i < data.length; i++) {
+                var dataKey = data[i].dataKey;
+                var label = dataKey.label;
+                var keyData = data[i].data;
+                var val = null;
+                if (keyData.length > 0) {
+                    val = keyData[keyData.length-1][1];
+                }
+                dataMap[label] = val;
+            }
+            return dataMap;
+        }
+
+        function loadLocations(data) {
+            var bounds = tbMap.map.createBounds();
+            tbMap.locations = [];
+            var dataMap = toLabelValueMap(data);
+            for (var l in tbMap.locationsSettings) {
+                var locationSettings = tbMap.locationsSettings[l];
+                var latIndex = -1;
+                var lngIndex = -1;
+                for (var i = 0; i < data.length; i++) {
+                    var dataKey = data[i].dataKey;
+                    if (dataKey.label === locationSettings.latKeyName) {
+                        latIndex = i;
+                    } else if (dataKey.label === locationSettings.lngKeyName) {
+                        lngIndex = i;
+                    }
+                }
+                if (latIndex > -1 && lngIndex > -1) {
+                    var location = {
+                        latIndex: latIndex,
+                        lngIndex: lngIndex,
+                        settings: locationSettings
+                    };
+                    tbMap.locations.push(location);
+                    updateLocation(location, data, dataMap);
+                    if (location.polyline) {
+                        tbMap.map.extendBounds(bounds, location.polyline);
+                    } else if (location.marker) {
+                        bounds.extend(tbMap.map.getMarkerPosition(location.marker));
+                    }
+                }
+            }
+            tbMap.map.fitBounds(bounds);
+        }
+
+        function updateLocations(data) {
+            var locationsChanged = false;
+            var bounds = tbMap.map.createBounds();
+            var dataMap = toLabelValueMap(data);
+            for (var p in tbMap.locations) {
+                var location = tbMap.locations[p];
+                locationsChanged |= updateLocation(location, data, dataMap);
+                if (location.polyline) {
+                    tbMap.map.extendBounds(bounds, location.polyline);
+                } else if (location.marker) {
+                    bounds.extend(tbMap.map.getMarkerPosition(location.marker));
+                }
+            }
+            if (!tbMap.dontFitMapBounds && locationsChanged) {
+                tbMap.map.fitBounds(bounds);
+            }
+        }
+
+        if (this.map && this.map.inited()) {
+            if (data) {
+                if (!this.locations) {
+                    loadLocations(data);
+                } else {
+                    updateLocations(data);
+                }
+            }
+            if (sizeChanged) {
+                this.map.invalidateSize();
+                if (!this.dontFitMapBounds) {
+                    var bounds = this.map.createBounds();
+                    for (var m in this.markers) {
+                        bounds.extend(this.map.getMarkerPosition(this.markers[m]));
+                    }
+                    if (this.polylines) {
+                        for (var p in this.polylines) {
+                            this.map.extendBounds(bounds, this.polylines[p]);
+                        }
+                    }
+                    this.map.fitBounds(bounds);
+                }
+            }
+
+            var tooltips = this.map.getTooltips();
+
+            for (var t in tooltips) {
+                var tooltip = tooltips[t];
+                var text = tooltip.pattern;
+                var replaceInfo = tooltip.replaceInfo;
+                for (var v in replaceInfo.variables) {
+                    var variableInfo = replaceInfo.variables[v];
+                    var txtVal = '';
+                    if (variableInfo.dataKeyIndex > -1) {
+                        var varData = data[variableInfo.dataKeyIndex].data;
+                        if (varData.length > 0) {
+                            var val = varData[varData.length-1][1];
+                            if (isNumber(val)) {
+                                txtVal = padValue(val, variableInfo.valDec, 0);
+                            } else {
+                                txtVal = val;
+                            }
+                        }
+                    }
+                    text = text.split(variableInfo.variable).join(txtVal);
+                }
+                tooltip.popup.setContent(text);
+            }
+
+        }
+
+    }
+
+}

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

@@ -0,0 +1,198 @@
+/*
+ * Copyright © 2016-2017 The Thingsboard Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet/dist/leaflet';
+
+export default class TbOpenStreetMap {
+
+    constructor(containerElement, defaultZoomLevel, dontFitMapBounds, minZoomLevel) {
+
+        this.defaultZoomLevel = defaultZoomLevel;
+        this.dontFitMapBounds = dontFitMapBounds;
+        this.minZoomLevel = minZoomLevel;
+        this.tooltips = [];
+
+        this.map = L.map(containerElement).setView([0, 0], this.defaultZoomLevel || 8);
+
+        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(this.map);
+
+    }
+
+    inited() {
+        return angular.isDefined(this.map);
+    }
+
+    updateMarkerColor(marker, color) {
+        var pinColor = color.substr(1);
+        var icon = L.icon({
+            iconUrl: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
+            iconSize: [21, 34],
+            iconAnchor: [10, 34],
+            popupAnchor: [0, -34],
+            shadowUrl: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow',
+            shadowSize: [40, 37],
+            shadowAnchor: [12, 35]
+        });
+        marker.setIcon(icon);
+    }
+
+    updateMarkerImage(marker, settings, image, maxSize) {
+        var testImage = new Image(); // eslint-disable-line no-undef
+        testImage.onload = function() {
+            var width;
+            var height;
+            var aspect = testImage.width / testImage.height;
+            if (aspect > 1) {
+                width = maxSize;
+                height = maxSize / aspect;
+            } else {
+                width = maxSize * aspect;
+                height = maxSize;
+            }
+            var icon = L.icon({
+                iconUrl: image,
+                iconSize: [width, height],
+                iconAnchor: [width/2, height],
+                popupAnchor: [0, -height]
+            });
+            marker.setIcon(icon);
+            if (settings.showLabel) {
+                marker.unbindTooltip();
+                marker.bindTooltip('<b>' + settings.label + '</b>',
+                    { className: 'tb-marker-label', permanent: true, direction: 'top', offset: [0, -height + 10] });
+            }
+        }
+        testImage.src = image;
+    }
+
+    createMarker(location, settings) {
+        var height = 34;
+        var pinColor = settings.color.substr(1);
+        var icon = L.icon({
+            iconUrl: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
+            iconSize: [21, 34],
+            iconAnchor: [10, 34],
+            popupAnchor: [0, -34],
+            shadowUrl: 'http://chart.apis.google.com/chart?chst=d_map_pin_shadow',
+            shadowSize: [40, 37],
+            shadowAnchor: [12, 35]
+        });
+
+        var marker = L.marker(location, {icon: icon}).addTo(this.map);
+
+        if (settings.showLabel) {
+            marker.bindTooltip('<b>' + settings.label + '</b>',
+                { className: 'tb-marker-label', permanent: true, direction: 'top', offset: [0, -height + 10] });
+        }
+
+        if (settings.useMarkerImage) {
+            this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
+        }
+
+        this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo);
+
+        return marker;
+    }
+
+    createTooltip(marker, pattern, replaceInfo) {
+        var popup = L.popup();
+        popup.setContent('');
+        marker.bindPopup(popup, {autoClose: false, closeOnClick: false});
+        this.tooltips.push( {
+            popup: popup,
+            pattern: pattern,
+            replaceInfo: replaceInfo
+        });
+    }
+
+    updatePolylineColor(polyline, settings, color) {
+        var style = {
+            color: color,
+            opacity: settings.strokeOpacity,
+            weight: settings.strokeWeight
+        };
+        polyline.setStyle(style);
+    }
+
+    createPolyline(locations, settings) {
+        var polyline = L.polyline(locations,
+            {
+                color: settings.color,
+                opacity: settings.strokeOpacity,
+                weight: settings.strokeWeight
+            }
+        ).addTo(this.map);
+        return polyline;
+    }
+
+    fitBounds(bounds) {
+        var tbMap = this;
+        this.map.once('zoomend', function() {
+            var newZoomLevel = tbMap.map.getZoom();
+            if (tbMap.dontFitMapBounds && tbMap.defaultZoomLevel) {
+                newZoomLevel = tbMap.defaultZoomLevel;
+            }
+            tbMap.map.setZoom(newZoomLevel, {animate: false});
+
+            if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
+                tbMap.map.setZoom(tbMap.minZoomLevel, {animate: false});
+            }
+        });
+        this.map.fitBounds(bounds, {padding: [50, 50], animate: false});
+    }
+
+    createLatLng(lat, lng) {
+        return L.latLng(lat, lng);
+    }
+
+    getMarkerPosition(marker) {
+        return marker.getLatLng();
+    }
+
+    setMarkerPosition(marker, latLng) {
+        marker.setLatLng(latLng);
+    }
+
+    getPolylineLatLngs(polyline) {
+        return polyline.getLatLngs();
+    }
+
+    setPolylineLatLngs(polyline, latLngs) {
+        polyline.setLatLngs(latLngs);
+    }
+
+    createBounds() {
+        return L.latLngBounds();
+    }
+
+    extendBounds(bounds, polyline) {
+        if (polyline && polyline.getLatLngs()) {
+            bounds.extend(polyline.getBounds());
+        }
+    }
+
+    invalidateSize() {
+        this.map.invalidateSize(true);
+    }
+
+    getTooltips() {
+        return this.tooltips;
+    }
+
+}