Fix cluster text color on Chrome and Co

fix #547

We need to call getComputedStyle only when element is
already added to the DOM.
This commit is contained in:
Yohan Boniface 2018-06-28 08:08:56 +02:00
parent 048c2afcc1
commit 73b8b60068
2 changed files with 23 additions and 5 deletions

View file

@ -155,23 +155,27 @@ L.U.Icon.Cluster = L.DivIcon.extend({
var container = L.DomUtil.create('div', 'leaflet-marker-icon marker-cluster'),
div = L.DomUtil.create('div', '', container),
span = L.DomUtil.create('span', '', div),
backgroundColor = this.datalayer.getColor(),
color;
backgroundColor = this.datalayer.getColor();
span.innerHTML = this.cluster.getChildCount();
div.style.backgroundColor = backgroundColor;
return container;
},
computeTextColor: function (el) {
var color,
backgroundColor = this.datalayer.getColor();
if (this.datalayer.options.cluster && this.datalayer.options.cluster.textColor) {
color = this.datalayer.options.cluster.textColor;
}
if (!color) {
if (typeof _CACHE_COLOR[backgroundColor] === 'undefined') {
color = L.DomUtil.TextColorFromBackgroundColor(div);
color = L.DomUtil.TextColorFromBackgroundColor(el);
_CACHE_COLOR[backgroundColor] = color;
} else {
color = _CACHE_COLOR[backgroundColor];
}
}
div.style.color = color;
return container;
return color;
}
});

View file

@ -23,6 +23,19 @@ L.U.Layer.Default = L.FeatureGroup.extend({
});
L.U.MarkerCluster = L.MarkerCluster.extend({
// Custom class so we can call computeTextColor
// when element is already on the DOM.
_initIcon: function () {
L.MarkerCluster.prototype._initIcon.call(this);
var div = this._icon.querySelector('div');
// Compute text color only when icon is added to the DOM.
div.style.color = this._iconObj.computeTextColor(div);
}
});
L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
_type: 'Cluster',
includes: [L.U.Layer],
@ -41,6 +54,7 @@ L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
options.maxClusterRadius = this.datalayer.options.cluster.radius;
}
L.MarkerClusterGroup.prototype.initialize.call(this, options);
this._markerCluster = L.U.MarkerCluster;
},
getEditableOptions: function () {