gmaps: rectangle-overlay-params.html@54ac29018aaf

     1 <!DOCTYPE html>

     2 <html>

     3   <head>

     4     <meta http-equiv="content-type" content="text/html; charset=utf-8" />

     5     <title>Rectangle Overlay</title>

     7     <style type="text/css">

     8       #map {

     9         width: 1200px;

    10         height: 800px;

    11 		margin: 5px;

    12       }

    14 	  h2 {

    15 		margin: 2px;

    16 	  }

    18 	  ul {

    19 		margin: 2px;

    20 	  }

    22 	  body {

    23 		font-size: 12pt;

    24 		font-family: Arial, sans-serif;

    25 		}

    26     </style>

    28     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    30     <script type="text/javascript">

    31       // Global variables

    32       var map;

    33       var marker1;

    34       var marker2;

    35       var rectangle;

    37       /**

    38        * Called on the initial page load.

    39        */

    40       function init() {

    42 		//window.alert("Init called");

    44 	  	var qs = GetQueryString();

    45 		//qs = decodeURIComponent(qs);

    47 		//Set map width if specified

    48 		if (!(typeof qs.width === "undefined"))	{

    49 			document.getElementById('map').style.width=qs.width[0].concat("px");

    50 			//window.alert("width");

    51 		}

    53 		//Set map height if specified

    54 		if (!(typeof qs.height === "undefined"))	{

    55 			document.getElementById('map').style.height=qs.height[0].concat("px");

    56 			//window.alert("height");

    57 		}

    59 		var animation=false;

    60 		if (!(typeof qs.anim === "undefined"))	{

    61 			animation=(qs.anim[0]=='true'||qs.anim[0]=='1');

    62 			//window.alert("Using animation mode");

    63 		}

    65 		var intervalInMs=3000; //default to n seconds

    66 		if (!(typeof qs.interval === "undefined"))	{

    67 			intervalInMs=qs.interval[0];

    68 			//window.alert("Interval: " + intervalInMs + " ms");

    69 		}

    71 		var cycle=false; //Whether we should cycle through our animation

    72 		if (!(typeof qs.cycle === "undefined"))	{

    73 			cycle=(qs.cycle[0]=='true'||qs.cycle[0]=='1');

    74 			//window.alert("cycle: " + cycle);

    75 		}

    77 		var zoom=12; //Specify default zoom

    78 		if (!(typeof qs.zoom === "undefined"))	{

    79 			zoom=parseInt(qs.zoom[0]);

    80 			//window.alert("zoom: " + zoom);

    81 		}

    84 		var step=1; //default to n seconds

    85 		if (!(typeof qs.step === "undefined"))	{

    86 			//Use parseInt to force that variable to an integer rather than a string

    87 			step=parseInt(qs.step[0]);

    88 			//window.alert("Step: " + step);

    89 		}

    91 		//Display help if expected parameters are not specified

    92 		if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {

    93 				document.getElementById('help').innerHTML='Pass the URI parameters as follow: \

    94 					\

    95 					<h3>Rectangles parameters:</h3>\

    96 					<ul>\

    97 					<li>\'s\' for southernmost latitude.</li>\

    98 					<li>\'n\' for northernmost latitude.</li>\

    99 					<li>\'e\' for easternmost longitude.</li>\

   100 					<li>\'w\' for westernmost longitude.</li>\

   101 					<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>\

   102 					<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>\

   103 					</ul>\

   104 					\

   105 					You can specify any number of rectangles.<br />\

   106 					Map will be centered on the first rectangle.<br />\

   107 					\

   108 					<h3>Global parameters:</h3>\

   109 					<ul>\

   110 					<li>\'width\' Map width in pixels, default is 1200.</li>\

   111 					<li>\'height\' Map heigh in pixels, default is 800.</li>\

   112 					<li>\'zoom\' Specify default zoom.</li>\

   113 					<li>\'anim\' Specify whether or not to perform an animation on our list of rectangles. By default no animation is performed.</li>\

   114 					<li>\'interval\' The interval between each animation step specified in milliseconds (ms).</li>\

   115 					<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>\

   116 					<li>\'step\' Specify how many rectangles do we display on every animation tick.</li>\

   117 					</ul>\

   118 					\

   119 					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.';

   121 			//Still display the map

   122 			map = new google.maps.Map(document.getElementById('map'), {

   123 					'zoom': 3,

   124 					'center': new google.maps.LatLng(45,0),

   125 					'mapTypeId': google.maps.MapTypeId.ROADMAP

   126 					});

   128 			return;

   129 		}

   131 		//We are not displaying help

   132 		//Init our map position and zoom

   133 		var latLngBounds = new google.maps.LatLngBounds(

   134           new google.maps.LatLng(qs.s[0], qs.w[0]),

   135           new google.maps.LatLng(qs.n[0], qs.e[0])

   136         );

   138         map = new google.maps.Map(document.getElementById('map'), {

   139           'zoom': zoom,

   140           'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),

   141           'mapTypeId': google.maps.MapTypeId.ROADMAP

   142         });

   144 		if (!animation) {

   145 			//We are not doing animation so just display all our rectangles

   146 			//window.alert(qs.s.length);

   147 			//Create all our rectangles

   148 			rectangles = []; //Create rectangles array

   149 			for (var i = 0; i < qs.s.length; i++) {

   150 			rectangles.push(new google.maps.Rectangle({	map: map,

   151 														fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),

   152 														fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),

   153 														strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),

   154 														strokeOpacity: 1.0,

   155 														strokeWeight: 1,

   156 														bounds: new google.maps.LatLngBounds(

   157 														new google.maps.LatLng(qs.s[i], qs.w[i]),

   158 														new google.maps.LatLng(qs.n[i], qs.e[i]))

   159 														}));

   160 			//window.alert(decodeURIComponent(qs.c[i]));

   161 			}

   162 		}

   163 		else {

   164 			var currentRect=0;

   165 			rectangles = []; //Create rectangles array

   166 			//We are doing an animation so just setup our timer with proper function

   167 			var animTimer=setInterval(function(){

   168 				//alert("Hello");

   169 				if ((currentRect+step)<qs.s.length) {

   170 					//We are still in range, display our rect

   171 					if (cycle) {

   172 						rectangles.forEach(function(entry) {entry.setMap(null);});

   173 						//Clear our rectangle array before adding the new ones

   174 						rectangles = [];

   175 					}

   177 					//window.alert("Current rect: " + currentRect );

   178 					for (var i=currentRect; i<(currentRect+step); i++) {

   179 						rectangles.push(new google.maps.Rectangle({	map: map,

   180 																	fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),

   181 																	fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),

   182 																	strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),

   183 																	strokeOpacity: 1.0,

   184 																	strokeWeight: 1,

   185 																	bounds: new google.maps.LatLngBounds(

   186 																	new google.maps.LatLng(qs.s[i], qs.w[i]),

   187 																	new google.maps.LatLng(qs.n[i], qs.e[i]))

   188 																	}));

   189 					}

   190 				}

   191 				else {

   192 					//Not in range, go back to 0

   193 					currentRect=0;

   194 					if (!cycle) {

   195 						//Stop our timer if we are not in cycle mode

   196 						window.clearInterval(animTimer);

   197 					}

   198 					return;

   199 				}

   200 				//Move on to next frame

   201 				currentRect=currentRect+step;

   202 			},

   203 			intervalInMs);

   204 		}

   205       }

   209   /**

   210    * This function is anonymous, is executed immediately and

   211    * the return value is assigned to QueryString!

   212    */

   213 	 function GetQueryString() {

   214 	  var query_string = {};

   215 	  var query = window.location.search.substring(1);

   216 	  var vars = query.split("&");

   217 	  //window.alert("URL param count: " + vars.length);

   218 	  for (var i=0;i<vars.length;i++) {

   219 		var pair = vars[i].split("=");

   220 			// If first entry with this name

   221 		if ((typeof query_string[pair[0]] === "undefined") ) {

   222 		  //Instantiate an array for that parameter

   223  		  var arr = [ pair[1] ];

   224 		  query_string[pair[0]] = arr;

   225 		  //window.alert("Create param '" + pair[0] + "' with value: " + pair[1]);

   226 		} else {

   227 		  //Add a value to our existing parameter array

   228 		  //window.alert("Add param '" + pair[0] + "' with value: " + pair[1]);

   229 		  query_string[pair[0]].push(pair[1]);

   230 		}

   231 	  }

   232 		return query_string;

   233 	}

   235       // Register an event listener to fire when the page finishes loading.

   236       google.maps.event.addDomListener(window, 'load', init);

   237     </script>

   238   </head>

   239   <body>

   240     <h2>Google maps rectangle overlay</h2>

   241 	<div id="help"><a href='rectangle-overlay-params.html'>help</a></div>

   242     <div id="map"></div>

   243   </body>

   244 </html>

author	sl
	Thu, 10 Apr 2014 12:45:33 +0200
changeset 3	54ac29018aaf
parent 2	b014e6b2a9e2
permissions	-rw-r--r--