thingsboard-aplcache
Changes
ui/package.json 1(+1 -0)
ui/src/app/widget/lib/google-map.js 5(+4 -1)
ui/src/app/widget/lib/image-map.js 2(+1 -1)
ui/src/app/widget/lib/map-widget2.js 42(+41 -1)
ui/src/app/widget/lib/openstreet-map.js 20(+14 -6)
Details
ui/package.json 1(+1 -0)
diff --git a/ui/package.json b/ui/package.json
index 27c38ca..1b09614 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.controller.js b/ui/src/app/dashboard/dashboard.controller.js
index 160223c..d4d3a1c 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/dashboard/dashboard-toolbar.tpl.html b/ui/src/app/dashboard/dashboard-toolbar.tpl.html
index 46192ff..97858e8 100644
--- a/ui/src/app/dashboard/dashboard-toolbar.tpl.html
+++ b/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/widget/lib/google-map.js 5(+4 -1)
diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js
index 4dc2dc0..e2b4dc6 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 */
ui/src/app/widget/lib/image-map.js 2(+1 -1)
diff --git a/ui/src/app/widget/lib/image-map.js b/ui/src/app/widget/lib/image-map.js
index 29e40c3..e9d9976 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;
ui/src/app/widget/lib/map-widget2.js 42(+41 -1)
diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js
index 96fb698..5d27114 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"
+ }
+ ]
+ }
]
};
ui/src/app/widget/lib/openstreet-map.js 20(+14 -6)
diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js
index 137fabf..1d1d3f7 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: '© <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;
}