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

Icon opacity
This commit is contained in:
Yohan Boniface 2023-06-13 21:58:59 +02:00 committed by GitHub
commit 60ac2dc83a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 36 additions and 8 deletions

View file

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

View file

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

View file

@ -30,6 +30,11 @@ L.U.Icon = L.DivIcon.extend({
return color return color
}, },
_getOpacity: function () {
if (this.feature) return this.feature.getOption('iconOpacity')
return this.map.getDefaultOption('iconOpacity')
},
formatUrl: function (url, feature) { formatUrl: function (url, feature) {
return L.Util.greedyTemplate(url || '', feature ? feature.extendedProperties() : {}) 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) 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.container.style.backgroundColor = color
this.elements.arrow.style.borderTopColor = color this.elements.arrow.style.borderTopColor = color
this.elements.container.style.opacity = opacity
this.elements.arrow.style.opacity = opacity
}, },
createIcon: function () { createIcon: function () {
@ -78,7 +87,6 @@ L.U.Icon.Default = L.U.Icon.extend({
this.elements.span.textContent = src this.elements.span.textContent = src
} }
} }
this._setColor()
this._setIconStyles(this.elements.main, 'icon') this._setIconStyles(this.elements.main, 'icon')
return this.elements.main 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) 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.backgroundColor = this._getColor()
this.elements.main.style.opacity = this._getOpacity()
}, },
createIcon: function () { createIcon: function () {
this.elements = {} this.elements = {}
this.elements.main = L.DomUtil.create('div') this.elements.main = L.DomUtil.create('div')
this.elements.main.innerHTML = ' ' this.elements.main.innerHTML = ' '
this._setColor()
this._setIconStyles(this.elements.main, 'icon') this._setIconStyles(this.elements.main, 'icon')
return this.elements.main return this.elements.main
}, },
@ -136,12 +145,12 @@ L.U.Icon.Ball = L.U.Icon.Default.extend({
this.elements.main this.elements.main
) )
this.elements.arrow = L.DomUtil.create('div', 'icon_arrow', this.elements.main) this.elements.arrow = L.DomUtil.create('div', 'icon_arrow', this.elements.main)
this._setColor()
this._setIconStyles(this.elements.main, 'icon') this._setIconStyles(this.elements.main, 'icon')
return this.elements.main return this.elements.main
}, },
_setColor: function () { _setIconStyles: function (img, name) {
L.U.Icon.prototype._setIconStyles.call(this, img, name)
const color = this._getColor('color') const color = this._getColor('color')
let background let background
if (L.Browser.ielt9) { 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` 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.background = background
this.elements.container.style.opacity = this._getOpacity()
}, },
}) })

View file

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

View file

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

View file

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