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

Map widgets improvements.

pull/508/head
Igor Kulikov 9 years ago
parent
3e25997ba2
commit
9e6acb7ede
7 changed files with 292 additions and 193 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      ui/src/app/widget/lib/alarms-table-widget.tpl.html
  2. 2
      ui/src/app/widget/lib/entities-table-widget.tpl.html
  3. 123
      ui/src/app/widget/lib/google-map.js
  4. 103
      ui/src/app/widget/lib/image-map.js
  5. 65
      ui/src/app/widget/lib/map-widget.js
  6. 68
      ui/src/app/widget/lib/map-widget2.js
  7. 120
      ui/src/app/widget/lib/openstreet-map.js

4
ui/src/app/widget/lib/alarms-table-widget.tpl.html
View File

@ -77,7 +77,7 @@
</td> </td>
<td md-cell ng-if="vm.displayDetails" class="tb-action-cell"> <td md-cell ng-if="vm.displayDetails" class="tb-action-cell">
<md-button class="md-icon-button" aria-label="{{ 'alarm.details' | translate }}" <md-button class="md-icon-button" aria-label="{{ 'alarm.details' | translate }}"
ng-click="vm.openAlarmDetails($event, alarm)"> ng-click="vm.openAlarmDetails($event, alarm)" ng-disabled="$root.loading">
<md-icon aria-label="{{ 'alarm.details' | translate }}" class="material-icons">more_horiz</md-icon> <md-icon aria-label="{{ 'alarm.details' | translate }}" class="material-icons">more_horiz</md-icon>
<md-tooltip md-direction="top"> <md-tooltip md-direction="top">
{{ 'alarm.details' | translate }} {{ 'alarm.details' | translate }}
@ -90,7 +90,7 @@
width: vm.actionCellDescriptors.length*36+'px'}"> width: vm.actionCellDescriptors.length*36+'px'}">
<md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors" <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
aria-label="{{ actionDescriptor.displayName }}" aria-label="{{ actionDescriptor.displayName }}"
ng-click="vm.onActionButtonClick($event, alarm, actionDescriptor)"> ng-click="vm.onActionButtonClick($event, alarm, actionDescriptor)" ng-disabled="$root.loading">
<md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon> <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
<md-tooltip md-direction="top"> <md-tooltip md-direction="top">
{{ actionDescriptor.displayName }} {{ actionDescriptor.displayName }}

2
ui/src/app/widget/lib/entities-table-widget.tpl.html
View File

@ -63,7 +63,7 @@
width: vm.actionCellDescriptors.length*36+'px'}"> width: vm.actionCellDescriptors.length*36+'px'}">
<md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors" <md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
aria-label="{{ actionDescriptor.displayName }}" aria-label="{{ actionDescriptor.displayName }}"
ng-click="vm.onActionButtonClick($event, entity, actionDescriptor)"> ng-click="vm.onActionButtonClick($event, entity, actionDescriptor)" ng-disabled="$root.loading">
<md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon> <md-icon aria-label="{{ actionDescriptor.displayName }}" class="material-icons">{{actionDescriptor.icon}}</md-icon>
<md-tooltip md-direction="top"> <md-tooltip md-direction="top">
{{ actionDescriptor.displayName }} {{ actionDescriptor.displayName }}

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

