highlight markers

add .umap-icon-active class for currently selected marker icon.
CSS styles override the marker styles to display
* in the foreground
* with full opacity
* with larger sizes where possible (ball and circle)

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 () {

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',

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