1.1 --- a/rectangle-overlay-params.html Wed Apr 09 19:55:16 2014 +0200
1.2 +++ b/rectangle-overlay-params.html Thu Apr 10 12:45:33 2014 +0200
1.3 @@ -58,7 +58,7 @@
1.4
1.5 var animation=false;
1.6 if (!(typeof qs.anim === "undefined")) {
1.7 - animation=true;
1.8 + animation=(qs.anim[0]=='true'||qs.anim[0]=='1');
1.9 //window.alert("Using animation mode");
1.10 }
1.11
1.12 @@ -67,16 +67,32 @@
1.13 intervalInMs=qs.interval[0];
1.14 //window.alert("Interval: " + intervalInMs + " ms");
1.15 }
1.16 +
1.17 + var cycle=false; //Whether we should cycle through our animation
1.18 + if (!(typeof qs.cycle === "undefined")) {
1.19 + cycle=(qs.cycle[0]=='true'||qs.cycle[0]=='1');
1.20 + //window.alert("cycle: " + cycle);
1.21 + }
1.22
1.23 + var zoom=12; //Specify default zoom
1.24 + if (!(typeof qs.zoom === "undefined")) {
1.25 + zoom=parseInt(qs.zoom[0]);
1.26 + //window.alert("zoom: " + zoom);
1.27 + }
1.28 +
1.29 +
1.30 var step=1; //default to n seconds
1.31 if (!(typeof qs.step === "undefined")) {
1.32 - step=qs.step[0];
1.33 + //Use parseInt to force that variable to an integer rather than a string
1.34 + step=parseInt(qs.step[0]);
1.35 //window.alert("Step: " + step);
1.36 }
1.37
1.38 //Display help if expected parameters are not specified
1.39 if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {
1.40 document.getElementById('help').innerHTML='Pass the URI parameters as follow: \
1.41 + \
1.42 + <h3>Rectangles parameters:</h3>\
1.43 <ul>\
1.44 <li>\'s\' for southernmost latitude.</li>\
1.45 <li>\'n\' for northernmost latitude.</li>\
1.46 @@ -84,11 +100,22 @@
1.47 <li>\'w\' for westernmost longitude.</li>\
1.48 <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>\
1.49 <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>\
1.50 + </ul>\
1.51 + \
1.52 + You can specify any number of rectangles.<br />\
1.53 + Map will be centered on the first rectangle.<br />\
1.54 + \
1.55 + <h3>Global parameters:</h3>\
1.56 + <ul>\
1.57 <li>\'width\' Map width in pixels, default is 1200.</li>\
1.58 <li>\'height\' Map heigh in pixels, default is 800.</li>\
1.59 + <li>\'zoom\' Specify default zoom.</li>\
1.60 + <li>\'anim\' Specify whether or not to perform an animation on our list of rectangles. By default no animation is performed.</li>\
1.61 + <li>\'interval\' The interval between each animation step specified in milliseconds (ms).</li>\
1.62 + <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>\
1.63 + <li>\'step\' Specify how many rectangles do we display on every animation tick.</li>\
1.64 </ul>\
1.65 - You can specify any number of rectangles.<br />\
1.66 - Map will be centered on the first rectangle.<br />\
1.67 + \
1.68 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.';
1.69
1.70 //Still display the map
1.71 @@ -109,7 +136,7 @@
1.72 );
1.73
1.74 map = new google.maps.Map(document.getElementById('map'), {
1.75 - 'zoom': 12,
1.76 + 'zoom': zoom,
1.77 'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),
1.78 'mapTypeId': google.maps.MapTypeId.ROADMAP
1.79 });
1.80 @@ -134,38 +161,46 @@
1.81 }
1.82 }
1.83 else {
1.84 - var currentRect=0;
1.85 - rectangles = []; //Create rectangles array
1.86 - //We are doing an animation so just setup our timer
1.87 - var animTimer=setInterval(function(){
1.88 - //alert("Hello");
1.89 - if ((currentRect+step)<qs.s.length) {
1.90 + var currentRect=0;
1.91 + rectangles = []; //Create rectangles array
1.92 + //We are doing an animation so just setup our timer with proper function
1.93 + var animTimer=setInterval(function(){
1.94 + //alert("Hello");
1.95 + if ((currentRect+step)<qs.s.length) {
1.96 //We are still in range, display our rect
1.97 + if (cycle) {
1.98 + rectangles.forEach(function(entry) {entry.setMap(null);});
1.99 + //Clear our rectangle array before adding the new ones
1.100 + rectangles = [];
1.101 + }
1.102 +
1.103 + //window.alert("Current rect: " + currentRect );
1.104 for (var i=currentRect; i<(currentRect+step); i++) {
1.105 rectangles.push(new google.maps.Rectangle({ map: map,
1.106 - fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.107 - fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
1.108 - strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.109 - strokeOpacity: 1.0,
1.110 - strokeWeight: 1,
1.111 - bounds: new google.maps.LatLngBounds(
1.112 - new google.maps.LatLng(qs.s[i], qs.w[i]),
1.113 - new google.maps.LatLng(qs.n[i], qs.e[i]))
1.114 - }));
1.115 - }
1.116 + fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.117 + fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
1.118 + strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
1.119 + strokeOpacity: 1.0,
1.120 + strokeWeight: 1,
1.121 + bounds: new google.maps.LatLngBounds(
1.122 + new google.maps.LatLng(qs.s[i], qs.w[i]),
1.123 + new google.maps.LatLng(qs.n[i], qs.e[i]))
1.124 + }));
1.125 }
1.126 - else {
1.127 + }
1.128 + else {
1.129 //Not in range, go back to 0
1.130 currentRect=0;
1.131 - //Stop interval for now
1.132 - window.clearInterval(animTimer);
1.133 + if (!cycle) {
1.134 + //Stop our timer if we are not in cycle mode
1.135 + window.clearInterval(animTimer);
1.136 + }
1.137 return;
1.138 - }
1.139 - //Move on to next frame
1.140 - currentRect+=step;
1.141 - },
1.142 - intervalInMs);
1.143 -
1.144 + }
1.145 + //Move on to next frame
1.146 + currentRect=currentRect+step;
1.147 + },
1.148 + intervalInMs);
1.149 }
1.150 }
1.151