tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

TB-70: Map widget improvement.

pull/201/head
Igor Kulikov 9 years ago
parent
33351afcf6
commit
f7f9b8948c
6 changed files with 142 additions and 33 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 52
      application/src/main/data/json/system/widget_bundles/maps.json
  2. 4
      application/src/main/data/json/system/widget_bundles/maps__deprecated_.json
  3. 10
      ui/src/app/widget/lib/google-map.js
  4. 3
      ui/src/app/widget/lib/map-widget.js
  5. 90
      ui/src/app/widget/lib/map-widget2.js
  6. 16
      ui/src/app/widget/lib/openstreet-map.js

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) {

Write Preview
Loading…
Cancel
Save