1.1 --- a/rectangle-overlay-params.html Wed Apr 09 13:41:29 2014 +0200
1.2 +++ b/rectangle-overlay-params.html Wed Apr 09 19:55:16 2014 +0200
1.3 @@ -55,6 +55,24 @@
1.4 document.getElementById('map').style.height=qs.height[0].concat("px");
1.5 //window.alert("height");
1.6 }
1.7 +
1.8 + var animation=false;
1.9 + if (!(typeof qs.anim === "undefined")) {
1.10 + animation=true;
1.11 + //window.alert("Using animation mode");
1.12 + }
1.13 +
1.14 + var intervalInMs=3000; //default to n seconds
1.15 + if (!(typeof qs.interval === "undefined")) {
1.16 + intervalInMs=qs.interval[0];
1.17 + //window.alert("Interval: " + intervalInMs + " ms");
1.18 + }
1.19 +
1.20 + var step=1; //default to n seconds
1.21 + if (!(typeof qs.step === "undefined")) {
1.22 + step=qs.step[0];
1.23 + //window.alert("Step: " + step);
1.24 + }
1.25
1.26 //Display help if expected parameters are not specified
1.27 if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {
1.28 @@ -83,9 +101,9 @@
1.29 return;
1.30 }
1.31
1.32 -
1.33 -
1.34 - var latLngBounds = new google.maps.LatLngBounds(
1.35 + //We are not displaying help
1.36 + //Init our map position and zoom
1.37 + var latLngBounds = new google.maps.LatLngBounds(
1.38 new google.maps.LatLng(qs.s[0], qs.w[0]),
1.39 new google.maps.LatLng(qs.n[0], qs.e[0])
1.40 );
1.41 @@ -95,38 +113,63 @@
1.42 'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),
1.43 'mapTypeId': google.maps.MapTypeId.ROADMAP
1.44 });
1.45 -
1.46 - //window.alert(qs.s.length);
1.47 -
1.48 - //Create all our rectangles
1.49 +
1.50 + if (!animation) {
1.51 + //We are not doing animation so just display all our rectangles
1.52 + //window.alert(qs.s.length);
1.53 + //Create all our rectangles
1.54 + rectangles = []; //Create rectangles array
1.55 + for (var i = 0; i < qs.s.length; i++) {
1.56 + rectangles.push(new google.maps.Rectangle({ map: map,
1.57 + fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.58 + fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
1.59 + strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.60 + strokeOpacity: 1.0,
1.61 + strokeWeight: 1,
1.62 + bounds: new google.maps.LatLngBounds(
1.63 + new google.maps.LatLng(qs.s[i], qs.w[i]),
1.64 + new google.maps.LatLng(qs.n[i], qs.e[i]))
1.65 + }));
1.66 + //window.alert(decodeURIComponent(qs.c[i]));
1.67 + }
1.68 + }
1.69 + else {
1.70 + var currentRect=0;
1.71 rectangles = []; //Create rectangles array
1.72 - for (var i = 0; i < qs.s.length; i++) {
1.73 - rectangles.push(new google.maps.Rectangle({ map: map,
1.74 - fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.75 - fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
1.76 - strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.77 - strokeOpacity: 1.0,
1.78 - strokeWeight: 1
1.79 - }));
1.80 - //window.alert(decodeURIComponent(qs.c[i]));
1.81 + //We are doing an animation so just setup our timer
1.82 + var animTimer=setInterval(function(){
1.83 + //alert("Hello");
1.84 + if ((currentRect+step)<qs.s.length) {
1.85 + //We are still in range, display our rect
1.86 + for (var i=currentRect; i<(currentRect+step); i++) {
1.87 + rectangles.push(new google.maps.Rectangle({ map: map,
1.88 + fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.89 + fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
1.90 + strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.91 + strokeOpacity: 1.0,
1.92 + strokeWeight: 1,
1.93 + bounds: new google.maps.LatLngBounds(
1.94 + new google.maps.LatLng(qs.s[i], qs.w[i]),
1.95 + new google.maps.LatLng(qs.n[i], qs.e[i]))
1.96 + }));
1.97 + }
1.98 + }
1.99 + else {
1.100 + //Not in range, go back to 0
1.101 + currentRect=0;
1.102 + //Stop interval for now
1.103 + window.clearInterval(animTimer);
1.104 + return;
1.105 + }
1.106 + //Move on to next frame
1.107 + currentRect+=step;
1.108 + },
1.109 + intervalInMs);
1.110 +
1.111 }
1.112 -
1.113 - redraw();
1.114 }
1.115
1.116 - /**
1.117 - * Updates the Rectangle's bounds to resize its dimensions.
1.118 - */
1.119 - function redraw() {
1.120 - var qs = GetQueryString();
1.121 - for (var i = 0; i < qs.s.length; i++) {
1.122 - var latLngBounds = new google.maps.LatLngBounds(
1.123 - new google.maps.LatLng(qs.s[i], qs.w[i]),
1.124 - new google.maps.LatLng(qs.n[i], qs.e[i])
1.125 - );
1.126 - rectangles[i].setBounds(latLngBounds);
1.127 - }
1.128 - }
1.129 +
1.130
1.131 /**
1.132 * This function is anonymous, is executed immediately and