UI: Add Providers for Leaflet Map.

ui/package.json

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

ui/src/app/dashboard/dashboard-toolbar.tpl.html

@@ -18,7 +18,7 @@
 
 <md-fab-toolbar md-open="vm.toolbarOpened"
                 md-direction="left"
-                ng-class="{'is-fullscreen': vm.forceFullscreen, 'md-whiteframe-z1': vm.forceFullscreen}">
+                ng-class="{'is-fullscreen': vm.forceFullscreen, 'md-whiteframe-z1': vm.forceFullscreen && vm.toolbarOpened }">
     <md-fab-trigger class="align-with-text">
         <md-button aria-label="menu" class="md-fab md-primary" ng-click="vm.onTriggerClick()">
             <md-tooltip ng-show="!vm.toolbarOpened" md-direction="bottom">

ui/src/app/dashboard/dashboard.controller.js

@@ -68,7 +68,7 @@ export default function DashboardController(types, utils, dashboardUtils, widget
     Object.defineProperty(vm, 'toolbarOpened', {
         get: function() {
             return !vm.widgetEditMode &&
-                (toolbarAlwaysOpen() || $scope.forceFullscreen || vm.isToolbarOpened || vm.isEdit || vm.showRightLayoutSwitch()); },
+                (toolbarAlwaysOpen() || vm.isToolbarOpened || vm.isEdit || vm.showRightLayoutSwitch()); },
         set: function() { }
     });
 
@@ -114,7 +114,7 @@ export default function DashboardController(types, utils, dashboardUtils, widget
     }
 
     vm.showCloseToolbar = function() {
-        return !vm.toolbarAlwaysOpen() && !$scope.forceFullscreen && !vm.isEdit && !vm.showRightLayoutSwitch();
+        return !vm.toolbarAlwaysOpen() && !vm.isEdit && !vm.showRightLayoutSwitch();
     }
 
     vm.toolbarAlwaysOpen = toolbarAlwaysOpen;

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

@@ -162,11 +162,13 @@ export default class TbGoogleMap {
 
     /* eslint-disable no-undef */
     updateMarkerImage(marker, settings, image, maxSize) {
-        var testImage = new Image();
+        var testImage = document.createElement('img'); // eslint-disable-line
+        testImage.style.visibility = 'hidden';
         testImage.onload = function() {
             var width;
             var height;
             var aspect = testImage.width / testImage.height;
+            document.body.removeChild(testImage); //eslint-disable-line
             if (aspect > 1) {
                 width = maxSize;
                 height = maxSize / aspect;
@@ -183,6 +185,7 @@ export default class TbGoogleMap {
                 marker.set('labelAnchor', new google.maps.Point(100, height + 20));
             }
         }
+        document.body.appendChild(testImage); //eslint-disable-line
         testImage.src = image;
     }
     /* eslint-enable no-undef */

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

@@ -15,7 +15,7 @@
  */
 
 import 'leaflet/dist/leaflet.css';
-import L from 'leaflet/dist/leaflet';
+import * as L from 'leaflet';
 
 const maxZoom = 4;
 

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

@@ -77,7 +77,7 @@ export default class TbMapWidgetV2 {
         if (mapProvider === 'google-map') {
             this.map = new TbGoogleMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
         } else if (mapProvider === 'openstreet-map') {
-            this.map = new TbOpenStreetMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel);
+            this.map = new TbOpenStreetMap($element, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, minZoomLevel, settings.mapProvider);
         } else if (mapProvider === 'image-map') {
             this.map = new TbImageMap(this.ctx, $element, initCallback,
                 settings.mapImageUrl,
@@ -539,11 +539,51 @@ const openstreetMapSettingsSchema =
             "title":"Openstreet Map Configuration",
             "type":"object",
             "properties":{
+                "mapProvider":{
+                    "title":"Map provider",
+                    "type":"string",
+                    "default":"OpenStreetMap.Mapnik"
+                }
             },
             "required":[
             ]
         },
         "form":[
+            {
+                "key":"mapProvider",
+                "type":"rc-select",
+                "multiple":false,
+                "items":[
+                    {
+                        "value":"OpenStreetMap.Mapnik",
+                        "label":"OpenStreetMap.Mapnik (Default)"
+                    },
+                    {
+                        "value":"OpenStreetMap.BlackAndWhite",
+                        "label":"OpenStreetMap.BlackAndWhite"
+                    },
+                    {
+                        "value":"OpenStreetMap.HOT",
+                        "label":"OpenStreetMap.HOT"
+                    },
+                    {
+                        "value":"Esri.WorldStreetMap",
+                        "label":"Esri.WorldStreetMap"
+                    },
+                    {
+                        "value":"Esri.WorldTopoMap",
+                        "label":"Esri.WorldTopoMap"
+                    },
+                    {
+                        "value":"CartoDB.Positron",
+                        "label":"CartoDB.Positron"
+                    },
+                    {
+                        "value":"CartoDB.DarkMatter",
+                        "label":"CartoDB.DarkMatter"
+                    }
+                ]
+            }
         ]
     };
 

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

@@ -15,22 +15,27 @@
  */
 
 import 'leaflet/dist/leaflet.css';
-import L from 'leaflet/dist/leaflet';
+import * as L from 'leaflet';
+import 'leaflet-providers';
 
 export default class TbOpenStreetMap {
 
-    constructor($containerElement, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel) {
+    constructor($containerElement, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) {
 
         this.defaultZoomLevel = defaultZoomLevel;
         this.dontFitMapBounds = dontFitMapBounds;
         this.minZoomLevel = minZoomLevel;
         this.tooltips = [];
 
+        if (!mapProvider) {
+            mapProvider = "OpenStreetMap.Mapnik";
+        }
+
         this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8);
 
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        }).addTo(this.map);
+        var tileLayer = L.tileLayer.provider(mapProvider);
+
+        tileLayer.addTo(this.map);
 
         if (initCallback) {
             setTimeout(initCallback, 0); //eslint-disable-line
@@ -63,11 +68,13 @@ export default class TbOpenStreetMap {
     }
 
     updateMarkerImage(marker, settings, image, maxSize) {
-        var testImage = new Image(); // eslint-disable-line no-undef
+        var testImage = document.createElement('img'); // eslint-disable-line
+        testImage.style.visibility = 'hidden';
         testImage.onload = function() {
             var width;
             var height;
             var aspect = testImage.width / testImage.height;
+            document.body.removeChild(testImage); //eslint-disable-line
             if (aspect > 1) {
                 width = maxSize;
                 height = maxSize / aspect;
@@ -89,6 +96,7 @@ export default class TbOpenStreetMap {
                     { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
             }
         }
+        document.body.appendChild(testImage); //eslint-disable-line
         testImage.src = image;
     }