Map widgets improvements.

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

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

@@ -13,7 +13,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
 var gmGlobals = {
     loadingGmId: null,
     gmApiKeys: {}
@@ -151,17 +150,28 @@ export default class TbGoogleMap {
 
     /* eslint-disable no-undef */
     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-disable no-undef */
-    updateMarkerImage(marker, settings, image, maxSize) {
+    updateMarkerIcon(marker, settings) {
+        this.createMarkerIcon(marker, settings, (iconInfo) => {
+            marker.setIcon(iconInfo.icon);
+            if (settings.showLabel) {
+                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() {
@@ -170,61 +180,70 @@ export default class TbGoogleMap {
                 var aspect = testImage.width / testImage.height;
                 document.body.removeChild(testImage); //eslint-disable-line
                 if (aspect > 1) {
-                width = maxSize;
+                    width = currentImage.size;
-                height = maxSize / aspect;
+                    height = currentImage.size / aspect;
                 } else {
-                width = maxSize * aspect;
+                    width = currentImage.size * aspect;
-                height = maxSize;
+                    height = currentImage.size;
                 }
-            var pinImage = {
+                var icon = {
-                url: image,
+                    url: currentImage.url,
                     scaledSize : new google.maps.Size(width, height)
-            }
+                };
-            marker.setIcon(pinImage);
+                var iconInfo = {
-            if (settings.showLabel) {
+                    size: [width, height],
-                marker.set('labelAnchor', new google.maps.Point(100, height + 20));
+                    icon: icon
-            }
+                };
-        }
+                onMarkerIconReady(iconInfo);
+            };
+            testImage.onerror = function() {
+                gMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
+            };
             document.body.appendChild(testImage); //eslint-disable-line
-        testImage.src = image;
+            testImage.src = currentImage.url;
+        } else {
+            this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
+        }
+    }
+    /* eslint-enable no-undef */
+
+    /* eslint-disable no-undef */
+    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(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 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",
-            new google.maps.Size(40, 37),
-            new google.maps.Point(0, 0),
-            new google.maps.Point(12, 35));
         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",
+                labelClass: "tb-labels"
-                labelAnchor: new google.maps.Point(100, height + 20)
             });
         } else {
             marker = new google.maps.Marker({
                 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) {
             this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);

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);
+        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
         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) {
+    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({
             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;
-
+        var opMap = this;
+        this.createMarkerIcon(marker, settings, (iconInfo) => {
+            marker.setIcon(iconInfo.icon);
             if (settings.showLabel) {
-            marker.tooltipOffset = [0, -height * marker.offsetY + 10];
+                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.useMarkerImage) {
+        });
-            this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
-        }
 
         if (settings.displayTooltip) {
             this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);

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))) {
+            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) {
             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) {
+                            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) {
                             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) {
+                        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;
-                        } 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

@@ -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) {
+        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 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) {
+                            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) {
                             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) {
+                            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;
-                            } 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

@@ -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,6 +53,64 @@ export default class TbOpenStreetMap {
     }
 
     updateMarkerColor(marker, color) {
+        this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
+            marker.setIcon(iconInfo.icon);
+        });
+    }
+
+    updateMarkerIcon(marker, settings) {
+        this.createMarkerIcon(marker, settings, (iconInfo) => {
+            marker.setIcon(iconInfo.icon);
+            if (settings.showLabel) {
+                marker.unbindTooltip();
+                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);
+        }
+    }
+
+    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,
@@ -64,66 +121,25 @@ export default class TbOpenStreetMap {
             shadowSize: [40, 37],
             shadowAnchor: [12, 35]
         });
-        marker.setIcon(icon);
+        var iconInfo = {
-    }
+            size: [21, 34],
-
+            icon: icon
-    updateMarkerImage(marker, settings, image, maxSize) {
+        };
-        var testImage = document.createElement('img'); // eslint-disable-line
+        onMarkerIconReady(iconInfo);
-        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) {
-                marker.unbindTooltip();
-                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 });
-            }
-        }
-        document.body.appendChild(testImage); //eslint-disable-line
-        testImage.src = image;
     }
 
     createMarker(location, settings, onClickListener, markerArgs) {
-        var height = 34;
+        var marker = L.marker(location, {});
-        var pinColor = settings.color.substr(1);
+        var opMap = this;
-        var icon = L.icon({
+        this.createMarkerIcon(marker, settings, (iconInfo) => {
-            iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
+            marker.setIcon(iconInfo.icon);
-            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]
-        });
-
-        var marker = L.marker(location, {icon: icon}).addTo(this.map);
-
             if (settings.showLabel) {
-            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 });
             }
-
+            marker.addTo(opMap.map);
-        if (settings.useMarkerImage) {
+        });
-            this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34);
-        }
 
         if (settings.displayTooltip) {
             this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs);