Merge pull request #444 from MazeMap/master

On becoming visible, markers retain their original opacity.

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.'
 	},

spec/index.html

@@ -19,6 +19,7 @@
 	<script type="text/javascript" src="../src/MarkerClusterGroup.js"></script>
 	<script type="text/javascript" src="../src/MarkerCluster.QuickHull.js"></script>
 	<script type="text/javascript" src="../src/MarkerCluster.Spiderfier.js"></script>
+	<script type="text/javascript" src="../src/MarkerOpacity.js"></script>
 
 	<script>
 		mocha.setup('bdd');
@@ -56,6 +57,8 @@
 	<script type="text/javascript" src="suites/spiderfySpec.js"></script>
 	<script type="text/javascript" src="suites/zoomAnimationSpec.js"></script>
 
+	<script type="text/javascript" src="suites/RememberOpacity.js"></script>
+
 	<script>
 		(window.mochaPhantomJS || window.mocha).run();
 	</script>

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<markerDefs.length; i++) {
+			markers.push( L.marker(markerDefs[i].latLng, markerDefs[i].opts ) );
+		}
+	});
+	afterEach(function () {
+		clock.restore();
+
+		document.body.removeChild(div);
+	});
+
+	it('clusters semitransparent markers into an opaque one', function () {
+		map.setView(new L.LatLng(0,0), 1);
+
+		var clusterLayer = new L.MarkerClusterGroup({
+			maxClusterRadius: 20
+		});
+		clusterLayer.addLayers(markers);
+		map.addLayer(clusterLayer);
+
+		var visibleClusters = clusterLayer._featureGroup.getLayers();
+		expect(visibleClusters.length).to.be(1);
+		expect(visibleClusters[0].options.opacity).to.be(1);
+	});
+
+
+	it('unclusters an opaque marker into semitransparent ones', function () {
+		map.setView(new L.LatLng(0,0), 1);
+		var visibleClusters;
+
+		var clusterLayer = new L.MarkerClusterGroup({
+			maxClusterRadius: 20
+		});
+		clusterLayer.addLayers(markers);
+		map.addLayer(clusterLayer);
+
+		map.fitBounds(bounds);
+		clock.tick(1000);
+
+		visibleClusters = clusterLayer._featureGroup.getLayers();
+		expect(visibleClusters.length).to.be(9);
+		for (var i=0; i<9; i++) {
+			expect(visibleClusters[i].options.opacity).to.be.within(0.2,0.9);
+		}
+
+		// It shall also work after zooming in/out a second time.
+		map.setView(new L.LatLng(0,0), 1);
+		clock.tick(1000);
+
+		map.fitBounds(bounds);
+		clock.tick(1000);
+
+		visibleClusters = clusterLayer._featureGroup.getLayers();
+		expect(visibleClusters.length).to.be(9);
+		for (var i=0; i<9; i++) {
+			expect(visibleClusters[i].options.opacity).to.be.within(0.2,0.9);
+		}
+	});
+
+
+	it('has no problems zooming in and out several times', function () {
+		var visibleClusters;
+
+		var clusterLayer = new L.MarkerClusterGroup({
+			maxClusterRadius: 20
+		});
+		clusterLayer.addLayers(markers);
+		map.addLayer(clusterLayer);
+
+		// Zoom in and out a couple times
+		for (var i=0; i<10; i++) {
+			map.fitBounds(bounds);
+			clock.tick(1000);
+
+			visibleClusters = clusterLayer._featureGroup.getLayers();
+			expect(visibleClusters.length).to.be(9);
+			for (var i=0; i<9; i++) {
+				expect(visibleClusters[i].options.opacity).to.be.within(0.2,0.9);
+			}
+
+			map.setView(new L.LatLng(0,0), 1);
+			clock.tick(1000);
+
+			visibleClusters = clusterLayer._featureGroup.getLayers();
+			expect(visibleClusters.length).to.be(1);
+			expect(visibleClusters[0].options.opacity).to.be(1);
+		}
+
+	});
+
+	it('retains the opacity of each individual marker', function () {
+		map.setView(new L.LatLng(0,0), 1);
+
+		var visibleClusters;
+		var clusterLayer = new L.MarkerClusterGroup({
+			maxClusterRadius: 20
+		});
+		clusterLayer.addLayers(markers);
+		map.addLayer(clusterLayer);
+
+
+		// Zoom in and out a couple times
+		for (var i=0; i<5; i++) {
+			map.fitBounds(bounds);
+			clock.tick(1000);
+
+			map.setView(new L.LatLng(0,0), 1);
+			clock.tick(1000);
+		}
+
+		for (var i=0; i<markerDefs.length; i++) {
+
+// 			console.log(markerDefs[i].latLng, markerDefs[i].opts.opacity);
+
+			map.setView(L.latLng(markerDefs[i].latLng), 18);
+			clock.tick(1000);
+			visibleClusters = clusterLayer._featureGroup.getLayers();
+			expect(visibleClusters.length).to.be(1);
+			expect(visibleClusters[0].options.opacity).to.be(markerDefs[i].opts.opacity);
+		}
+	});
+
+});

