Merge pull request #1132 from umap-project/icon-opacity

Icon opacity

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() : {})
   },
@@ -48,10 +53,14 @@ L.U.Icon.Default = L.U.Icon.extend({
     L.U.Icon.prototype.initialize.call(this, map, options)
   },
 
-  _setColor: function () {
+  _setIconStyles: function (img, name) {
-    const color = this._getColor()
+    L.U.Icon.prototype._setIconStyles.call(this, img, name)
+    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 () {
@@ -78,7 +87,6 @@ L.U.Icon.Default = L.U.Icon.extend({
         this.elements.span.textContent = src
       }
     }
-    this._setColor()
     this._setIconStyles(this.elements.main, 'icon')
     return this.elements.main
   },
@@ -96,15 +104,16 @@ L.U.Icon.Circle = L.U.Icon.extend({
     L.U.Icon.prototype.initialize.call(this, map, options)
   },
 
-  _setColor: function () {
+  _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 () {
     this.elements = {}
     this.elements.main = L.DomUtil.create('div')
     this.elements.main.innerHTML = ' '
-    this._setColor()
     this._setIconStyles(this.elements.main, 'icon')
     return this.elements.main
   },
@@ -136,12 +145,12 @@ L.U.Icon.Ball = L.U.Icon.Default.extend({
       this.elements.main
     )
     this.elements.arrow = L.DomUtil.create('div', 'icon_arrow', this.elements.main)
-    this._setColor()
     this._setIconStyles(this.elements.main, 'icon')
     return this.elements.main
   },
 
-  _setColor: function () {
+  _setIconStyles: function (img, name) {
+    L.U.Icon.prototype._setIconStyles.call(this, img, name)
     const color = this._getColor('color')
     let background
     if (L.Browser.ielt9) {
@@ -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',

umap/static/umap/js/umap.ui.js

@@ -122,7 +122,12 @@ L.U.UI = L.Evented.extend({
         el.textContent = action.label
         L.DomEvent.on(el, 'click', L.DomEvent.stop)
         if (action.callback) {
-          L.DomEvent.on(el, 'click', action.callback, action.callbackContext || this.map)
+          L.DomEvent.on(
+            el,
+            'click',
+            action.callback,
+            action.callbackContext || this.map
+          )
         }
         L.DomEvent.on(el, 'click', close, this)
       }