@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
var gmGlobals = { var gmGlobals = {
loadingGmId: null, loadingGmId: null,
gmApiKeys: {} gmApiKeys: {}
@ -151,80 +150,100 @@ export default class TbGoogleMap {
/* eslint-disable no-undef */ /* eslint-disable no-undef */
updateMarkerColor(marker, color) { updateMarkerColor(marker, color) {
var pinColor = color.substr(1); this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
var pinImage = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor, marker.setIcon(iconInfo.icon);
new google.maps.Size(21, 34), });
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
marker.setIcon(pinImage);
} }
/* eslint-enable no-undef */ /* eslint-enable no-undef */
/* eslint-disable no-undef */ /* eslint-disable no-undef */
updateMarkerImage(marker, settings, image, maxSize) { updateMarkerIcon(marker, settings) {
var testImage = document.createElement('img'); // eslint-disable-line this.createMarkerIcon(marker, settings, (iconInfo) => {
testImage.style.visibility = 'hidden'; marker.setIcon(iconInfo.icon);
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;
} else {
width = maxSize * aspect;
height = maxSize;
}
var pinImage = {
url: image,
scaledSize : new google.maps.Size(width, height)
}
marker.setIcon(pinImage);
if (settings.showLabel) { if (settings.showLabel) {
marker.set('labelAnchor', new google.maps.Point(100, height + 20)); marker.set('labelAnchor', new google.maps.Point(100, iconInfo.size[1] + 20));
} }
});
}
/* eslint-disable no-undef */
/* eslint-disable no-undef */
createMarkerIcon(marker, settings, onMarkerIconReady) {
var currentImage = settings.currentImage;
var gMap = this;
if (currentImage && currentImage.url) {
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 = currentImage.size;
height = currentImage.size / aspect;
} else {
width = currentImage.size * aspect;
height = currentImage.size;
}
var icon = {
url: currentImage.url,
scaledSize : new google.maps.Size(width, height)
};
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
};
testImage.onerror = function() {
gMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
};
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = currentImage.url;
} else {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
} }
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = image;
} }
/* eslint-enable no-undef */ /* eslint-enable no-undef */
/* eslint-disable no-undef */ /* eslint-disable no-undef */
createMarker(location, settings, onClickListener, markerArgs) { createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
var height = 34; var pinColor = color.substr(1);
var pinColor = settings.color.substr(1); var icon = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + pinColor,
var pinImage = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37), new google.maps.Size(40, 37),
new google.maps.Point(0, 0), new google.maps.Point(0,0),
new google.maps.Point(12, 35)); new google.maps.Point(10, 37));
var iconInfo = {
size: [40, 37],
icon: icon
};
onMarkerIconReady(iconInfo);
}
/* eslint-enable no-undef */
/* eslint-disable no-undef */
createMarker(location, settings, onClickListener, markerArgs) {
var marker; var marker;
if (settings.showLabel) { if (settings.showLabel) {
marker = new MarkerWithLabel({ marker = new MarkerWithLabel({
position: location, position: location,
map: this.map,
icon: pinImage,
shadow: pinShadow,
labelContent: '<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>', labelContent: '<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
labelClass: "tb-labels", labelClass: "tb-labels"
labelAnchor: new google.maps.Point(100, height + 20)
}); });
} else { } else {
marker = new google.maps.Marker({ marker = new google.maps.Marker({
position: location, position: location,
map: this.map,
icon: pinImage,
shadow: pinShadow
}); });
} }
var gMap = this;
if (settings.useMarkerImage) { this.createMarkerIcon(marker, settings, (iconInfo) => {
this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34); marker.setIcon(iconInfo.icon);
} if (settings.showLabel) {
marker.set('labelAnchor', new google.maps.Point(100, iconInfo.size[1] + 20));
}
marker.setMap(gMap.map);
});
if (settings.displayTooltip) { if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);

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

@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet'; import * as L from 'leaflet';
@ -229,20 +228,12 @@ export default class TbImageMap {
} }
updateMarkerColor(marker, color) { updateMarkerColor(marker, color) {
var pinColor = color.substr(1); this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
var icon = L.icon({ marker.setIcon(iconInfo.icon);
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34],
iconAnchor: [10, 34],
popupAnchor: [0, -34],
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
shadowSize: [40, 37],
shadowAnchor: [12, 35]
}); });
marker.setIcon(icon);
} }
updateMarkerImage(marker, settings, image, maxSize) { /*updateMarkerImage(marker, settings, image, maxSize) {
var testImage = document.createElement('img'); // eslint-disable-line var testImage = document.createElement('img'); // eslint-disable-line
testImage.style.visibility = 'hidden'; testImage.style.visibility = 'hidden';
testImage.onload = function() { testImage.onload = function() {
@ -273,39 +264,97 @@ export default class TbImageMap {
} }
document.body.appendChild(testImage); //eslint-disable-line document.body.appendChild(testImage); //eslint-disable-line
testImage.src = image; testImage.src = image;
}*/
updateMarkerIcon(marker, settings) {
this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.setIcon(iconInfo.icon);
if (settings.showLabel) {
marker.unbindTooltip();
marker.tooltipOffset = [0, -iconInfo.size[1] * marker.offsetY + 10];
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
}
});
} }
createMarker(position, settings, onClickListener, markerArgs) { createMarkerIcon(marker, settings, onMarkerIconReady) {
var height = 34; var currentImage = settings.currentImage;
var pinColor = settings.color.substr(1); var opMap = this;
if (currentImage && currentImage.url) {
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 = currentImage.size;
height = currentImage.size / aspect;
} else {
width = currentImage.size * aspect;
height = currentImage.size;
}
var icon = L.icon({
iconUrl: currentImage.url,
iconSize: [width, height],
iconAnchor: [marker.offsetX * width, marker.offsetY * height],
popupAnchor: [0, -height]
});
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
};
testImage.onerror = function() {
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
};
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = currentImage.url;
} else {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
}
}
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
var pinColor = color.substr(1);
var icon = L.icon({ var icon = L.icon({
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor, iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34], iconSize: [21, 34],
iconAnchor: [21 * settings.markerOffsetX, 34 * settings.markerOffsetY], iconAnchor: [21 * marker.offsetX, 34 * marker.offsetY],
popupAnchor: [0, -34], popupAnchor: [0, -34],
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
shadowSize: [40, 37], shadowSize: [40, 37],
shadowAnchor: [12, 35] shadowAnchor: [12, 35]
}); });
var iconInfo = {
size: [21, 34],
icon: icon
};
onMarkerIconReady(iconInfo);
}
createMarker(position, settings, onClickListener, markerArgs) {
var pos = this.posFunction(position.x, position.y); var pos = this.posFunction(position.x, position.y);
var x = pos.x * this.width; var x = pos.x * this.width;
var y = pos.y * this.height; var y = pos.y * this.height;
var location = this.pointToLatLng(x, y); var location = this.pointToLatLng(x, y);
var marker = L.marker(location, {icon: icon}).addTo(this.map); var marker = L.marker(location, {});//.addTo(this.map);
marker.position = position; marker.position = position;
marker.offsetX = settings.markerOffsetX; marker.offsetX = settings.markerOffsetX;
marker.offsetY = settings.markerOffsetY; marker.offsetY = settings.markerOffsetY;
var opMap = this;
if (settings.showLabel) { this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.tooltipOffset = [0, -height * marker.offsetY + 10]; marker.setIcon(iconInfo.icon);
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>', if (settings.showLabel) {
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); marker.tooltipOffset = [0, -iconInfo.size[1] * marker.offsetY + 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) { }
this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34); marker.addTo(opMap.map);
} });
if (settings.displayTooltip) { if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);

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

