dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Add Providers for Leaflet Map.

Browse Source
This commit is contained in:
Igor Kulikov 2017-09-28 17:55:34 +03:00
parent 5efe90e853
commit fea3e3d1c6
7 changed files with 64 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ui/package.json
View File

@ -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",

2
ui/src/app/dashboard/dashboard-toolbar.tpl.html
View File

@ -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">

4
ui/src/app/dashboard/dashboard.controller.js
View File

@ -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;

5
ui/src/app/widget/lib/google-map.js
View File

@ -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 */

2
ui/src/app/widget/lib/image-map.js
View File

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

42
ui/src/app/widget/lib/map-widget2.js
View File

@ -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"
}
]
}
]
};

20
ui/src/app/widget/lib/openstreet-map.js
View File

@ -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;
}