Mercurialgmaps / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | raw | help
rectangle-overlay-params.html
author sl
Wed, 09 Apr 2014 13:41:29 +0200
changeset 1 a1483545da35
parent 0 5ecce0e1ef52
child 2 b014e6b2a9e2
permissions -rw-r--r--
Rectangle overlay params:
Fixing duplicate first rectangle entry due to our guery strings parsing.
Adding 'a' URL parameter to control rectangle fill opacity.
Adding support to pass in color as hexa using %23 URL encoding. 
     1 <!DOCTYPE html>

     2 <html>

     3   <head>

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

     5     <title>Rectangle Overlay</title>

     6 

     7     <style type="text/css">

     8       #map {

     9         width: 1200px;

    10         height: 800px;

    11 		margin: 5px;

    12       }

    13 	  

    14 	  h2 {

    15 		margin: 2px;

    16 	  }

    17 	  

    18 	  ul {

    19 		margin: 2px;

    20 	  }

    21 	  

    22 	  body {

    23 		font-size: 12pt;

    24 		font-family: Arial, sans-serif;

    25 		}

    26     </style>

    27 

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

    29 

    30     <script type="text/javascript">

    31       // Global variables

    32       var map;

    33       var marker1;

    34       var marker2;

    35       var rectangle;

    36 

    37       /**

    38        * Called on the initial page load.

    39        */

    40       function init() {

    41 	  

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

    43 	  

    44 	  	var qs = GetQueryString();

    45 		//qs = decodeURIComponent(qs);

    46 		

    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 		}

    52 		

    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 		}

    58 		

    59 		//Display help if expected parameters are not specified

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

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

    62 					<ul>\

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

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

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

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

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

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

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

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

    71 					</ul>\

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

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

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

    75 

    76 			//Still display the map

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

    78 					'zoom': 3,

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

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

    81 					});

    82 			

    83 			return;

    84 		}

    85 		

    86 

    87 		

    88         var latLngBounds = new google.maps.LatLngBounds(

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

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

    91         );

    92 	  

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

    94           'zoom': 12,

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

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

    97         });

    98 

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

   100         

   101 		//Create all our rectangles

   102 		rectangles = []; //Create rectangles array

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

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

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

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

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

   108 													strokeOpacity: 1.0,

   109 													strokeWeight: 1

   110 													}));

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

   112 		}

   113 		

   114         redraw();

   115       }

   116       

   117       /**

   118        * Updates the Rectangle's bounds to resize its dimensions.

   119        */

   120       function redraw() {	  

   121 	    var qs = GetQueryString();

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

   123         var latLngBounds = new google.maps.LatLngBounds(

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

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

   126         );

   127         rectangles[i].setBounds(latLngBounds);

   128 		}

   129       }

   130 	  

   131   /** 

   132    * This function is anonymous, is executed immediately and 

   133    * the return value is assigned to QueryString!

   134    */ 	  

   135 	 function GetQueryString() {

   136 	  var query_string = {};

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

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

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

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

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

   142 			// If first entry with this name

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

   144 		  //Instantiate an array for that parameter

   145  		  var arr = [ pair[1] ];

   146 		  query_string[pair[0]] = arr;

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

   148 		} else {

   149 		  //Add a value to our existing parameter array

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

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

   152 		}

   153 	  } 

   154 		return query_string;

   155 	}

   156 

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

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

   159     </script>

   160   </head>

   161   <body>

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

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

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

   165   </body>

   166 </html>

   167
gmaps