thingsboard-aplcache
Changes
ui/src/app/widget/lib/google-map.js 123(+71 -52)
ui/src/app/widget/lib/image-map.js 103(+76 -27)
ui/src/app/widget/lib/map-widget.js 65(+37 -28)
ui/src/app/widget/lib/map-widget2.js 68(+37 -31)
ui/src/app/widget/lib/openstreet-map.js 120(+68 -52)
Details
diff --git a/ui/src/app/widget/lib/alarms-table-widget.tpl.html b/ui/src/app/widget/lib/alarms-table-widget.tpl.html
index 860128d..34c7c1b 100644
--- a/ui/src/app/widget/lib/alarms-table-widget.tpl.html
+++ b/ui/src/app/widget/lib/alarms-table-widget.tpl.html
@@ -77,7 +77,7 @@
</td>
<td md-cell ng-if="vm.displayDetails" class="tb-action-cell">
<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-tooltip md-direction="top">
{{ 'alarm.details' | translate }}
@@ -90,7 +90,7 @@
width: vm.actionCellDescriptors.length*36+'px'}">
<md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
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-tooltip md-direction="top">
{{ actionDescriptor.displayName }}
diff --git a/ui/src/app/widget/lib/entities-table-widget.tpl.html b/ui/src/app/widget/lib/entities-table-widget.tpl.html
index 2587da1..7ef8c54 100644
--- a/ui/src/app/widget/lib/entities-table-widget.tpl.html
+++ b/ui/src/app/widget/lib/entities-table-widget.tpl.html
@@ -63,7 +63,7 @@
width: vm.actionCellDescriptors.length*36+'px'}">
<md-button class="md-icon-button" ng-repeat="actionDescriptor in vm.actionCellDescriptors"
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-tooltip md-direction="top">
{{ actionDescriptor.displayName }}
ui/src/app/widget/lib/google-map.js 123(+71 -52)
diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js
index e2b4dc6..48900bd 100644
--- a/ui/src/app/widget/lib/google-map.js
+++ b/ui/src/app/widget/lib/google-map.js
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
var gmGlobals = {
loadingGmId: null,
gmApiKeys: {}
@@ -151,80 +150,100 @@ export default class TbGoogleMap {
/* eslint-disable no-undef */
updateMarkerColor(marker, color) {
- var pinColor = color.substr(1);
- 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));
- marker.setIcon(pinImage);
+ this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
+ marker.setIcon(iconInfo.icon);
+ });
}
/* eslint-enable no-undef */
/* eslint-disable no-undef */
- updateMarkerImage(marker, settings, image, maxSize) {
- 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;
- } else {
- width = maxSize * aspect;
- height = maxSize;
- }
- var pinImage = {
- url: image,
- scaledSize : new google.maps.Size(width, height)
- }
- marker.setIcon(pinImage);
+ updateMarkerIcon(marker, settings) {
+ this.createMarkerIcon(marker, settings, (iconInfo) => {
+ marker.setIcon(iconInfo.icon);
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-disable no-undef */
- createMarker(location, settings, onClickListener, markerArgs) {
- var height = 34;
- var pinColor = settings.color.substr(1);
- 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",
+ createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
+ var pinColor = 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,
new google.maps.Size(40, 37),
- new google.maps.Point(0, 0),
- new google.maps.Point(12, 35));
+ new google.maps.Point(0,0),
+ 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;
if (settings.showLabel) {
marker = new MarkerWithLabel({
position: location,
- map: this.map,
- icon: pinImage,
- shadow: pinShadow,
labelContent: '<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
- labelClass: "tb-labels",
- labelAnchor: new google.maps.Point(100, height + 20)
+ labelClass: "tb-labels"
});
} else {
marker = new google.maps.Marker({
position: location,
- map: this.map,
- icon: pinImage,
- shadow: pinShadow
});
}
-
- if (settings.useMarkerImage) {
- this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
- }
+ var gMap = this;
+ this.createMarkerIcon(marker, settings, (iconInfo) => {
+ 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) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
ui/src/app/widget/lib/image-map.js 103(+76 -27)
diff --git a/ui/src/app/widget/lib/image-map.js b/ui/src/app/widget/lib/image-map.js
index e9d9976..2190188 100644
--- a/ui/src/app/widget/lib/image-map.js
+++ b/ui/src/app/widget/lib/image-map.js
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet';
@@ -229,20 +228,12 @@ export default class TbImageMap {
}
updateMarkerColor(marker, color) {
- var pinColor = color.substr(1);
- var icon = L.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]
+ this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
+ marker.setIcon(iconInfo.icon);
});
- marker.setIcon(icon);
}
- updateMarkerImage(marker, settings, image, maxSize) {
+ /*updateMarkerImage(marker, settings, image, maxSize) {
var testImage = document.createElement('img'); // eslint-disable-line
testImage.style.visibility = 'hidden';
testImage.onload = function() {
@@ -273,39 +264,97 @@ export default class TbImageMap {
}
document.body.appendChild(testImage); //eslint-disable-line
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) {
- var height = 34;
- var pinColor = settings.color.substr(1);
+ 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: [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({
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34],
- iconAnchor: [21 * settings.markerOffsetX, 34 * settings.markerOffsetY],
+ iconAnchor: [21 * marker.offsetX, 34 * marker.offsetY],
popupAnchor: [0, -34],
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
shadowSize: [40, 37],
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 x = pos.x * this.width;
var y = pos.y * this.height;
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.offsetX = settings.markerOffsetX;
marker.offsetY = settings.markerOffsetY;
-
- if (settings.showLabel) {
- marker.tooltipOffset = [0, -height * 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);
- }
+ var opMap = this;
+ this.createMarkerIcon(marker, settings, (iconInfo) => {
+ marker.setIcon(iconInfo.icon);
+ if (settings.showLabel) {
+ 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 });
+ }
+ marker.addTo(opMap.map);
+ });
if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);
ui/src/app/widget/lib/map-widget.js 65(+37 -28)
diff --git a/ui/src/app/widget/lib/map-widget.js b/ui/src/app/widget/lib/map-widget.js
index f742514..53e6ada 100644
--- a/ui/src/app/widget/lib/map-widget.js
+++ b/ui/src/app/widget/lib/map-widget.js
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import tinycolor from 'tinycolor2';
import TbGoogleMap from './google-map';
@@ -274,9 +273,13 @@ export default class TbMapWidget {
if (!this.locationsSettings[i].useMarkerImageFunction &&
angular.isDefined(configuredLocationsSettings[i].markerImage) &&
configuredLocationsSettings[i].markerImage.length > 0) {
- this.locationsSettings[i].markerImage = configuredLocationsSettings[i].markerImage;
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) {
@@ -380,17 +383,41 @@ export default class TbMapWidget {
}
}
- function updateLocationMarkerImage(location, dataMap) {
+ function updateLocationMarkerIcon(location, dataMap) {
var image = calculateLocationMarkerImage(location, dataMap);
- if (image != null && (!location.settings.calculatedImage || !angular.equals(location.settings.calculatedImage, image))) {
- tbMap.map.updateMarkerImage(location.marker, location.settings, image.url, image.size);
- location.settings.calculatedImage = image;
+ if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
+ location.settings.currentImage = image;
+ tbMap.map.updateMarkerIcon(location.marker, location.settings);
}
}
function updateLocationStyle(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) {
@@ -413,15 +440,7 @@ export default class TbMapWidget {
}
if (latLngs.length > 0) {
var markerLocation = latLngs[latLngs.length-1];
- if (!location.marker) {
- location.marker = tbMap.map.createMarker(markerLocation, location.settings,
- function() {
- tbMap.callbacks.onLocationClick(location);
- }
- );
- } else {
- tbMap.map.setMarkerPosition(location.marker, markerLocation);
- }
+ createOrUpdateLocationMarker(location, markerLocation, dataMap);
}
if (!location.polyline) {
location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
@@ -439,18 +458,8 @@ export default class TbMapWidget {
lat = latData[latData.length-1][1];
lng = lngData[lngData.length-1][1];
latLng = tbMap.map.createLatLng(lat, lng);
- if (!location.marker) {
- location.marker = tbMap.map.createMarker(latLng, location.settings, function() {
- tbMap.callbacks.onLocationClick(location);
- });
- tbMap.markers.push(location.marker);
+ if (createOrUpdateLocationMarker(location, latLng, dataMap)) {
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);
ui/src/app/widget/lib/map-widget2.js 68(+37 -31)
diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js
index 44abb2b..db880ca 100644
--- a/ui/src/app/widget/lib/map-widget2.js
+++ b/ui/src/app/widget/lib/map-widget2.js
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import tinycolor from 'tinycolor2';
import TbGoogleMap from './google-map';
@@ -159,9 +158,13 @@ export default class TbMapWidgetV2 {
if (!this.locationSettings.useMarkerImageFunction &&
angular.isDefined(this.ctx.settings.markerImage) &&
this.ctx.settings.markerImage.length > 0) {
- this.locationSettings.markerImage = this.ctx.settings.markerImage;
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) {
@@ -235,10 +238,10 @@ export default class TbMapWidgetV2 {
}
}
- 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;
+ function updateLocationMarkerIcon(location, image) {
+ if (image && (!location.settings.currentImage || !angular.equals(location.settings.currentImage, image))) {
+ location.settings.currentImage = image;
+ tbMap.map.updateMarkerIcon(location.marker, location.settings);
}
}
@@ -247,7 +250,31 @@ export default class TbMapWidgetV2 {
var color = calculateLocationColor(location, dataMap);
var image = calculateLocationMarkerImage(location, dataMap);
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) {
@@ -284,16 +311,7 @@ export default class TbMapWidgetV2 {
}
if (latLngs.length > 0) {
var markerLocation = latLngs[latLngs.length - 1];
- if (!location.marker) {
- 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);
- }
+ createOrUpdateLocationMarker(location, markerLocation, dataMap);
}
if (!location.polyline) {
location.polyline = tbMap.map.createPolyline(latLngs, location.settings);
@@ -312,20 +330,8 @@ export default class TbMapWidgetV2 {
lng = lngData[lngData.length - 1][1];
if (angular.isDefined(lat) && lat != null && angular.isDefined(lng) && lng != null) {
latLng = tbMap.map.createLatLng(lat, lng);
- if (!location.marker) {
- location.marker = tbMap.map.createMarker(latLng, location.settings,
- function (event) {
- tbMap.callbacks.onLocationClick(location);
- locationRowClick(event, location);
- }, [location.dsIndex]);
- tbMap.markers.push(location.marker);
+ if (createOrUpdateLocationMarker(location, latLng, dataMap)) {
locationChanged = true;
- } else {
- var prevPosition = tbMap.map.getMarkerPosition(location.marker);
- if (!prevPosition.equals(latLng)) {
- tbMap.map.setMarkerPosition(location.marker, latLng);
- locationChanged = true;
- }
}
}
}
ui/src/app/widget/lib/openstreet-map.js 120(+68 -52)
diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js
index 1d1d3f7..3403acf 100644
--- a/ui/src/app/widget/lib/openstreet-map.js
+++ b/ui/src/app/widget/lib/openstreet-map.js
@@ -13,7 +13,6 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-
import 'leaflet/dist/leaflet.css';
import * as L from 'leaflet';
import 'leaflet-providers';
@@ -54,55 +53,65 @@ export default class TbOpenStreetMap {
}
updateMarkerColor(marker, color) {
- var pinColor = color.substr(1);
- var icon = L.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]
+ this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
+ marker.setIcon(iconInfo.icon);
});
- marker.setIcon(icon);
- }
-
- updateMarkerImage(marker, settings, image, maxSize) {
- 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;
- } 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);
+ }
+
+ updateMarkerIcon(marker, settings) {
+ this.createMarkerIcon(marker, settings, (iconInfo) => {
+ marker.setIcon(iconInfo.icon);
if (settings.showLabel) {
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>',
{ 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) {
- var height = 34;
- var pinColor = settings.color.substr(1);
+ createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
+ var pinColor = color.substr(1);
var icon = L.icon({
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34],
@@ -112,18 +121,25 @@ export default class TbOpenStreetMap {
shadowSize: [40, 37],
shadowAnchor: [12, 35]
});
+ var iconInfo = {
+ size: [21, 34],
+ icon: icon
+ };
+ onMarkerIconReady(iconInfo);
+ }
- var marker = L.marker(location, {icon: icon}).addTo(this.map);
-
- if (settings.showLabel) {
- 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) {
- this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
- }
+ createMarker(location, settings, onClickListener, markerArgs) {
+ var marker = L.marker(location, {});
+ var opMap = this;
+ this.createMarkerIcon(marker, settings, (iconInfo) => {
+ marker.setIcon(iconInfo.icon);
+ if (settings.showLabel) {
+ marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
+ marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>',
+ { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset });
+ }
+ marker.addTo(opMap.map);
+ });
if (settings.displayTooltip) {
this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);