diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js index 6f13e777..60dbc112 100644 --- a/umap/static/umap/js/umap.features.js +++ b/umap/static/umap/js/umap.features.js @@ -562,6 +562,10 @@ L.U.Marker = L.Marker.extend({ if (!this.isReadOnly()) this.on('mouseover', this._enableDragging) this.on('mouseout', this._onMouseOut) this._popupHandlersAdded = true // prevent Leaflet from binding event on bindPopup + this.once('add', () => { + this.on('popupopen', this.options.icon.highlight, this.options.icon) + this.on('popupclose', this.options.icon.resetHighlight, this.options.icon) + }) }, hasGeom: function () { diff --git a/umap/static/umap/js/umap.icon.js b/umap/static/umap/js/umap.icon.js index a77de8f0..5198cb26 100644 --- a/umap/static/umap/js/umap.icon.js +++ b/umap/static/umap/js/umap.icon.js @@ -38,6 +38,13 @@ L.U.Icon = L.DivIcon.extend({ formatUrl: function (url, feature) { return L.Util.greedyTemplate(url || '', feature ? feature.extendedProperties() : {}) }, + + highlight: function () { + L.DomUtil.addClass(this.elements.main, 'umap-icon-active') + }, + resetHighlight: function () { + L.DomUtil.removeClass(this.elements.main, 'umap-icon-active') + }, }) L.U.Icon.Default = L.U.Icon.extend({ @@ -95,7 +102,6 @@ L.U.Icon.Default = L.U.Icon.extend({ L.U.Icon.Circle = L.U.Icon.extend({ initialize: function (map, options) { const default_options = { - iconAnchor: new L.Point(6, 6), popupAnchor: new L.Point(0, -6), tooltipAnchor: new L.Point(6, 0), className: 'umap-circle-icon', diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index cef43e39..795b6914 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -1143,6 +1143,10 @@ a.add-datalayer:hover, text-align: center; line-height: 32px; } +.umap-div-icon.umap-icon-active .icon_container { + box-shadow: 7px 10px 10px 1px white; + opacity: 1.0!important; +} .umap-div-icon .icon_container img { vertical-align: middle; max-width: 24px!important; /* leaflet.css has !important, so... */ @@ -1159,6 +1163,9 @@ a.add-datalayer:hover, opacity: 0.9; /*box-shadow: 4px 8px 6px -3px black;*/ } +.umap-div-icon.umap-icon-active .icon_arrow { + opacity: 1.0!important; +} .umap-drop-icon .icon_arrow { border-left: 10px solid transparent; border-right: 10px solid transparent; @@ -1169,6 +1176,9 @@ a.add-datalayer:hover, top: -4px; width: 0; } +.umap-drop-icon.umap-icon-active .icon_arrow { + opacity: 1.0!important; +} .umap-drop-icon .icon_container { background-color: #2470B5; border-radius: 16px 16px 16px 16px; @@ -1179,6 +1189,10 @@ a.add-datalayer:hover, text-align: center; width: 32px; } +.umap-drop-icon.umap-icon-active .icon_container { + box-shadow: 4px 11px 10px -2px white; + opacity: 1.0!important; +} .umap-drop-icon .icon_container img { vertical-align: middle; max-width: 24px !important; @@ -1193,9 +1207,18 @@ a.add-datalayer:hover, .umap-circle-icon { border: 1px solid white; border-radius: 10px 10px 10px 10px; + margin-left: -6px; + margin-top: -6px; height: 12px; width: 12px; } +.umap-circle-icon.umap-icon-active { + height: 16px; + margin-left: -8px; + margin-top: -8px; + opacity: 1.0!important; + width: 16px; +} .umap-ball-icon .icon_container { background-color: darkblue; background: radial-gradient(circle at 6px 38% , white -4px, darkblue 8px) repeat scroll 0 0 transparent; @@ -1206,6 +1229,14 @@ a.add-datalayer:hover, text-align: center; width: 16px; } +.umap-ball-icon.umap-icon-active .icon_container { + box-shadow: 1px 23px 6px -3px white; + margin-left: -2px; + margin-top: -4px; + height: 20px; + opacity: 1.0!important; + width: 20px; +} .umap-ball-icon .icon_arrow { background-color: black; height: 16px; @@ -1215,6 +1246,10 @@ a.add-datalayer:hover, top: -1px; width: 2px; } +.umap-icon-active { + z-index: 9500!important; + opacity: 1.0!important; +} .umap-edit-enabled .readonly { cursor: not-allowed; }