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:
parent
048c2afcc1
commit
73b8b60068
2 changed files with 23 additions and 5 deletions
|
@ -155,23 +155,27 @@ L.U.Icon.Cluster = L.DivIcon.extend({
|
||||||
var container = L.DomUtil.create('div', 'leaflet-marker-icon marker-cluster'),
|
var container = L.DomUtil.create('div', 'leaflet-marker-icon marker-cluster'),
|
||||||
div = L.DomUtil.create('div', '', container),
|
div = L.DomUtil.create('div', '', container),
|
||||||
span = L.DomUtil.create('span', '', div),
|
span = L.DomUtil.create('span', '', div),
|
||||||
backgroundColor = this.datalayer.getColor(),
|
backgroundColor = this.datalayer.getColor();
|
||||||
color;
|
|
||||||
span.innerHTML = this.cluster.getChildCount();
|
span.innerHTML = this.cluster.getChildCount();
|
||||||
div.style.backgroundColor = backgroundColor;
|
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) {
|
if (this.datalayer.options.cluster && this.datalayer.options.cluster.textColor) {
|
||||||
color = this.datalayer.options.cluster.textColor;
|
color = this.datalayer.options.cluster.textColor;
|
||||||
}
|
}
|
||||||
if (!color) {
|
if (!color) {
|
||||||
if (typeof _CACHE_COLOR[backgroundColor] === 'undefined') {
|
if (typeof _CACHE_COLOR[backgroundColor] === 'undefined') {
|
||||||
color = L.DomUtil.TextColorFromBackgroundColor(div);
|
color = L.DomUtil.TextColorFromBackgroundColor(el);
|
||||||
_CACHE_COLOR[backgroundColor] = color;
|
_CACHE_COLOR[backgroundColor] = color;
|
||||||
} else {
|
} else {
|
||||||
color = _CACHE_COLOR[backgroundColor];
|
color = _CACHE_COLOR[backgroundColor];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
div.style.color = color;
|
return color;
|
||||||
return container;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -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({
|
L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
|
||||||
_type: 'Cluster',
|
_type: 'Cluster',
|
||||||
includes: [L.U.Layer],
|
includes: [L.U.Layer],
|
||||||
|
@ -41,6 +54,7 @@ L.U.Layer.Cluster = L.MarkerClusterGroup.extend({
|
||||||
options.maxClusterRadius = this.datalayer.options.cluster.radius;
|
options.maxClusterRadius = this.datalayer.options.cluster.radius;
|
||||||
}
|
}
|
||||||
L.MarkerClusterGroup.prototype.initialize.call(this, options);
|
L.MarkerClusterGroup.prototype.initialize.call(this, options);
|
||||||
|
this._markerCluster = L.U.MarkerCluster;
|
||||||
},
|
},
|
||||||
|
|
||||||
getEditableOptions: function () {
|
getEditableOptions: function () {
|
||||||
|
|
Loading…
Reference in a new issue