From 5870d55fffa9c246aba64786db0d9a893e47f68a Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 8 Jun 2023 09:53:18 +0200 Subject: [PATCH 1/3] Remove L.U.Icon._setColor Let's use setIconStyles from Leaflet instead --- umap/static/umap/js/umap.icon.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/umap/static/umap/js/umap.icon.js b/umap/static/umap/js/umap.icon.js index b68f278f..5f4a7fcd 100644 --- a/umap/static/umap/js/umap.icon.js +++ b/umap/static/umap/js/umap.icon.js @@ -48,7 +48,8 @@ L.U.Icon.Default = 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) const color = this._getColor() this.elements.container.style.backgroundColor = color this.elements.arrow.style.borderTopColor = color @@ -78,7 +79,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,7 +96,8 @@ 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() }, @@ -104,7 +105,6 @@ L.U.Icon.Circle = L.U.Icon.extend({ 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 +136,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) { From 6efa674884c8dfbf97402de680ccc3f3caaaa6e1 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 8 Jun 2023 10:09:31 +0200 Subject: [PATCH 2/3] Allow to control icon opacity fix #236 --- umap/static/umap/js/umap.features.js | 1 + umap/static/umap/js/umap.forms.js | 8 ++++++++ umap/static/umap/js/umap.icon.js | 12 +++++++++++- umap/static/umap/js/umap.js | 3 +++ umap/static/umap/js/umap.layer.js | 1 + 5 files changed, 24 insertions(+), 1 deletion(-) diff --git a/umap/static/umap/js/umap.features.js b/umap/static/umap/js/umap.features.js index 753c4b8f..a414d1a9 100644 --- a/umap/static/umap/js/umap.features.js +++ b/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', ] }, diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index a37d48f0..7883e306 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/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, diff --git a/umap/static/umap/js/umap.icon.js b/umap/static/umap/js/umap.icon.js index 5f4a7fcd..2b316d4c 100644 --- a/umap/static/umap/js/umap.icon.js +++ b/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() }, }) diff --git a/umap/static/umap/js/umap.js b/umap/static/umap/js/umap.js index cf6bdcdc..11a1b534 100644 --- a/umap/static/umap/js/umap.js +++ b/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', diff --git a/umap/static/umap/js/umap.layer.js b/umap/static/umap/js/umap.layer.js index adcb1a02..adebd44f 100644 --- a/umap/static/umap/js/umap.layer.js +++ b/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', From 65628fe202d545463ee893a71ec09bf5d2907653 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Thu, 8 Jun 2023 14:46:50 +0200 Subject: [PATCH 3/3] make lebab :p --- umap/static/umap/js/umap.icon.js | 4 ++-- umap/static/umap/js/umap.ui.js | 7 ++++++- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/umap/static/umap/js/umap.icon.js b/umap/static/umap/js/umap.icon.js index 2b316d4c..8cd125a8 100644 --- a/umap/static/umap/js/umap.icon.js +++ b/umap/static/umap/js/umap.icon.js @@ -56,7 +56,7 @@ 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(), - opacity = this._getOpacity() + opacity = this._getOpacity() this.elements.container.style.backgroundColor = color this.elements.arrow.style.borderTopColor = color this.elements.container.style.opacity = opacity @@ -104,7 +104,7 @@ L.U.Icon.Circle = L.U.Icon.extend({ L.U.Icon.prototype.initialize.call(this, map, options) }, - _setIconStyles: function (img, name) { + _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() diff --git a/umap/static/umap/js/umap.ui.js b/umap/static/umap/js/umap.ui.js index bf5d338f..7e7a861f 100644 --- a/umap/static/umap/js/umap.ui.js +++ b/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) }