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; + } + +}); + +