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

TB-70: Map widget improvement.

Browse Source
This commit is contained in:
Igor Kulikov 2017-07-07 00:12:35 +03:00
parent 33351afcf6
commit f7f9b8948c
6 changed files with 142 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
application/src/main/data/json/system/widget_bundles/maps.json
View File

File diff suppressed because one or more lines are too long

4
application/src/main/data/json/system/widget_bundles/maps__deprecated_.json
View File

File diff suppressed because one or more lines are too long

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

@ -144,8 +144,8 @@ export default class TbGoogleMap {
}
/* eslint-disable no-undef */
updateMarkerLabel(marker, settings, labelText) {
marker.set('labelContent', '<div style="color: '+ settings.labelColor +';"><b>'+labelText+'</b></div>');
updateMarkerLabel(marker, settings) {
marker.set('labelContent', '<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>');
}
/* eslint-enable no-undef */
@ -180,7 +180,7 @@ export default class TbGoogleMap {
}
marker.setIcon(pinImage);
if (settings.showLabel) {
marker.set('labelAnchor', new google.maps.Point(50, height + 20));
marker.set('labelAnchor', new google.maps.Point(100, height + 20));
}
}
testImage.src = image;
@ -206,9 +206,9 @@ export default class TbGoogleMap {
map: this.map,
icon: pinImage,
shadow: pinShadow,
labelContent: '<div style="color: '+ settings.labelColor +';"><b>'+settings.label+'</b></div>',
labelContent: '<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
labelClass: "tb-labels",
labelAnchor: new google.maps.Point(50, height + 20)
labelAnchor: new google.maps.Point(100, height + 20)
});
} else {
marker = new google.maps.Marker({

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

@ -172,6 +172,7 @@ export default class TbMapWidget {
showLabel: subscriptionLocationSettings.showLabel !== false,
displayTooltip: subscriptionLocationSettings.displayTooltip !== false,
label: datasource.name,
labelText: datasource.name,
labelColor: subscriptionLocationSettings.labelColor || this.ctx.widgetConfig.color || '#000000',
color: "#FE7569",
useColorFunction: false,
@ -218,6 +219,7 @@ export default class TbMapWidget {
showLabel: true,
displayTooltip: true,
label: "",
labelText: "",
labelColor: this.ctx.widgetConfig.color || '#000000',
color: "#FE7569",
useColorFunction: false,
@ -246,6 +248,7 @@ export default class TbMapWidget {
this.locationsSettings[i].showLabel = configuredLocationsSettings[i].showLabel !== false;
this.locationsSettings[i].label = configuredLocationsSettings[i].label || this.locationsSettings[i].label;
this.locationsSettings[i].labelText = 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;

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

@ -52,9 +52,10 @@ export default class TbMapWidgetV2 {
if (!useDynamicLocations) {
this.subscription = this.ctx.defaultSubscription;
this.configureLocationsSettings();
}
this.configureLocationsSettings();
var minZoomLevel = this.drawRoutes ? 18 : 15;
var initCallback = function() {
@ -73,6 +74,30 @@ export default class TbMapWidgetV2 {
Object.assign(this.callbacks, callbacks);
}
clearLocations() {
if (this.locations) {
var tbMap = this;
this.locations.forEach(function(location) {
if (location.marker) {
tbMap.map.removeMarker(location.marker);
}
if (location.polyline) {
tbMap.map.removePolyline(location.polyline);
}
});
this.locations = null;
this.markers = [];
if (this.drawRoutes) {
this.polylines = [];
}
}
}
setSubscription(subscription) {
this.subscription = subscription;
this.clearLocations();
}
configureLocationsSettings() {
this.locationSettings.latKeyName = this.ctx.settings.latKeyName || 'latitude';
@ -80,9 +105,6 @@ export default class TbMapWidgetV2 {
this.locationSettings.tooltipPattern = this.ctx.settings.tooltipPattern || "<b>${entityName}</b><br/><br/><b>Latitude:</b> ${"+this.locationSettings.latKeyName+":7}<br/><b>Longitude:</b> ${"+this.locationSettings.lngKeyName+":7}";
//TODO:
//this.locationSettings.tooltipReplaceInfo = procesTooltipPattern(this, this.locationsSettings[i].tooltipPattern, this.subscription.datasources);
this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
this.locationSettings.displayTooltip = true;
this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000',
@ -99,7 +121,7 @@ export default class TbMapWidgetV2 {
}
this.locationSettings.useMarkerImageFunction = this.ctx.settings.useMarkerImageFunction === true;
if (angular.isDefined(this.ctx.settings.markerImageFunction) &&this.ctx.settings.markerImageFunction.length > 0) {
if (angular.isDefined(this.ctx.settings.markerImageFunction) && this.ctx.settings.markerImageFunction.length > 0) {
try {
this.locationSettings.markerImageFunction = new Function('data, images, dsData, dsIndex', this.ctx.settings.markerImageFunction);
} catch (e) {
@ -121,8 +143,6 @@ export default class TbMapWidgetV2 {
this.locationSettings.strokeWeight = this.ctx.settings.strokeWeight || 2;
this.locationSettings.strokeOpacity = this.ctx.settings.strokeOpacity || 1.0;
}
}
update() {
@ -131,10 +151,9 @@ export default class TbMapWidgetV2 {
function updateLocationLabel(location) {
if (location.settings.showLabel && location.settings.labelReplaceInfo.variables.length) {
var labelText = fillPattern(location.settings.label,
location.settings.labelText = fillPattern(location.settings.label,
location.settings.labelReplaceInfo, tbMap.subscription.data);
tbMap.map.updateMarkerLabel(location.marker, location.settings, labelText);
//TODO: update openStreetMap
tbMap.map.updateMarkerLabel(location.marker, location.settings);
}
}
@ -152,10 +171,9 @@ export default class TbMapWidgetV2 {
}
}
function updateLocationColor(location, dataMap) {
var color = calculateLocationColor(location, dataMap);
function updateLocationColor(location, color, image) {
if (!location.settings.calculatedColor || location.settings.calculatedColor !== color) {
if (!location.settings.useMarkerImage) {
if (!location.settings.useMarkerImage && !image) {
tbMap.map.updateMarkerColor(location.marker, color);
}
if (location.polyline) {
@ -179,9 +197,8 @@ export default class TbMapWidgetV2 {
}
}
function updateLocationMarkerImage(location, dataMap) {
var image = calculateLocationMarkerImage(location, dataMap);
if (image != null && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) {
function updateLocationMarkerImage(location, image) {
if (image && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) {
tbMap.map.updateMarkerImage(location.marker, location.settings, image.url, image.size);
location.settings.calculatedImage = image;
}
@ -189,8 +206,10 @@ export default class TbMapWidgetV2 {
function updateLocationStyle(location, dataMap) {
updateLocationLabel(location);
updateLocationColor(location, dataMap);
updateLocationMarkerImage(location, dataMap);
var color = calculateLocationColor(location, dataMap);
var image = calculateLocationMarkerImage(location, dataMap);
updateLocationColor(location, color, image);
updateLocationMarkerImage(location, image);
}
function updateLocation(location, data, dataMap) {
@ -298,6 +317,7 @@ export default class TbMapWidgetV2 {
if (location.settings.showLabel) {
location.settings.label = tbMap.utils.createLabelFromDatasource(currentDatasource, location.settings.label);
location.settings.labelReplaceInfo = processPattern(location.settings.label, datasources, currentDatasourceIndex);
location.settings.labelText = location.settings.label;
}
if (location.settings.displayTooltip) {
location.settings.tooltipPattern = tbMap.utils.createLabelFromDatasource(currentDatasource, location.settings.tooltipPattern);
@ -372,7 +392,7 @@ export default class TbMapWidgetV2 {
}
}
static settingsSchema(mapProvider) {
static settingsSchema(mapProvider, drawRoutes) {
var schema;
if (mapProvider === 'google-map') {
schema = angular.copy(googleMapSettingsSchema);
@ -382,6 +402,11 @@ export default class TbMapWidgetV2 {
angular.merge(schema.schema.properties, commonMapSettingsSchema.schema.properties);
schema.schema.required = schema.schema.required.concat(commonMapSettingsSchema.schema.required);
schema.form = schema.form.concat(commonMapSettingsSchema.form);
if (drawRoutes) {
angular.merge(schema.schema.properties, routeMapSettingsSchema.schema.properties);
schema.schema.required = schema.schema.required.concat(routeMapSettingsSchema.schema.required);
schema.form = schema.form.concat(routeMapSettingsSchema.form);
}
return schema;
}
@ -442,7 +467,7 @@ const googleMapSettingsSchema =
const openstreetMapSettingsSchema =
{
"schema":{
"title":"Google Map Configuration",
"title":"Openstreet Map Configuration",
"type":"object",
"properties":{
},
@ -574,3 +599,28 @@ const commonMapSettingsSchema =
]
};
const routeMapSettingsSchema =
{
"schema":{
"title":"Route Map Configuration",
"type":"object",
"properties":{
"strokeWeight": {
"title": "Stroke weight",
"type": "number",
"default": 2
},
"strokeOpacity": {
"title": "Stroke opacity",
"type": "number",
"default": 1.0
}
},
"required":[
]
},
"form":[
"strokeWeight",
"strokeOpacity"
]
};

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

@ -42,6 +42,12 @@ export default class TbOpenStreetMap {
return angular.isDefined(this.map);
}
updateMarkerLabel(marker, settings) {
marker.unbindTooltip();
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
}
updateMarkerColor(marker, color) {
var pinColor = color.substr(1);
var icon = L.icon({
@ -78,8 +84,9 @@ export default class TbOpenStreetMap {
marker.setIcon(icon);
if (settings.showLabel) {
marker.unbindTooltip();
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.label+'</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: [0, -height + 10] });
marker.tooltipOffset = [0, -height + 10];
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
}
}
testImage.src = image;
@ -101,8 +108,9 @@ export default class TbOpenStreetMap {
var marker = L.marker(location, {icon: icon}).addTo(this.map);
if (settings.showLabel) {
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.label+'</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: [0, -height + 10] });
marker.tooltipOffset = [0, -height + 10];
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
}
if (settings.useMarkerImage) {