diff --git a/ui/package.json b/ui/package.json index 27c38caaeb..1b096147c8 100644 --- a/ui/package.json +++ b/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", diff --git a/ui/src/app/dashboard/dashboard-toolbar.tpl.html b/ui/src/app/dashboard/dashboard-toolbar.tpl.html index 46192ffa7b..97858e8700 100644 --- a/ui/src/app/dashboard/dashboard-toolbar.tpl.html +++ b/ui/src/app/dashboard/dashboard-toolbar.tpl.html @@ -18,7 +18,7 @@ + ng-class="{'is-fullscreen': vm.forceFullscreen, 'md-whiteframe-z1': vm.forceFullscreen && vm.toolbarOpened }"> diff --git a/ui/src/app/dashboard/dashboard.controller.js b/ui/src/app/dashboard/dashboard.controller.js index 160223ccb6..d4d3a1c939 100644 --- a/ui/src/app/dashboard/dashboard.controller.js +++ b/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; diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js index 4dc2dc0dca..e2b4dc6015 100644 --- a/ui/src/app/widget/lib/google-map.js +++ b/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 */ diff --git a/ui/src/app/widget/lib/image-map.js b/ui/src/app/widget/lib/image-map.js index 29e40c3770..e9d99765ce 100644 --- a/ui/src/app/widget/lib/image-map.js +++ b/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; diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js index 96fb698b73..5d2711430a 100644 --- a/ui/src/app/widget/lib/map-widget2.js +++ b/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" + } + ] + } ] }; diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js index 137fabf3a6..1d1d3f7e5e 100644 --- a/ui/src/app/widget/lib/openstreet-map.js +++ b/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: '© OpenStreetMap 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; }