From 76962031594ddbbe54583a12692967885d78d830 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Thu, 5 Oct 2023 20:57:53 +0200
Subject: [PATCH 01/14] highlight selected path

when opening a popup increase opacity and weight.
In maps with multiple lines one can see much easier, where the line
starts and ends.
---
 umap/static/umap/js/umap.features.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index 7de50be8..6f13e777 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -816,6 +816,20 @@ L.U.PathMixin = {
     L.U.FeatureMixin.endEdit.call(this)
   },
 
+  highlightPath: function () {
+    this.parentClass.prototype.setStyle.call(this, {
+      opacity: 1.0,
+      weight: 1.3 * this.getDynamicOption('weight'),
+    })
+  },
+
+  resetPath: function () {
+    this.parentClass.prototype.setStyle.call(this, {
+      opacity: this.getDynamicOption('opacity'),
+      weight: this.getDynamicOption('weight'),
+    })
+  },
+
   _onMouseOver: function () {
     if (this.map.measureTools && this.map.measureTools.enabled()) {
       this.map.ui.tooltip({ content: this.getMeasure(), anchor: this })
@@ -829,6 +843,8 @@ L.U.PathMixin = {
     this.on('mouseover', this._onMouseOver)
     this.on('edit', this.makeDirty)
     this.on('drag editable:drag', this._onDrag)
+    this.on('popupopen', this.highlightPath)
+    this.on('popupclose', this.resetPath)
   },
 
   _onDrag: function () {

From 3594bc260591d9bc390171f580b253cdd2c58368 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Sun, 8 Oct 2023 20:02:20 +0200
Subject: [PATCH 02/14] 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 |  4 ++++
 umap/static/umap/js/umap.icon.js     |  8 ++++++-
 umap/static/umap/map.css             | 35 ++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)

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

From 836c17f2e8451e220275c5f0be416b8e95e42a41 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Tue, 10 Oct 2023 10:01:16 +0200
Subject: [PATCH 03/14] fire events from Popup Panel

to also highlight path and markers when using the side panel.
Therefore we duplicate the event code from the base class.
---
 umap/static/umap/js/umap.popup.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index 9fd96b3c..d5836d3e 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -68,10 +68,28 @@ L.U.Popup.Panel = L.U.Popup.extend({
       data: { html: this._content },
       actions: [this.allButton()],
     })
+
+    // fire events as in base class Popup.js:onAdd
+    map.fire('popupopen', {popup: this})
+    if (this._source) {
+        this._source.fire('popupopen', {popup: this}, true);
+        if (!(this._source instanceof L.Path)) {
+            this._source.on('preclick', L.DomEvent.stopPropagation);
+        }
+    }
   },
 
   onRemove: function (map) {
     map.ui.closePanel()
+
+    // fire events as in base class Popup.js:onRemove
+    map.fire('popupclose', {popup: this});
+    if (this._source) {
+        this._source.fire('popupclose', {popup: this}, true);
+        if (!(this._source instanceof L.Path)) {
+            this._source.off('preclick', L.DomEvent.stopPropagation);
+        }
+    }
   },
 
   update: function () {},

From 9ef09512db7b2bb57e1e0517a41e620c26088e02 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Tue, 10 Oct 2023 10:47:36 +0200
Subject: [PATCH 04/14] highlight: increase fillOpacity for polygons

sqrt gives larger increase for low opacities like 0.2
while preserving some (tiny) shine-through for large values like 0.8
and is limited to the desired range of (0,1]
---
 umap/static/umap/js/umap.features.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index 60dbc112..e058ba0d 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -822,6 +822,7 @@ L.U.PathMixin = {
 
   highlightPath: function () {
     this.parentClass.prototype.setStyle.call(this, {
+      fillOpacity: Math.sqrt(this.getDynamicOption('fillOpacity')),
       opacity: 1.0,
       weight: 1.3 * this.getDynamicOption('weight'),
     })
@@ -829,6 +830,7 @@ L.U.PathMixin = {
 
   resetPath: function () {
     this.parentClass.prototype.setStyle.call(this, {
+      fillOpacity: this.getDynamicOption('fillOpacity'),
       opacity: this.getDynamicOption('opacity'),
       weight: this.getDynamicOption('weight'),
     })

From 65ba1cd3ee0f1b8e227e7a19a02b7d8c66030a02 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Wed, 11 Oct 2023 19:56:34 +0200
Subject: [PATCH 05/14] simply call _redraw to reset style

thanks for the review to @yohanboniface
---
 umap/static/umap/js/umap.features.js | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index e058ba0d..cf256d09 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -828,14 +828,6 @@ L.U.PathMixin = {
     })
   },
 
-  resetPath: function () {
-    this.parentClass.prototype.setStyle.call(this, {
-      fillOpacity: this.getDynamicOption('fillOpacity'),
-      opacity: this.getDynamicOption('opacity'),
-      weight: this.getDynamicOption('weight'),
-    })
-  },
-
   _onMouseOver: function () {
     if (this.map.measureTools && this.map.measureTools.enabled()) {
       this.map.ui.tooltip({ content: this.getMeasure(), anchor: this })
@@ -850,7 +842,7 @@ L.U.PathMixin = {
     this.on('edit', this.makeDirty)
     this.on('drag editable:drag', this._onDrag)
     this.on('popupopen', this.highlightPath)
-    this.on('popupclose', this.resetPath)
+    this.on('popupclose', this._redraw)
   },
 
   _onDrag: function () {

From 5778c4ff653638de47e60f0d1218196391cec990 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Tue, 17 Oct 2023 21:45:05 +0200
Subject: [PATCH 06/14] add testcase for marker highlight

---
 umap/static/umap/test/Feature.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/umap/static/umap/test/Feature.js b/umap/static/umap/test/Feature.js
index f22d0c7b..88d3e0b1 100644
--- a/umap/static/umap/test/Feature.js
+++ b/umap/static/umap/test/Feature.js
@@ -223,6 +223,16 @@ describe('L.U.FeatureMixin', function () {
     })
   })
 
+  describe('#highlight()', function () {
+    it('should highlight marker on click', function () {
+      assert.notOk(qs('.umap-icon-active'))
+      happen.click(qs('div.leaflet-marker-icon'))
+      assert.ok(qs('.umap-icon-active'))
+      happen.click(qs('#map')) // Close popup
+      assert.notOk(qs('.umap-icon-active'))
+    })
+  })
+
   describe('#tooltip', function () {
     it('should have a tooltip when active and allow variables', function () {
       this.map.options.showLabel = true

From 88746d593c7ce9b221c8b72ddf6df92ac98aba19 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Thu, 19 Oct 2023 20:57:40 +0200
Subject: [PATCH 07/14] move higlight() into Marker class

options.icon pointer is invalid after hide() show() cycle.
---
 umap/static/umap/js/umap.features.js | 14 ++++++++++----
 umap/static/umap/js/umap.icon.js     |  7 -------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index cf256d09..a548f3a5 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -549,6 +549,14 @@ L.U.Marker = L.Marker.extend({
     this.setIcon(this.getIcon())
   },
 
+  highlight: function () {
+    L.DomUtil.addClass(this.options.icon.elements.main, 'umap-icon-active')
+  },
+
+  resetHighlight: function () {
+    L.DomUtil.removeClass(this.options.icon.elements.main, 'umap-icon-active')
+  },
+
   addInteractions: function () {
     L.U.FeatureMixin.addInteractions.call(this)
     this.on(
@@ -562,10 +570,8 @@ 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)
-    })
+    this.on('popupopen', this.highlight)
+    this.on('popupclose', this.resetHighlight)
   },
 
   hasGeom: function () {
diff --git a/umap/static/umap/js/umap.icon.js b/umap/static/umap/js/umap.icon.js
index 5198cb26..87fb7e36 100644
--- a/umap/static/umap/js/umap.icon.js
+++ b/umap/static/umap/js/umap.icon.js
@@ -38,13 +38,6 @@ 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({

From 7d6830c7c63be093b9978f03e533bbca06a25411 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Thu, 19 Oct 2023 21:08:57 +0200
Subject: [PATCH 08/14] add test case for 88746d5

---
 umap/static/umap/test/Feature.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/umap/static/umap/test/Feature.js b/umap/static/umap/test/Feature.js
index 88d3e0b1..228e2bb1 100644
--- a/umap/static/umap/test/Feature.js
+++ b/umap/static/umap/test/Feature.js
@@ -231,6 +231,13 @@ describe('L.U.FeatureMixin', function () {
       happen.click(qs('#map')) // Close popup
       assert.notOk(qs('.umap-icon-active'))
     })
+
+    it('should still highlight marker after hide() and show()', function () {
+      this.datalayer.hide()
+      this.datalayer.show()
+      happen.click(qs('div.leaflet-marker-icon'))
+      assert.ok(qs('.umap-icon-active'))
+    })
   })
 
   describe('#tooltip', function () {

From b149a69efde75207b2b36cfc651cb9aee16d95bd Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Thu, 19 Oct 2023 21:31:52 +0200
Subject: [PATCH 09/14] add test case for path higlight

therefore setting opacity of the example path to 0.6
---
 umap/static/umap/test/Feature.js    | 6 ++++++
 umap/static/umap/test/Map.Export.js | 2 ++
 umap/static/umap/test/_pre.js       | 2 +-
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/umap/static/umap/test/Feature.js b/umap/static/umap/test/Feature.js
index 228e2bb1..7ef10051 100644
--- a/umap/static/umap/test/Feature.js
+++ b/umap/static/umap/test/Feature.js
@@ -238,6 +238,12 @@ describe('L.U.FeatureMixin', function () {
       happen.click(qs('div.leaflet-marker-icon'))
       assert.ok(qs('.umap-icon-active'))
     })
+
+    it('should highlight path', function () {
+      happen.click(qs('path[stroke-opacity="0.6"]'))
+      var path = qs('path[stroke-opacity="1"]')
+      assert.ok(path)
+    })
   })
 
   describe('#tooltip', function () {
diff --git a/umap/static/umap/test/Map.Export.js b/umap/static/umap/test/Map.Export.js
index 09ce3588..23028192 100644
--- a/umap/static/umap/test/Map.Export.js
+++ b/umap/static/umap/test/Map.Export.js
@@ -64,6 +64,7 @@ describe('L.U.Map.Export', function () {
             properties: {
               _umap_options: {
                 fill: false,
+                opacity: 0.6,
               },
               name: 'test',
             },
@@ -187,6 +188,7 @@ describe('L.U.Map.Export', function () {
                 properties: {
                   _umap_options: {
                     fill: false,
+                    opacity: 0.6,
                   },
                   name: 'test',
                 },
diff --git a/umap/static/umap/test/_pre.js b/umap/static/umap/test/_pre.js
index dda0c79e..fa3ad7fe 100644
--- a/umap/static/umap/test/_pre.js
+++ b/umap/static/umap/test/_pre.js
@@ -254,7 +254,7 @@ var RESPONSES = {
         },
         type: 'Feature',
         id: 20,
-        properties: { _umap_options: { fill: false }, name: 'test' },
+        properties: { _umap_options: { fill: false, opacity: 0.6 }, name: 'test' },
       },
       {
         geometry: {

From 86b27ceb0ff4ae946f57deed1d6d6a82e72a54f9 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Sun, 22 Oct 2023 19:49:52 +0200
Subject: [PATCH 10/14] pin marker: fix ball 'square'ish

---
 umap/static/umap/map.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 795b6914..7012e142 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1230,6 +1230,7 @@ a.add-datalayer:hover,
     width: 16px;
 }
 .umap-ball-icon.umap-icon-active .icon_container {
+    border-radius: 10px 10px 10px 10px;
     box-shadow: 1px 23px 6px -3px white;
     margin-left: -2px;
     margin-top: -4px;

From 9b22cb4ab71d8b7db678a25c370a0c2402a52cba Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Sun, 22 Oct 2023 20:52:35 +0200
Subject: [PATCH 11/14] prettier.js

fixup 836c17f
---
 umap/static/umap/js/umap.popup.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/umap/static/umap/js/umap.popup.js b/umap/static/umap/js/umap.popup.js
index d5836d3e..c79c618b 100644
--- a/umap/static/umap/js/umap.popup.js
+++ b/umap/static/umap/js/umap.popup.js
@@ -70,12 +70,12 @@ L.U.Popup.Panel = L.U.Popup.extend({
     })
 
     // fire events as in base class Popup.js:onAdd
-    map.fire('popupopen', {popup: this})
+    map.fire('popupopen', { popup: this })
     if (this._source) {
-        this._source.fire('popupopen', {popup: this}, true);
-        if (!(this._source instanceof L.Path)) {
-            this._source.on('preclick', L.DomEvent.stopPropagation);
-        }
+      this._source.fire('popupopen', { popup: this }, true)
+      if (!(this._source instanceof L.Path)) {
+        this._source.on('preclick', L.DomEvent.stopPropagation)
+      }
     }
   },
 
@@ -83,12 +83,12 @@ L.U.Popup.Panel = L.U.Popup.extend({
     map.ui.closePanel()
 
     // fire events as in base class Popup.js:onRemove
-    map.fire('popupclose', {popup: this});
+    map.fire('popupclose', { popup: this })
     if (this._source) {
-        this._source.fire('popupclose', {popup: this}, true);
-        if (!(this._source instanceof L.Path)) {
-            this._source.off('preclick', L.DomEvent.stopPropagation);
-        }
+      this._source.fire('popupclose', { popup: this }, true)
+      if (!(this._source instanceof L.Path)) {
+        this._source.off('preclick', L.DomEvent.stopPropagation)
+      }
     }
   },
 
@@ -125,7 +125,7 @@ L.U.PopupTemplate.Default = L.Class.extend({
       properties
     )
     content = L.Util.greedyTemplate(template, properties)
-    content = L.Util.toHTML(content, {target: target})
+    content = L.Util.toHTML(content, { target: target })
     container.innerHTML = content
     return container
   },

From af969eb5c07a951167e464b3c8c89c6524a6c893 Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Wed, 1 Nov 2023 14:32:09 +0100
Subject: [PATCH 12/14] incorporate review feedback for markers

* drop and div marker increased to 36px size
* adjust drop arrow accordingly
* black box-shadow with increased spread
---
 umap/static/umap/map.css | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 7012e142..35de2c82 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1144,8 +1144,14 @@ a.add-datalayer:hover,
     line-height: 32px;
 }
 .umap-div-icon.umap-icon-active .icon_container {
-    box-shadow: 7px 10px 10px 1px white;
+    border-radius: 5px;
+    box-shadow: 7px 10px 10px -1px black;
+    height: 36px;
+    line-height: 36px;
+    margin-left: -2px;
+    margin-top: -4px;
     opacity: 1.0!important;
+    width: 36px;
 }
 .umap-div-icon .icon_container img {
     vertical-align: middle;
@@ -1161,7 +1167,6 @@ a.add-datalayer:hover,
     position: relative;
     width: 0;
     opacity: 0.9;
-    /*box-shadow: 4px 8px 6px -3px black;*/
 }
 .umap-div-icon.umap-icon-active .icon_arrow {
     opacity: 1.0!important;
@@ -1177,6 +1182,10 @@ a.add-datalayer:hover,
     width: 0;
 }
 .umap-drop-icon.umap-icon-active .icon_arrow {
+    border-left-width: 12px;
+    border-right-width: 12px;
+    border-top-width: 18px;
+    left: 4px;
     opacity: 1.0!important;
 }
 .umap-drop-icon .icon_container {
@@ -1190,8 +1199,14 @@ a.add-datalayer:hover,
     width: 32px;
 }
 .umap-drop-icon.umap-icon-active .icon_container {
-    box-shadow: 4px 11px 10px -2px white;
+    box-shadow: 4px 11px 10px -2px black;
+    border-radius: 18px 18px 18px 18px;
+    height: 36px;
+    line-height: 36px;
+    margin-left: -2px;
+    margin-top: -6px;
     opacity: 1.0!important;
+    width: 36px;
 }
 .umap-drop-icon .icon_container img {
     vertical-align: middle;
@@ -1231,7 +1246,7 @@ a.add-datalayer:hover,
 }
 .umap-ball-icon.umap-icon-active .icon_container {
     border-radius: 10px 10px 10px 10px;
-    box-shadow: 1px 23px 6px -3px white;
+    box-shadow: 1px 23px 7px -1px black;
     margin-left: -2px;
     margin-top: -4px;
     height: 20px;

From 952385b1cdf1493b294115ee3f12d77a0a7ebe0c Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Wed, 1 Nov 2023 15:55:06 +0100
Subject: [PATCH 13/14] default fill-opacity for polygons

'null' is not a sensible default
---
 umap/static/umap/js/umap.core.js     | 2 +-
 umap/static/umap/js/umap.features.js | 2 +-
 umap/static/umap/test/Feature.js     | 6 ++++++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index a9398945..fbbbd901 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -161,7 +161,7 @@ L.Util.detectFileType = (f) => {
 }
 
 L.Util.usableOption = (options, option) =>
-  options[option] !== undefined && options[option] !== ''
+  options[option] !== undefined && options[option] !== '' && options[option] !== null
 
 L.Util.greedyTemplate = (str, data, ignore) => {
   function getValue(data, path) {
diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js
index a548f3a5..76cbdb7f 100644
--- a/umap/static/umap/js/umap.features.js
+++ b/umap/static/umap/js/umap.features.js
@@ -828,7 +828,7 @@ L.U.PathMixin = {
 
   highlightPath: function () {
     this.parentClass.prototype.setStyle.call(this, {
-      fillOpacity: Math.sqrt(this.getDynamicOption('fillOpacity')),
+      fillOpacity: Math.sqrt(this.getDynamicOption('fillOpacity', 1.0)),
       opacity: 1.0,
       weight: 1.3 * this.getDynamicOption('weight'),
     })
diff --git a/umap/static/umap/test/Feature.js b/umap/static/umap/test/Feature.js
index 7ef10051..688e10e5 100644
--- a/umap/static/umap/test/Feature.js
+++ b/umap/static/umap/test/Feature.js
@@ -244,6 +244,12 @@ describe('L.U.FeatureMixin', function () {
       var path = qs('path[stroke-opacity="1"]')
       assert.ok(path)
     })
+
+    it('should highlight polygon', function () {
+      var path = qs('path[fill="DarkBlue"]')
+      happen.click(path)
+      assert.isAbove(path.attributes['fill-opacity'].value, 0.5)
+    })
   })
 
   describe('#tooltip', function () {

From 34bb2d6eb81d40e343f890508296c4a8b2c4da1e Mon Sep 17 00:00:00 2001
From: Joachim Schleicher <joachimsl@gmx.de>
Date: Tue, 14 Nov 2023 20:48:11 +0100
Subject: [PATCH 14/14] fix null opacity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

partly revert 952385 - since ´null´ is actually used in ternary fields.
Remove null opacity from the testcase. It should be either unset or a
numeric value.
---
 umap/static/umap/js/umap.core.js | 2 +-
 umap/static/umap/test/_pre.js    | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/umap/static/umap/js/umap.core.js b/umap/static/umap/js/umap.core.js
index fbbbd901..a9398945 100644
--- a/umap/static/umap/js/umap.core.js
+++ b/umap/static/umap/js/umap.core.js
@@ -161,7 +161,7 @@ L.Util.detectFileType = (f) => {
 }
 
 L.Util.usableOption = (options, option) =>
-  options[option] !== undefined && options[option] !== '' && options[option] !== null
+  options[option] !== undefined && options[option] !== ''
 
 L.Util.greedyTemplate = (str, data, ignore) => {
   function getValue(data, path) {
diff --git a/umap/static/umap/test/_pre.js b/umap/static/umap/test/_pre.js
index fa3ad7fe..4c8d244f 100644
--- a/umap/static/umap/test/_pre.js
+++ b/umap/static/umap/test/_pre.js
@@ -92,14 +92,12 @@ var defaultDatalayerData = function (custom) {
     displayOnLoad: true,
     id: 62,
     pictogram_url: null,
-    opacity: null,
     weight: null,
     fillColor: '',
     color: '',
     stroke: true,
     smoothFactor: null,
     dashArray: '',
-    fillOpacity: null,
     fill: true,
   }
   return L.extend({}, _default, custom)