Allow to control icon opacity

fix #236

umap/static/umap/js/umap.features.js

@@ -592,6 +592,7 @@ L.U.Marker = L.Marker.extend({
       'properties._umap_options.color',
       'properties._umap_options.iconClass',
       'properties._umap_options.iconUrl',
+      'properties._umap_options.iconOpacity',
     ]
   },
 

umap/static/umap/js/umap.forms.js

@@ -905,6 +905,14 @@ L.U.FormBuilder = L.FormBuilder.extend({
       helpEntries: 'colorValue',
       inheritable: true,
     },
+    iconOpacity: {
+      handler: 'Range',
+      min: 0.1,
+      max: 1,
+      step: 0.1,
+      label: L._('icon opacity'),
+      inheritable: true,
+    },
     opacity: {
       handler: 'Range',
       min: 0.1,

umap/static/umap/js/umap.icon.js

@@ -30,6 +30,11 @@ L.U.Icon = L.DivIcon.extend({
     return color
   },
 
+  _getOpacity: function () {
+    if (this.feature) return this.feature.getOption('iconOpacity')
+    return this.map.getDefaultOption('iconOpacity')
+  },
+
   formatUrl: function (url, feature) {
     return L.Util.greedyTemplate(url || '', feature ? feature.extendedProperties() : {})
   },
@@ -50,9 +55,12 @@ L.U.Icon.Default = L.U.Icon.extend({
 
   _setIconStyles: function (img, name) {
     L.U.Icon.prototype._setIconStyles.call(this, img, name)
-    const color = this._getColor()
+    const color = this._getColor(),
+          opacity = this._getOpacity()
     this.elements.container.style.backgroundColor = color
     this.elements.arrow.style.borderTopColor = color
+    this.elements.container.style.opacity = opacity
+    this.elements.arrow.style.opacity = opacity
   },
 
   createIcon: function () {
@@ -99,6 +107,7 @@ L.U.Icon.Circle = L.U.Icon.extend({
  _setIconStyles: function (img, name) {
     L.U.Icon.prototype._setIconStyles.call(this, img, name)
     this.elements.main.style.backgroundColor = this._getColor()
+    this.elements.main.style.opacity = this._getOpacity()
   },
 
   createIcon: function () {
@@ -152,6 +161,7 @@ L.U.Icon.Ball = L.U.Icon.Default.extend({
       background = `radial-gradient(circle at 6px 38% , white -4px, ${color} 8px) repeat scroll 0 0 transparent`
     }
     this.elements.container.style.background = background
+    this.elements.container.style.opacity = this._getOpacity()
   },
 })
 

umap/static/umap/js/umap.js

@@ -11,6 +11,7 @@ L.Map.mergeOptions({
   default_stroke: true,
   default_fill: true,
   default_weight: 3,
+  default_iconOpacity: 1,
   default_iconClass: 'Default',
   default_popupContentTemplate: '# {name}\n{description}',
   default_interactive: true,
@@ -1262,6 +1263,7 @@ L.U.Map.include({
     'iconClass',
     'iconUrl',
     'smoothFactor',
+    'iconOpacity',
     'opacity',
     'weight',
     'fill',
@@ -1551,6 +1553,7 @@ L.U.Map.include({
       'options.color',
       'options.iconClass',
       'options.iconUrl',
+      'options.iconOpacity',
       'options.opacity',
       'options.weight',
       'options.fill',

umap/static/umap/js/umap.layer.js

@@ -812,6 +812,7 @@ L.U.DataLayer = L.Evented.extend({
       'options.color',
       'options.iconClass',
       'options.iconUrl',
+      'options.iconOpacity',
       'options.opacity',
       'options.stroke',
       'options.weight',