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 860128d32f..34c7c1bfcb 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 @@ + ng-click="vm.openAlarmDetails($event, alarm)" ng-disabled="$root.loading"> more_horiz {{ 'alarm.details' | translate }} @@ -90,7 +90,7 @@ width: vm.actionCellDescriptors.length*36+'px'}"> + ng-click="vm.onActionButtonClick($event, alarm, actionDescriptor)" ng-disabled="$root.loading"> {{actionDescriptor.icon}} {{ 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 2587da1779..7ef8c54de6 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'}"> + ng-click="vm.onActionButtonClick($event, entity, actionDescriptor)" ng-disabled="$root.loading"> {{actionDescriptor.icon}} {{ actionDescriptor.displayName }} diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js index e2b4dc6015..48900bd078 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: '
'+settings.labelText+'
', - 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); diff --git a/ui/src/app/widget/lib/image-map.js b/ui/src/app/widget/lib/image-map.js index e9d99765ce..21901880eb 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('
'+settings.labelText+'
', + { 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('
'+settings.labelText+'
', - { 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('
'+settings.labelText+'
', + { 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); diff --git a/ui/src/app/widget/lib/map-widget.js b/ui/src/app/widget/lib/map-widget.js index f742514403..53e6ada781 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); diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js index 44abb2b2ac..db880ca96d 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; - } } } } diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js index 1d1d3f7e5e..3403acfe99 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('
'+settings.labelText+'
', { 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('
'+settings.labelText+'
', - { 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('
'+settings.labelText+'
', + { 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);