src/MarkerCluster.Spiderfier.js

@@ -169,7 +169,7 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 			//If it is a marker, add it now and we'll animate it out
 			if (m.setOpacity) {
 				m.setZIndexOffset(1000000); //Make these appear on top of EVERYTHING
-				m.setOpacity(0);
+				m.clusterHide();
 			
 				fg.addLayer(m);
 
@@ -196,7 +196,7 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 			m.setLatLng(newPos);
 			
 			if (m.setOpacity) {
-				m.setOpacity(1);
+				m.clusterShow();
 			}
 
 
@@ -291,7 +291,7 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 			//Hack override the location to be our center
 			if (m.setOpacity) {
 				m._setPos(thisLayerPos);
-				m.setOpacity(0);
+				m.clusterHide();
 			} else {
 				fg.removeLayer(m);
 			}
@@ -333,7 +333,7 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 
 
 				if (m.setOpacity) {
-					m.setOpacity(1);
+					m.clusterShow();
 					m.setZIndexOffset(0);
 				}
 

src/MarkerCluster.js

@@ -169,7 +169,7 @@ L.MarkerCluster = L.Marker.extend({
 					//Only do it if the icon is still on the map
 					if (m._icon) {
 						m._setPos(center);
-						m.setOpacity(0);
+						m.clusterHide();
 					}
 				}
 			},
@@ -180,7 +180,7 @@ L.MarkerCluster = L.Marker.extend({
 					cm = childClusters[j];
 					if (cm._icon) {
 						cm._setPos(center);
-						cm.setOpacity(0);
+						cm.clusterHide();
 					}
 				}
 			}
@@ -195,10 +195,10 @@ L.MarkerCluster = L.Marker.extend({
 				//TODO: depthToAnimateIn affects _isSingleParent, if there is a multizoom we may/may not be.
 				//As a hack we only do a animation free zoom on a single level zoom, if someone does multiple levels then we always animate
 				if (c._isSingleParent() && previousZoomLevel - 1 === newZoomLevel) {
-					c.setOpacity(1);
+					c.clusterShow();
 					c._recursivelyRemoveChildrenFromMap(bounds, previousZoomLevel); //Immediately remove our children as we are replacing them. TODO previousBounds not bounds
 				} else {
-					c.setOpacity(0);
+					c.clusterHide();
 				}
 
 				c._addToMap();
@@ -208,7 +208,7 @@ L.MarkerCluster = L.Marker.extend({
 
 	_recursivelyBecomeVisible: function (bounds, zoomLevel) {
 		this._recursively(bounds, 0, zoomLevel, null, function (c) {
-			c.setOpacity(1);
+			c.clusterShow();
 		});
 	},
 
@@ -231,8 +231,8 @@ L.MarkerCluster = L.Marker.extend({
 						nm._backupLatlng = nm.getLatLng();
 
 						nm.setLatLng(startPos);
-						if (nm.setOpacity) {
-							nm.setOpacity(0);
+						if (nm.clusterHide) {
+							nm.clusterHide();
 						}
 					}
 
@@ -284,8 +284,8 @@ L.MarkerCluster = L.Marker.extend({
 					m = c._markers[i];
 					if (!exceptBounds || !exceptBounds.contains(m._latlng)) {
 						c._group._featureGroup.removeLayer(m);
-						if (m.setOpacity) {
-							m.setOpacity(1);
+						if (m.clusterShow) {
+							m.clusterShow();
 						}
 					}
 				}
@@ -296,8 +296,8 @@ L.MarkerCluster = L.Marker.extend({
 					m = c._childClusters[i];
 					if (!exceptBounds || !exceptBounds.contains(m._latlng)) {
 						c._group._featureGroup.removeLayer(m);
-						if (m.setOpacity) {
-							m.setOpacity(1);
+						if (m.clusterShow) {
+							m.clusterShow();
 						}
 					}
 				}
@@ -314,7 +314,7 @@ L.MarkerCluster = L.Marker.extend({
 	_recursively: function (boundsToApplyTo, zoomLevelToStart, zoomLevelToStop, runAtEveryLevel, runAtBottomLevel) {
 		var childClusters = this._childClusters,
 		    zoom = this._zoom,
-			i, c;
+		    i, c;
 
 		if (zoomLevelToStart > zoom) { //Still going down to required depth, just recurse to child clusters
 			for (i = childClusters.length - 1; i >= 0; i--) {

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

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