From ec2bbbc25b2833420c9c26f2386bcad6bf79f7c8 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 26 Sep 2017 17:59:53 +0300 Subject: [PATCH] UI: Widgets. Improve image map. --- .../data/json/system/widget_bundles/maps.json | 2 +- ui/src/app/widget/lib/google-map.js | 10 +- ui/src/app/widget/lib/image-map.js | 271 ++++++++++-------- ui/src/app/widget/lib/image-map.scss | 98 ------- ui/src/app/widget/lib/map-widget2.js | 13 + ui/src/app/widget/lib/openstreet-map.js | 6 +- 6 files changed, 180 insertions(+), 220 deletions(-) delete mode 100644 ui/src/app/widget/lib/image-map.scss diff --git a/application/src/main/data/json/system/widget_bundles/maps.json b/application/src/main/data/json/system/widget_bundles/maps.json index 46596d00bb..8c2d0e548c 100644 --- a/application/src/main/data/json/system/widget_bundles/maps.json +++ b/application/src/main/data/json/system/widget_bundles/maps.json @@ -78,7 +78,7 @@ "sizeY": 6.5, "resources": [], "templateHtml": "", - "templateCss": ".error {\n color: red;\n}\n.tb-labels {\n color: #222;\n font: 12px/1.5 \"Helvetica Neue\", Arial, Helvetica, sans-serif;\n text-align: center;\n width: 200px;\n white-space: nowrap;\n}", + "templateCss": ".leaflet-zoom-box {\n\tz-index: 9;\n}\n\n.leaflet-pane { z-index: 4; }\n\n.leaflet-tile-pane { z-index: 2; }\n.leaflet-overlay-pane { z-index: 4; }\n.leaflet-shadow-pane { z-index: 5; }\n.leaflet-marker-pane { z-index: 6; }\n.leaflet-tooltip-pane { z-index: 7; }\n.leaflet-popup-pane { z-index: 8; }\n\n.leaflet-map-pane canvas { z-index: 1; }\n.leaflet-map-pane svg { z-index: 2; }\n\n.leaflet-control {\n\tz-index: 9;\n}\n.leaflet-top,\n.leaflet-bottom {\n\tz-index: 11;\n}\n\n.tb-marker-label {\n border: none;\n background: none;\n box-shadow: none;\n}\n\n.tb-marker-label:before {\n border: none;\n background: none;\n}\n", "controllerScript": "self.onInit = function() {\n self.ctx.map = new TbMapWidgetV2('image-map', false, self.ctx);\n}\n\nself.onDataUpdated = function() {\n self.ctx.map.update();\n}\n\nself.onResize = function() {\n self.ctx.map.resize();\n}\n\nself.getSettingsSchema = function() {\n return TbMapWidgetV2.settingsSchema('image-map');\n}\n\nself.getDataKeySettingsSchema = function() {\n return TbMapWidgetV2.dataKeySettingsSchema('image-map');\n}\n\nself.actionSources = function() {\n return TbMapWidgetV2.actionSources();\n}\n\nself.onDestroy = function() {\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", diff --git a/ui/src/app/widget/lib/google-map.js b/ui/src/app/widget/lib/google-map.js index 4b0ea2fd17..4dc2dc0dca 100644 --- a/ui/src/app/widget/lib/google-map.js +++ b/ui/src/app/widget/lib/google-map.js @@ -224,7 +224,7 @@ export default class TbGoogleMap { } if (settings.displayTooltip) { - this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, markerArgs); + this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); } if (onClickListener) { @@ -241,11 +241,17 @@ export default class TbGoogleMap { /* eslint-enable no-undef */ /* eslint-disable no-undef */ - createTooltip(marker, pattern, replaceInfo, markerArgs) { + createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) { var popup = new google.maps.InfoWindow({ content: '' }); + var map = this; marker.addListener('click', function() { + if (autoClose) { + map.tooltips.forEach((tooltip) => { + tooltip.popup.close(); + }); + } popup.open(this.map, marker); }); this.tooltips.push( { diff --git a/ui/src/app/widget/lib/image-map.js b/ui/src/app/widget/lib/image-map.js index e3b5162a82..29e40c3770 100644 --- a/ui/src/app/widget/lib/image-map.js +++ b/ui/src/app/widget/lib/image-map.js @@ -14,15 +14,10 @@ * limitations under the License. */ -import 'tooltipster/dist/css/tooltipster.bundle.min.css'; -import 'tooltipster/dist/js/tooltipster.bundle.min.js'; -import 'tooltipster/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css'; +import 'leaflet/dist/leaflet.css'; +import L from 'leaflet/dist/leaflet'; -import './image-map.scss'; - -const pinShape = ''; -const circleShape = ''; -const pinSvg = `${pinShape}${circleShape}`; +const maxZoom = 4; export default class TbImageMap { @@ -31,10 +26,9 @@ export default class TbImageMap { this.ctx = ctx; this.tooltips = []; - $containerElement.append('
'); + this.$containerElement = $containerElement; + this.$containerElement.css('background', '#fff'); - this.imageMapContainer = angular.element('#image-map-container', $containerElement); - this.imageMap = angular.element('#image-map', $containerElement); this.aspect = 0; this.width = 0; this.height = 0; @@ -108,7 +102,7 @@ export default class TbImageMap { if (keyData && keyData.data && keyData.data[0]) { var attrValue = keyData.data[0][1]; if (attrValue && attrValue.length) { - this.loadImage(attrValue, this.aspect > 0 ? null : this.initCallback); + this.loadImage(attrValue, this.aspect > 0 ? null : this.initCallback, true); } } } @@ -117,72 +111,145 @@ export default class TbImageMap { } } - loadImage(imageUrl, initCallback) { + loadImage(imageUrl, initCallback, updateImage) { if (!imageUrl) { imageUrl = 'data:image/svg+xml;base64,PHN2ZyBpZD0ic3ZnMiIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTAwIiB3aWR0aD0iMTAwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgdmlld0JveD0iMCAwIDEwMCAxMDAiPgogPGcgaWQ9ImxheWVyMSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAtOTUyLjM2KSI+CiAgPHJlY3QgaWQ9InJlY3Q0Njg0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBoZWlnaHQ9Ijk5LjAxIiB3aWR0aD0iOTkuMDEiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiB5PSI5NTIuODYiIHg9Ii40OTUwNSIgc3Ryb2tlLXdpZHRoPSIuOTkwMTAiIGZpbGw9IiNlZWUiLz4KICA8dGV4dCBpZD0idGV4dDQ2ODYiIHN0eWxlPSJ3b3JkLXNwYWNpbmc6MHB4O2xldHRlci1zcGFjaW5nOjBweDt0ZXh0LWFuY2hvcjptaWRkbGU7dGV4dC1hbGlnbjpjZW50ZXIiIGZvbnQtd2VpZ2h0PSJib2xkIiB4bWw6c3BhY2U9InByZXNlcnZlIiBmb250LXNpemU9IjEwcHgiIGxpbmUtaGVpZ2h0PSIxMjUlIiB5PSI5NzAuNzI4MDkiIHg9IjQ5LjM5NjQ3NyIgZm9udC1mYW1pbHk9IlJvYm90byIgZmlsbD0iIzY2NjY2NiI+PHRzcGFuIGlkPSJ0c3BhbjQ2OTAiIHg9IjUwLjY0NjQ3NyIgeT0iOTcwLjcyODA5Ij5JbWFnZSBiYWNrZ3JvdW5kIDwvdHNwYW4+PHRzcGFuIGlkPSJ0c3BhbjQ2OTIiIHg9IjQ5LjM5NjQ3NyIgeT0iOTgzLjIyODA5Ij5pcyBub3QgY29uZmlndXJlZDwvdHNwYW4+PC90ZXh0PgogIDxyZWN0IGlkPSJyZWN0NDY5NCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaGVpZ2h0PSIxOS4zNiIgd2lkdGg9IjY5LjM2IiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgeT0iOTkyLjY4IiB4PSIxNS4zMiIgc3Ryb2tlLXdpZHRoPSIuNjM5ODYiIGZpbGw9Im5vbmUiLz4KIDwvZz4KPC9zdmc+Cg=='; } - this.imageMap.css({backgroundImage: 'url('+imageUrl+')'}); + this.imageUrl = imageUrl; var imageMap = this; var testImage = document.createElement('img'); // eslint-disable-line testImage.style.visibility = 'hidden'; testImage.onload = function() { imageMap.aspect = testImage.width / testImage.height; document.body.removeChild(testImage); //eslint-disable-line - imageMap.onresize(); + imageMap.onresize(updateImage); if (initCallback) { setTimeout(initCallback, 0); //eslint-disable-line - } else { - imageMap.onresize(); } } document.body.appendChild(testImage); //eslint-disable-line testImage.src = imageUrl; } - onresize() { + onresize(updateImage) { if (this.aspect > 0) { - var width = this.imageMapContainer.width(); + var width = this.$containerElement.width(); if (width > 0) { var height = width / this.aspect; - var imageMapHeight = this.imageMapContainer.height(); + var imageMapHeight = this.$containerElement.height(); if (imageMapHeight > 0 && height > imageMapHeight) { height = imageMapHeight; width = height * this.aspect; } + width *= maxZoom; + var prevWidth = this.width; + var prevHeight = this.height; if (this.width !== width) { this.width = width; this.height = width / this.aspect; - this.imageMap.css({width: this.width, height: this.height}); - this.markers.forEach((marker) => { - this.updateMarkerDimensions(marker); - }); + if (!this.map) { + this.initMap(updateImage); + } else { + var lastCenterPos = this.latLngToPoint(this.map.getCenter()); + lastCenterPos.x /= prevWidth; + lastCenterPos.y /= prevHeight; + this.updateBounds(updateImage, lastCenterPos); + this.map.invalidateSize(true); + this.updateMarkers(); + } } } } } - inited() { - return this.aspect > 0 ? true : false; - } - - updateMarkerLabel(marker, settings) { - if (settings.showLabel) { - marker.labelElement.css({color: settings.labelColor}); - marker.labelElement.html(`${settings.labelText}`); + initMap(updateImage) { + if (!this.map && this.aspect > 0) { + var center = this.pointToLatLng(this.width/2, this.height/2); + this.map = L.map(this.$containerElement[0], { + minZoom: 1, + maxZoom: maxZoom, + center: center, + zoom: 1, + crs: L.CRS.Simple, + attributionControl: false + }); + this.updateBounds(updateImage); + this.updateMarkers(); } } + pointToLatLng(x, y) { + return L.CRS.Simple.pointToLatLng({x:x, y:y}, maxZoom-1); + } + + latLngToPoint(latLng) { + return L.CRS.Simple.latLngToPoint(latLng, maxZoom-1); + } + + inited() { + return angular.isDefined(this.map); + } + + updateBounds(updateImage, lastCenterPos) { + var w = this.width; + var h = this.height; + var southWest = this.pointToLatLng(0, h); + var northEast = this.pointToLatLng(w, 0); + var bounds = new L.LatLngBounds(southWest, northEast); + + if (updateImage && this.imageOverlay) { + this.imageOverlay.remove(); + this.imageOverlay = null; + } + + if (this.imageOverlay) { + this.imageOverlay.setBounds(bounds); + } else { + this.imageOverlay = L.imageOverlay(this.imageUrl, bounds).addTo(this.map); + } + var padding = 200 * maxZoom; + southWest = this.pointToLatLng(-padding, h + padding); + northEast = this.pointToLatLng(w+padding, -padding); + var maxBounds = new L.LatLngBounds(southWest, northEast); + this.map.setMaxBounds(maxBounds); + if (lastCenterPos) { + lastCenterPos.x *= w; + lastCenterPos.y *= h; + var center = this.pointToLatLng(lastCenterPos.x, lastCenterPos.y); + this.ctx.$scope.$injector.get('$mdUtil').nextTick(() => { + this.map.panTo(center, {animate: false}); + }); + } + } + + updateMarkerLabel(marker, settings) { + marker.unbindTooltip(); + marker.bindTooltip('
'+settings.labelText+'
', + { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); + } + updateMarkerColor(marker, color) { - marker.pinSvgElement.css({fill: 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] + }); + marker.setIcon(icon); } updateMarkerImage(marker, settings, image, maxSize) { - var testImage = new Image(); // eslint-disable-line no-undef - var imageMap = this; + 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; @@ -190,74 +257,79 @@ export default class TbImageMap { width = maxSize * aspect; height = maxSize; } - var size = Math.max(width, height); - marker.size = size; - if (marker.imgElement) { - marker.imgElement.remove(); + var icon = L.icon({ + iconUrl: image, + iconSize: [width, height], + iconAnchor: [marker.offsetX * width, marker.offsetY * height], + popupAnchor: [0, -height] + }); + marker.setIcon(icon); + if (settings.showLabel) { + marker.unbindTooltip(); + marker.tooltipOffset = [0, -height * marker.offsetY + 10]; + marker.bindTooltip('
'+settings.labelText+'
', + { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); } - marker.imgElement = angular.element(``); - var left = (size - width)/2; - var top = (size - height)/2; - marker.imgElement.css({width: width, height: height, left: left, top: top}); - marker.pinElement.append(marker.imgElement); - imageMap.updateMarkerDimensions(marker); } + document.body.appendChild(testImage); //eslint-disable-line testImage.src = image; } - updateMarkerDimensions(marker) { - var pinElement = marker.pinElement; - pinElement.css({width: marker.size, height: marker.size}); - var left = marker.x * this.width - marker.size * marker.offsetX; - var top = marker.y * this.height - marker.size * marker.offsetY; - pinElement.css({left: left, top: top}); - } - createMarker(position, settings, onClickListener, markerArgs) { - var marker = { - size: 34, - position: position - }; + var height = 34; + var pinColor = settings.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], + popupAnchor: [0, -34], + shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', + shadowSize: [40, 37], + shadowAnchor: [12, 35] + }); + var pos = this.posFunction(position.x, position.y); - marker.x = pos.x; - marker.y = pos.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); + marker.position = position; marker.offsetX = settings.markerOffsetX; marker.offsetY = settings.markerOffsetY; - marker.pinElement = angular.element('
'); if (settings.showLabel) { - marker.labelElement = angular.element(`
${settings.labelText}
`); - marker.labelElement.css({color: settings.labelColor}); - marker.pinElement.append(marker.labelElement); + marker.tooltipOffset = [0, -height * marker.offsetY + 10]; + marker.bindTooltip('
'+settings.labelText+'
', + { className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); } - marker.imgElement = angular.element(pinSvg); - marker.pinSvgElement = marker.imgElement.find('#pin'); - marker.pinElement.append(marker.imgElement); - - marker.pinSvgElement.css({fill: settings.color}); - - this.updateMarkerDimensions(marker); - - this.imageMap.append(marker.pinElement); - if (settings.useMarkerImage) { this.updateMarkerImage(marker, settings, settings.markerImage, settings.markerImageSize || 34); } if (settings.displayTooltip) { - this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, markerArgs); + this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); } if (onClickListener) { - marker.pinElement.on('click', onClickListener); + marker.on('click', onClickListener); } - this.markers.push(marker); return marker; } + updateMarkers() { + this.markers.forEach((marker) => { + this.updateMarkerLocation(marker); + }); + } + + updateMarkerLocation(marker) { + this.setMarkerPosition(marker, marker.position); + } + removeMarker(marker) { + this.map.removeLayer(marker); var index = this.markers.indexOf(marker); if (index > -1) { marker.pinElement.remove(); @@ -265,9 +337,10 @@ export default class TbImageMap { } } - createTooltip(marker, pattern, replaceInfo, markerArgs) { - var popup = new Popup(this.ctx, marker.pinElement); + createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) { + var popup = L.popup(); popup.setContent(''); + marker.bindPopup(popup, {autoClose: autoClose, closeOnClick: false}); this.tooltips.push( { markerArgs: markerArgs, popup: popup, @@ -302,9 +375,10 @@ export default class TbImageMap { setMarkerPosition(marker, position) { marker.position = position; var pos = this.posFunction(position.x, position.y); - marker.x = pos.x; - marker.y = pos.y; - this.updateMarkerDimensions(marker); + var x = pos.x * this.width; + var y = pos.y * this.height; + var location = this.pointToLatLng(x, y); + marker.setLatLng(location); } getPolylineLatLngs(/*polyline*/) { @@ -340,38 +414,3 @@ class Position { return loc && loc.x == this.x && loc.y == this.y; } } - -class Popup { - constructor(ctx, anchor) { - anchor.tooltipster( - { - theme: 'tooltipster-shadow', - delay: 100, - trigger: 'custom', - triggerOpen: { - click: true, - tap: true - }, - trackOrigin: true - } - ); - this.tooltip = anchor.tooltipster('instance'); - var contentElement = angular.element('
' + - '×' + - '
' + - '
' + - '
'); - var $compile = ctx.$scope.$injector.get('$compile'); - $compile(contentElement)(ctx.$scope); - var popup = this; - contentElement.find('#close').on('click', function() { - popup.tooltip.close(); - }); - this.content = contentElement.find('#tooltip-content'); - this.tooltip.content(contentElement); - } - - setContent(content) { - this.content.html(content); - } -} diff --git a/ui/src/app/widget/lib/image-map.scss b/ui/src/app/widget/lib/image-map.scss deleted file mode 100644 index b41266dd14..0000000000 --- a/ui/src/app/widget/lib/image-map.scss +++ /dev/null @@ -1,98 +0,0 @@ -/** - * Copyright © 2016-2017 The Thingsboard Authors - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -.image-map-pin-tooltip { - pointer-events: all; - padding: 5px; - .image-map-pin-tooltip-close-button { - cursor: pointer; - position: absolute; - top: 0; - right: 0; - padding: 6px 6px 0 0; - border: none; - text-align: center; - width: 20px; - height: 16px; - font: 18px/16px Tahoma, Verdana, sans-serif; - color: #b0b0b0; - text-decoration: none; - font-weight: bold; - background: transparent; - &:hover { - color: #919191; - } - } - #tooltip-content { - line-height: normal; - font-size: 13px; - font-weight: 300; - color: #333; - } -} - -#image-map-container { - width: 100%; - height: 100%; - #image-map { - color: rgba(0, 0, 0, 0.870588); - position: relative; - margin: auto; - background: transparent no-repeat scroll 0 0; - background-size: 100% 100%; - - &.is-pointer { - cursor: pointer !important; - } - - .movable { - cursor: move; - } - - .image-map-pin { - outline: none; - position: absolute; - background: none; - .image-map-pin-title { - position: relative; - white-space: nowrap; - text-align: center; - line-height: 1.5; - font-size: 12px; - font-weight: 400; - top: -20px; - &:before { - content: ""; - margin-left: -100%; - } - &:after { - content: ""; - margin-right: -100%; - } - } - .image-map-pin-image { - position: absolute; - pointer-events: none; - top: 0; - bottom: 0; - right: 0; - left: 0; - width: 100%; - height: 100%; - } - } - } -} diff --git a/ui/src/app/widget/lib/map-widget2.js b/ui/src/app/widget/lib/map-widget2.js index abd3e92525..96fb698b73 100644 --- a/ui/src/app/widget/lib/map-widget2.js +++ b/ui/src/app/widget/lib/map-widget2.js @@ -131,6 +131,7 @@ export default class TbMapWidgetV2 { this.locationSettings.showLabel = this.ctx.settings.showLabel !== false; this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false; + this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false; this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000', this.locationSettings.label = this.ctx.settings.label || "${entityName}"; this.locationSettings.color = this.ctx.settings.color ? tinycolor(this.ctx.settings.color).toHexString() : "#FE7569"; @@ -586,6 +587,11 @@ const commonMapSettingsSchema = "type":"boolean", "default":true }, + "autocloseTooltip": { + "title": "Auto-close tooltips", + "type":"boolean", + "default":true + }, "tooltipPattern":{ "title":"Tooltip (for ex. 'Text ${keyName} units.' or Link text')", "type":"string", @@ -641,6 +647,7 @@ const commonMapSettingsSchema = "showLabel", "label", "showTooltip", + "autocloseTooltip", { "key": "tooltipPattern", "type": "textarea" @@ -748,6 +755,11 @@ const imageMapSettingsSchema = "type":"boolean", "default":true }, + "autocloseTooltip": { + "title": "Auto-close tooltips", + "type":"boolean", + "default":true + }, "tooltipPattern":{ "title":"Tooltip (for ex. 'Text ${keyName} units.' or Link text')", "type":"string", @@ -822,6 +834,7 @@ const imageMapSettingsSchema = "showLabel", "label", "showTooltip", + "autocloseTooltip", { "key": "tooltipPattern", "type": "textarea" diff --git a/ui/src/app/widget/lib/openstreet-map.js b/ui/src/app/widget/lib/openstreet-map.js index 32cea20e12..137fabf3a6 100644 --- a/ui/src/app/widget/lib/openstreet-map.js +++ b/ui/src/app/widget/lib/openstreet-map.js @@ -118,7 +118,7 @@ export default class TbOpenStreetMap { } if (settings.displayTooltip) { - this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, markerArgs); + this.createTooltip(marker, settings.tooltipPattern, settings.tooltipReplaceInfo, settings.autocloseTooltip, markerArgs); } if (onClickListener) { @@ -132,10 +132,10 @@ export default class TbOpenStreetMap { this.map.removeLayer(marker); } - createTooltip(marker, pattern, replaceInfo, markerArgs) { + createTooltip(marker, pattern, replaceInfo, autoClose, markerArgs) { var popup = L.popup(); popup.setContent(''); - marker.bindPopup(popup, {autoClose: false, closeOnClick: false}); + marker.bindPopup(popup, {autoClose: autoClose, closeOnClick: false}); this.tooltips.push( { markerArgs: markerArgs, popup: popup,