diff --git a/build/deps.js b/build/deps.js
index 6a466ea35..40b8b203f 100644
--- a/build/deps.js
+++ b/build/deps.js
@@ -3,6 +3,7 @@ var deps = {
Core: {
src: ['MarkerClusterGroup.js',
'MarkerCluster.js',
+ 'MarkerOpacity.js',
'DistanceGrid.js'],
desc: 'The core of the library.'
},
diff --git a/spec/index.html b/spec/index.html
index a68feeefe..ad1549cf1 100644
--- a/spec/index.html
+++ b/spec/index.html
@@ -19,6 +19,7 @@
+
+
+
diff --git a/spec/suites/RememberOpacity.js b/spec/suites/RememberOpacity.js
new file mode 100644
index 000000000..bb023a59f
--- /dev/null
+++ b/spec/suites/RememberOpacity.js
@@ -0,0 +1,151 @@
+describe('Remember opacity', function () {
+ var map, div, clock, markers;
+
+ var markerDefs = [
+ {latLng: [ 0, 0], opts: {opacity: 0.9}},
+ {latLng: [ 0, 1], opts: {opacity: 0.5}},
+ {latLng: [ 0,-1], opts: {opacity: 0.5}},
+ {latLng: [ 1, 0], opts: {opacity: 0.5}},
+ {latLng: [-1, 0], opts: {opacity: 0.5}},
+ {latLng: [ 1, 1], opts: {opacity: 0.2}},
+ {latLng: [ 1,-1], opts: {opacity: 0.2}},
+ {latLng: [-1, 1], opts: {opacity: 0.2}},
+ {latLng: [-1,-1], opts: {opacity: 0.2}}
+ ];
+
+ var bounds = L.latLngBounds( L.latLng( -1.1, -1.1),
+ L.latLng( 1.1, 1.1) );
+
+ beforeEach(function () {
+ clock = sinon.useFakeTimers();
+
+ div = document.createElement('div');
+ div.style.width = '200px';
+ div.style.height = '200px';
+ document.body.appendChild(div);
+
+ map = L.map(div, { maxZoom: 18 });
+
+ markers = [];
+ for (var i=0; i zoom) { //Still going down to required depth, just recurse to child clusters
for (i = childClusters.length - 1; i >= 0; i--) {
diff --git a/src/MarkerClusterGroup.js b/src/MarkerClusterGroup.js
index e1f566b8f..1f158eefb 100644
--- a/src/MarkerClusterGroup.js
+++ b/src/MarkerClusterGroup.js
@@ -151,8 +151,8 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
if (this._featureGroup.hasLayer(layer)) {
this._featureGroup.removeLayer(layer);
- if (layer.setOpacity) {
- layer.setOpacity(1);
+ if (layer.clusterShow) {
+ layer.clusterShow();
}
}
@@ -279,8 +279,8 @@ L.MarkerClusterGroup = L.FeatureGroup.extend({
if (fg.hasLayer(m)) {
fg.removeLayer(m);
- if (m.setOpacity) {
- m.setOpacity(1);
+ if (m.clusterShow) {
+ m.clusterShow();
}
}
}
@@ -970,7 +970,7 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
c._recursivelyAddChildrenToMap(null, newZoomLevel, bounds);
} else {
//Fade out old cluster
- c.setOpacity(0);
+ c.clusterHide();
c._recursivelyAddChildrenToMap(startPos, newZoomLevel, bounds);
}
@@ -992,7 +992,7 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
//TODO Maybe? Update markers in _recursivelyBecomeVisible
fg.eachLayer(function (n) {
if (!(n instanceof L.MarkerCluster) && n._icon) {
- n.setOpacity(1);
+ n.clusterShow();
}
});
@@ -1006,7 +1006,7 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
//update the positions of the just added clusters/markers
this._topClusterLevel._recursively(bounds, previousZoomLevel, 0, function (c) {
fg.removeLayer(c);
- c.setOpacity(1);
+ c.clusterShow();
});
this._animationEnd();
@@ -1042,8 +1042,8 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
var m = cluster._markers[0];
//If we were in a cluster animation at the time then the opacity and position of our child could be wrong now, so fix it
m.setLatLng(m.getLatLng());
- if (m.setOpacity) {
- m.setOpacity(1);
+ if (m.clusterShow) {
+ m.clusterShow();
}
} else {
cluster._recursively(bounds, newZoomLevel, 0, function (c) {
@@ -1066,11 +1066,11 @@ L.MarkerClusterGroup.include(!L.DomUtil.TRANSITION ? {
this._animationStart();
layer._setPos(this._map.latLngToLayerPoint(newCluster.getLatLng()));
- layer.setOpacity(0);
+ layer.clusterHide();
this._enqueue(function () {
fg.removeLayer(layer);
- layer.setOpacity(1);
+ layer.clusterShow();
me._animationEnd();
});
diff --git a/src/MarkerOpacity.js b/src/MarkerOpacity.js
new file mode 100644
index 000000000..beaef098b
--- /dev/null
+++ b/src/MarkerOpacity.js
@@ -0,0 +1,26 @@
+
+/*
+* Extends L.Marker to include two extra methods: clusterHide and clusterShow.
+*
+* They work as setOpacity(0) and setOpacity(1) respectively, but
+* they will remember the marker's opacity when hiding and showing it again.
+*
+*/
+
+
+L.Marker.include({
+
+ clusterHide: function () {
+ this.options.opacityWhenUnclustered = this.options.opacity || 1;
+ return this.setOpacity(0);
+ },
+
+ clusterShow: function () {
+ var ret = this.setOpacity(this.options.opacity || this.options.opacityWhenUnclustered);
+ delete this.options.opacityWhenUnclustered;
+ return ret;
+ }
+
+});
+
+