# HG changeset patch
# User sl
# Date 1397126733 -7200
# Node ID 54ac29018aafd36e142734e174738bfe421a2ac2
# Parent  b014e6b2a9e21d8c5a79f2b2766ff012df9ea5fc
Rectangle overlay params:
Adding support for 'cycle' and 'zoom' param.
Fixing issue with step not being interpreted and an integer.
Updating help documentation.

diff -r b014e6b2a9e2 -r 54ac29018aaf rectangle-overlay-params.html
--- a/rectangle-overlay-params.html	Wed Apr 09 19:55:16 2014 +0200
+++ b/rectangle-overlay-params.html	Thu Apr 10 12:45:33 2014 +0200
@@ -58,7 +58,7 @@
 
 		var animation=false;
 		if (!(typeof qs.anim === "undefined"))	{
-			animation=true;
+			animation=(qs.anim[0]=='true'||qs.anim[0]=='1');
 			//window.alert("Using animation mode");
 		}		
 
@@ -67,16 +67,32 @@
 			intervalInMs=qs.interval[0];
 			//window.alert("Interval: " + intervalInMs + " ms");
 		}
+			
+		var cycle=false; //Whether we should cycle through our animation
+		if (!(typeof qs.cycle === "undefined"))	{
+			cycle=(qs.cycle[0]=='true'||qs.cycle[0]=='1');
+			//window.alert("cycle: " + cycle);
+		}
 
+		var zoom=12; //Specify default zoom
+		if (!(typeof qs.zoom === "undefined"))	{
+			zoom=parseInt(qs.zoom[0]);
+			//window.alert("zoom: " + zoom);
+		}
+
+		
 		var step=1; //default to n seconds
 		if (!(typeof qs.step === "undefined"))	{
-			step=qs.step[0];
+			//Use parseInt to force that variable to an integer rather than a string
+			step=parseInt(qs.step[0]);
 			//window.alert("Step: " + step);
 		}
 		
 		//Display help if expected parameters are not specified
 		if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {
 				document.getElementById('help').innerHTML='Pass the URI parameters as follow: \
+					\
+					<h3>Rectangles parameters:</h3>\
 					<ul>\
 					<li>\'s\' for southernmost latitude.</li>\
 					<li>\'n\' for northernmost latitude.</li>\
@@ -84,11 +100,22 @@
 					<li>\'w\' for westernmost longitude.</li>\
 					<li>\'c\' Specify a <a href="http://www.w3schools.com/cssref/css_colornames.asp">color name</a> or value (use %23FFFFFF for white) for your rectangles.</li>\
 					<li>\'a\' Specify alpha opacity of your rectangle fill, it should be between 1 and 0. For instance 0.5 makes it half transparent.</li>\
+					</ul>\
+					\
+					You can specify any number of rectangles.<br />\
+					Map will be centered on the first rectangle.<br />\
+					\
+					<h3>Global parameters:</h3>\
+					<ul>\
 					<li>\'width\' Map width in pixels, default is 1200.</li>\
 					<li>\'height\' Map heigh in pixels, default is 800.</li>\
+					<li>\'zoom\' Specify default zoom.</li>\
+					<li>\'anim\' Specify whether or not to perform an animation on our list of rectangles. By default no animation is performed.</li>\
+					<li>\'interval\' The interval between each animation step specified in milliseconds (ms).</li>\
+					<li>\'cycle\' Specify whether our not our animation is to keep on going forever or simple run once. By default it runs just once.</li>\
+					<li>\'step\' Specify how many rectangles do we display on every animation tick.</li>\
 					</ul>\
-					You can specify any number of rectangles.<br />\
-					Map will be centered on the first rectangle.<br />\
+					\
 					Click <a href="rectangle-overlay-params.html?w=8.619000&n=50.134350&e=8.714110&s=50.091180&w=8.657227&n=50.119630&e=8.673706&s=50.108644&w=8.652547&n=50.109318&e=8.658400&s=50.105320&c=black&c=%23FF0000&c=green&a=0.3&a=0.75&c=0.5">here</a> for an example.';
 
 			//Still display the map
@@ -109,7 +136,7 @@
         );
 	  
         map = new google.maps.Map(document.getElementById('map'), {
-          'zoom': 12,
+          'zoom': zoom,
           'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),
           'mapTypeId': google.maps.MapTypeId.ROADMAP
         });
@@ -134,38 +161,46 @@
 			}
 		}
 		else {
-		var currentRect=0;
-		rectangles = []; //Create rectangles array
-		//We are doing an animation so just setup our timer
-		var animTimer=setInterval(function(){
-					//alert("Hello");
-					if ((currentRect+step)<qs.s.length) {
+			var currentRect=0;
+			rectangles = []; //Create rectangles array
+			//We are doing an animation so just setup our timer with proper function
+			var animTimer=setInterval(function(){
+				//alert("Hello");
+				if ((currentRect+step)<qs.s.length) {
 					//We are still in range, display our rect
+					if (cycle) {
+						rectangles.forEach(function(entry) {entry.setMap(null);});
+						//Clear our rectangle array before adding the new ones
+						rectangles = [];
+					}
+					
+					//window.alert("Current rect: " + currentRect );
 					for (var i=currentRect; i<(currentRect+step); i++) {
 						rectangles.push(new google.maps.Rectangle({	map: map,
-												fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
-												fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
-												strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
-												strokeOpacity: 1.0,
-												strokeWeight: 1,
-												bounds: new google.maps.LatLngBounds(
-												new google.maps.LatLng(qs.s[i], qs.w[i]),
-												new google.maps.LatLng(qs.n[i], qs.e[i]))
-												}));
-						}
+																	fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
+																	fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
+																	strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
+																	strokeOpacity: 1.0,
+																	strokeWeight: 1,
+																	bounds: new google.maps.LatLngBounds(
+																	new google.maps.LatLng(qs.s[i], qs.w[i]),
+																	new google.maps.LatLng(qs.n[i], qs.e[i]))
+																	}));
 					}
-					else {
+				}
+				else {
 					//Not in range, go back to 0
 					currentRect=0;
-					//Stop interval for now
-					window.clearInterval(animTimer);
+					if (!cycle) {
+						//Stop our timer if we are not in cycle mode
+						window.clearInterval(animTimer);
+					}
 					return;
-					}
-					//Move on to next frame					
-					currentRect+=step;
-					},
-					intervalInMs);
-		
+				}
+				//Move on to next frame					
+				currentRect=currentRect+step;
+			},
+			intervalInMs);		
 		}
       }