@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import TbGoogleMap from './google-map'; import TbGoogleMap from './google-map';
@ -274,9 +273,13 @@ export default class TbMapWidget {
if (!this.locationsSettings[i].useMarkerImageFunction && if (!this.locationsSettings[i].useMarkerImageFunction &&
angular.isDefined(configuredLocationsSettings[i].markerImage) && angular.isDefined(configuredLocationsSettings[i].markerImage) &&
configuredLocationsSettings[i].markerImage.length > 0) { configuredLocationsSettings[i].markerImage.length > 0) {
this.locationsSettings[i].markerImage = configuredLocationsSettings[i].markerImage;
this.locationsSettings[i].useMarkerImage = true; this.locationsSettings[i].useMarkerImage = true;
this.locationsSettings[i].markerImageSize = configuredLocationsSettings[i].markerImageSize || 34; var url = this.ctx.settings.markerImage;
var size = this.ctx.settings.markerImageSize || 34;
this.locationSettings.currentImage = {
url: url,
size: size
};
} }
if (this.drawRoutes) { if (this.drawRoutes) {
@ -380,17 +383,41 @@ export default class TbMapWidget {
} }
} }
function updateLocationMarkerImage(location, dataMap) { function updateLocationMarkerIcon(location, dataMap) {
var image = calculateLocationMarkerImage(location, dataMap); var image = calculateLocationMarkerImage(location, dataMap);
if (image != null && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) { if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
tbMap.map.updateMarkerImage(location.marker, location.settings, image.url, image.size); location.settings.currentImage = image;
location.settings.calculatedImage = image; tbMap.map.updateMarkerIcon(location.marker, location.settings);
} }
} }
function updateLocationStyle(location, dataMap) { function updateLocationStyle(location, dataMap) {
updateLocationColor(location, dataMap); updateLocationColor(location, dataMap);
updateLocationMarkerImage(location, dataMap); updateLocationMarkerIcon(location, dataMap);
}
function createOrUpdateLocationMarker(location, markerLocation, dataMap) {
var changed = false;
if (!location.marker) {
var image = calculateLocationMarkerImage(location, dataMap);
if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
location.settings.currentImage = image;
}
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
function() {
tbMap.callbacks.onLocationClick(location);
}
);
tbMap.markers.push(location.marker);
changed = true;
} else {
var prevPosition = tbMap.map.getMarkerPosition(location.marker);
if (!prevPosition.equals(markerLocation)) {
tbMap.map.setMarkerPosition(location.marker, markerLocation);
changed = true;
}
}
return changed;
} }
function updateLocation(location, data, dataMap) { function updateLocation(location, data, dataMap) {
@ -413,15 +440,7 @@ export default class TbMapWidget {
} }
if (latLngs.length > 0) { if (latLngs.length > 0) {
var markerLocation = latLngs[latLngs.length-1]; var markerLocation = latLngs[latLngs.length-1];
if (!location.marker) { createOrUpdateLocationMarker(location, markerLocation, dataMap);
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
function() {
tbMap.callbacks.onLocationClick(location);
}
);
} else {
tbMap.map.setMarkerPosition(location.marker, markerLocation);
}
} }
if (!location.polyline) { if (!location.polyline) {
location.polyline = tbMap.map.createPolyline(latLngs, location.settings); location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
@ -439,18 +458,8 @@ export default class TbMapWidget {
lat = latData[latData.length-1][1]; lat = latData[latData.length-1][1];
lng = lngData[lngData.length-1][1]; lng = lngData[lngData.length-1][1];
latLng = tbMap.map.createLatLng(lat, lng); latLng = tbMap.map.createLatLng(lat, lng);
if (!location.marker) { if (createOrUpdateLocationMarker(location, latLng, dataMap)) {
location.marker = tbMap.map.createMarker(latLng, location.settings, function() {
tbMap.callbacks.onLocationClick(location);
});
tbMap.markers.push(location.marker);
locationChanged = true; locationChanged = true;
} else {
var prevPosition = tbMap.map.getMarkerPosition(location.marker);
if (!prevPosition.equals(latLng)) {
tbMap.map.setMarkerPosition(location.marker, latLng);
locationChanged = true;
}
} }
} }
updateLocationStyle(location, dataMap); updateLocationStyle(location, dataMap);

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

@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import TbGoogleMap from './google-map'; import TbGoogleMap from './google-map';
@ -159,9 +158,13 @@ export default class TbMapWidgetV2 {
if (!this.locationSettings.useMarkerImageFunction && if (!this.locationSettings.useMarkerImageFunction &&
angular.isDefined(this.ctx.settings.markerImage) && angular.isDefined(this.ctx.settings.markerImage) &&
this.ctx.settings.markerImage.length > 0) { this.ctx.settings.markerImage.length > 0) {
this.locationSettings.markerImage = this.ctx.settings.markerImage;
this.locationSettings.useMarkerImage = true; this.locationSettings.useMarkerImage = true;
this.locationSettings.markerImageSize = this.ctx.settings.markerImageSize || 34; var url = this.ctx.settings.markerImage;
var size = this.ctx.settings.markerImageSize || 34;
this.locationSettings.currentImage = {
url: url,
size: size
};
} }
if (this.drawRoutes) { if (this.drawRoutes) {
@ -235,10 +238,10 @@ export default class TbMapWidgetV2 {
} }
} }
function updateLocationMarkerImage(location, image) { function updateLocationMarkerIcon(location, image) {
if (image && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) { if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
tbMap.map.updateMarkerImage(location.marker, location.settings, image.url, image.size); location.settings.currentImage = image;
location.settings.calculatedImage = image; tbMap.map.updateMarkerIcon(location.marker, location.settings);
} }
} }
@ -247,7 +250,31 @@ export default class TbMapWidgetV2 {
var color = calculateLocationColor(location, dataMap); var color = calculateLocationColor(location, dataMap);
var image = calculateLocationMarkerImage(location, dataMap); var image = calculateLocationMarkerImage(location, dataMap);
updateLocationColor(location, color, image); updateLocationColor(location, color, image);
updateLocationMarkerImage(location, image); updateLocationMarkerIcon(location, image);
}
function createOrUpdateLocationMarker(location, markerLocation, dataMap) {
var changed = false;
if (!location.marker) {
var image = calculateLocationMarkerImage(location, dataMap);
if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
location.settings.currentImage = image;
}
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
function (event) {
tbMap.callbacks.onLocationClick(location);
locationRowClick(event, location);
}, [location.dsIndex]);
tbMap.markers.push(location.marker);
changed = true;
} else {
var prevPosition = tbMap.map.getMarkerPosition(location.marker);
if (!prevPosition.equals(markerLocation)) {
tbMap.map.setMarkerPosition(location.marker, markerLocation);
changed = true;
}
}
return changed;
} }
function locationRowClick($event, location) { function locationRowClick($event, location) {
@ -284,16 +311,7 @@ export default class TbMapWidgetV2 {
} }
if (latLngs.length > 0) { if (latLngs.length > 0) {
var markerLocation = latLngs[latLngs.length - 1]; var markerLocation = latLngs[latLngs.length - 1];
if (!location.marker) { createOrUpdateLocationMarker(location, markerLocation, dataMap);
location.marker = tbMap.map.createMarker(markerLocation, location.settings,
function (event) {
tbMap.callbacks.onLocationClick(location);
locationRowClick(event, location);
}, [location.dsIndex]
);
} else {
tbMap.map.setMarkerPosition(location.marker, markerLocation);
}
} }
if (!location.polyline) { if (!location.polyline) {
location.polyline = tbMap.map.createPolyline(latLngs, location.settings); location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
@ -312,20 +330,8 @@ export default class TbMapWidgetV2 {
lng = lngData[lngData.length - 1][1]; lng = lngData[lngData.length - 1][1];
if (angular.isDefined(lat) && lat != null && angular.isDefined(lng) && lng != null) { if (angular.isDefined(lat) && lat != null && angular.isDefined(lng) && lng != null) {
latLng = tbMap.map.createLatLng(lat, lng); latLng = tbMap.map.createLatLng(lat, lng);
if (!location.marker) { if (createOrUpdateLocationMarker(location, latLng, dataMap)) {
location.marker = tbMap.map.createMarker(latLng, location.settings,
function (event) {
tbMap.callbacks.onLocationClick(location);
locationRowClick(event, location);
}, [location.dsIndex]);
tbMap.markers.push(location.marker);
locationChanged = true; locationChanged = true;
} else {
var prevPosition = tbMap.map.getMarkerPosition(location.marker);
if (!prevPosition.equals(latLng)) {
tbMap.map.setMarkerPosition(location.marker, latLng);
locationChanged = true;
}
} }
} }
} }

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

@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet'; import * as L from 'leaflet';
import 'leaflet-providers'; import 'leaflet-providers';
@ -54,55 +53,65 @@ export default class TbOpenStreetMap {
} }
updateMarkerColor(marker, color) { updateMarkerColor(marker, color) {
var pinColor = color.substr(1); this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
var icon = L.icon({ marker.setIcon(iconInfo.icon);
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34],
iconAnchor: [10, 34],
popupAnchor: [0, -34],
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
shadowSize: [40, 37],
shadowAnchor: [12, 35]
}); });
marker.setIcon(icon); }
}
updateMarkerIcon(marker, settings) {
updateMarkerImage(marker, settings, image, maxSize) { this.createMarkerIcon(marker, settings, (iconInfo) => {
var testImage = document.createElement('img'); // eslint-disable-line marker.setIcon(iconInfo.icon);
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;
} else {
width = maxSize * aspect;
height = maxSize;
}
var icon = L.icon({
iconUrl: image,
iconSize: [width, height],
iconAnchor: [width/2, height],
popupAnchor: [0, -height]
});
marker.setIcon(icon);
if (settings.showLabel) { if (settings.showLabel) {
marker.unbindTooltip(); marker.unbindTooltip();
marker.tooltipOffset = [0, -height + 10]; marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>', marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
} }
});
}
createMarkerIcon(marker, settings, onMarkerIconReady) {
var currentImage = settings.currentImage;
var opMap = this;
if (currentImage && currentImage.url) {
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 = currentImage.size;
height = currentImage.size / aspect;
} else {
width = currentImage.size * aspect;
height = currentImage.size;
}
var icon = L.icon({
iconUrl: currentImage.url,
iconSize: [width, height],
iconAnchor: [width/2, height],
popupAnchor: [0, -height]
});
var iconInfo = {
size: [width, height],
icon: icon
};
onMarkerIconReady(iconInfo);
};
testImage.onerror = function() {
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
};
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = currentImage.url;
} else {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
} }
document.body.appendChild(testImage); //eslint-disable-line
testImage.src = image;
} }
createMarker(location, settings, onClickListener, markerArgs) { createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
var height = 34; var pinColor = color.substr(1);
var pinColor = settings.color.substr(1);
var icon = L.icon({ var icon = L.icon({
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor, iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34], iconSize: [21, 34],
@ -112,18 +121,25 @@ export default class TbOpenStreetMap {
shadowSize: [40, 37], shadowSize: [40, 37],
shadowAnchor: [12, 35] shadowAnchor: [12, 35]
}); });
var iconInfo = {
size: [21, 34],
icon: icon
};
onMarkerIconReady(iconInfo);
}
var marker = L.marker(location, {icon: icon}).addTo(this.map); createMarker(location, settings, onClickListener, markerArgs) {
var marker = L.marker(location, {});
if (settings.showLabel) { var opMap = this;
marker.tooltipOffset = [0, -height + 10]; this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>', marker.setIcon(iconInfo.icon);
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); if (settings.showLabel) {
} marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
if (settings.useMarkerImage) { { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34); }
} marker.addTo(opMap.map);
});
if (settings.displayTooltip) { if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);

Write Preview
Loading…
Cancel
Save