|
sl@0
|
1 |
<!DOCTYPE html>
|
|
sl@0
|
2 |
<html>
|
|
sl@0
|
3 |
<head>
|
|
sl@0
|
4 |
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
sl@0
|
5 |
<title>Rectangle Overlay</title>
|
|
sl@0
|
6 |
|
|
sl@0
|
7 |
<style type="text/css">
|
|
sl@0
|
8 |
#map {
|
|
sl@0
|
9 |
width: 1200px;
|
|
sl@0
|
10 |
height: 800px;
|
|
sl@0
|
11 |
margin: 5px;
|
|
sl@0
|
12 |
}
|
|
sl@0
|
13 |
|
|
sl@0
|
14 |
h2 {
|
|
sl@0
|
15 |
margin: 2px;
|
|
sl@0
|
16 |
}
|
|
sl@0
|
17 |
|
|
sl@0
|
18 |
ul {
|
|
sl@0
|
19 |
margin: 2px;
|
|
sl@0
|
20 |
}
|
|
sl@0
|
21 |
|
|
sl@0
|
22 |
body {
|
|
sl@0
|
23 |
font-size: 12pt;
|
|
sl@0
|
24 |
font-family: Arial, sans-serif;
|
|
sl@0
|
25 |
}
|
|
sl@0
|
26 |
</style>
|
|
sl@0
|
27 |
|
|
sl@0
|
28 |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
|
sl@0
|
29 |
|
|
sl@0
|
30 |
<script type="text/javascript">
|
|
sl@0
|
31 |
// Global variables
|
|
sl@0
|
32 |
var map;
|
|
sl@0
|
33 |
var marker1;
|
|
sl@0
|
34 |
var marker2;
|
|
sl@0
|
35 |
var rectangle;
|
|
sl@0
|
36 |
|
|
sl@0
|
37 |
/**
|
|
sl@0
|
38 |
* Called on the initial page load.
|
|
sl@0
|
39 |
*/
|
|
sl@0
|
40 |
function init() {
|
|
sl@0
|
41 |
|
|
sl@1
|
42 |
//window.alert("Init called");
|
|
sl@1
|
43 |
|
|
sl@0
|
44 |
var qs = GetQueryString();
|
|
sl@1
|
45 |
//qs = decodeURIComponent(qs);
|
|
sl@0
|
46 |
|
|
sl@0
|
47 |
//Set map width if specified
|
|
sl@0
|
48 |
if (!(typeof qs.width === "undefined")) {
|
|
sl@0
|
49 |
document.getElementById('map').style.width=qs.width[0].concat("px");
|
|
sl@0
|
50 |
//window.alert("width");
|
|
sl@0
|
51 |
}
|
|
sl@0
|
52 |
|
|
sl@0
|
53 |
//Set map height if specified
|
|
sl@0
|
54 |
if (!(typeof qs.height === "undefined")) {
|
|
sl@0
|
55 |
document.getElementById('map').style.height=qs.height[0].concat("px");
|
|
sl@0
|
56 |
//window.alert("height");
|
|
sl@0
|
57 |
}
|
|
sl@2
|
58 |
|
|
sl@2
|
59 |
var animation=false;
|
|
sl@2
|
60 |
if (!(typeof qs.anim === "undefined")) {
|
|
sl@2
|
61 |
animation=true;
|
|
sl@2
|
62 |
//window.alert("Using animation mode");
|
|
sl@2
|
63 |
}
|
|
sl@2
|
64 |
|
|
sl@2
|
65 |
var intervalInMs=3000; //default to n seconds
|
|
sl@2
|
66 |
if (!(typeof qs.interval === "undefined")) {
|
|
sl@2
|
67 |
intervalInMs=qs.interval[0];
|
|
sl@2
|
68 |
//window.alert("Interval: " + intervalInMs + " ms");
|
|
sl@2
|
69 |
}
|
|
sl@2
|
70 |
|
|
sl@2
|
71 |
var step=1; //default to n seconds
|
|
sl@2
|
72 |
if (!(typeof qs.step === "undefined")) {
|
|
sl@2
|
73 |
step=qs.step[0];
|
|
sl@2
|
74 |
//window.alert("Step: " + step);
|
|
sl@2
|
75 |
}
|
|
sl@0
|
76 |
|
|
sl@0
|
77 |
//Display help if expected parameters are not specified
|
|
sl@0
|
78 |
if ( typeof qs.s === "undefined" || typeof qs.w === "undefined" || typeof qs.n === "undefined" || typeof qs.e === "undefined") {
|
|
sl@0
|
79 |
document.getElementById('help').innerHTML='Pass the URI parameters as follow: \
|
|
sl@0
|
80 |
<ul>\
|
|
sl@0
|
81 |
<li>\'s\' for southernmost latitude.</li>\
|
|
sl@0
|
82 |
<li>\'n\' for northernmost latitude.</li>\
|
|
sl@0
|
83 |
<li>\'e\' for easternmost longitude.</li>\
|
|
sl@0
|
84 |
<li>\'w\' for westernmost longitude.</li>\
|
|
sl@1
|
85 |
<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>\
|
|
sl@1
|
86 |
<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>\
|
|
sl@0
|
87 |
<li>\'width\' Map width in pixels, default is 1200.</li>\
|
|
sl@0
|
88 |
<li>\'height\' Map heigh in pixels, default is 800.</li>\
|
|
sl@0
|
89 |
</ul>\
|
|
sl@0
|
90 |
You can specify any number of rectangles.<br />\
|
|
sl@0
|
91 |
Map will be centered on the first rectangle.<br />\
|
|
sl@1
|
92 |
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.';
|
|
sl@0
|
93 |
|
|
sl@0
|
94 |
//Still display the map
|
|
sl@0
|
95 |
map = new google.maps.Map(document.getElementById('map'), {
|
|
sl@0
|
96 |
'zoom': 3,
|
|
sl@0
|
97 |
'center': new google.maps.LatLng(45,0),
|
|
sl@0
|
98 |
'mapTypeId': google.maps.MapTypeId.ROADMAP
|
|
sl@0
|
99 |
});
|
|
sl@0
|
100 |
|
|
sl@0
|
101 |
return;
|
|
sl@0
|
102 |
}
|
|
sl@0
|
103 |
|
|
sl@2
|
104 |
//We are not displaying help
|
|
sl@2
|
105 |
//Init our map position and zoom
|
|
sl@2
|
106 |
var latLngBounds = new google.maps.LatLngBounds(
|
|
sl@0
|
107 |
new google.maps.LatLng(qs.s[0], qs.w[0]),
|
|
sl@0
|
108 |
new google.maps.LatLng(qs.n[0], qs.e[0])
|
|
sl@0
|
109 |
);
|
|
sl@0
|
110 |
|
|
sl@0
|
111 |
map = new google.maps.Map(document.getElementById('map'), {
|
|
sl@0
|
112 |
'zoom': 12,
|
|
sl@0
|
113 |
'center': new google.maps.LatLng(latLngBounds.getCenter().lat(),latLngBounds.getCenter().lng()),
|
|
sl@0
|
114 |
'mapTypeId': google.maps.MapTypeId.ROADMAP
|
|
sl@0
|
115 |
});
|
|
sl@2
|
116 |
|
|
sl@2
|
117 |
if (!animation) {
|
|
sl@2
|
118 |
//We are not doing animation so just display all our rectangles
|
|
sl@2
|
119 |
//window.alert(qs.s.length);
|
|
sl@2
|
120 |
//Create all our rectangles
|
|
sl@2
|
121 |
rectangles = []; //Create rectangles array
|
|
sl@2
|
122 |
for (var i = 0; i < qs.s.length; i++) {
|
|
sl@2
|
123 |
rectangles.push(new google.maps.Rectangle({ map: map,
|
|
sl@2
|
124 |
fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
|
|
sl@2
|
125 |
fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
|
|
sl@2
|
126 |
strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
|
|
sl@2
|
127 |
strokeOpacity: 1.0,
|
|
sl@2
|
128 |
strokeWeight: 1,
|
|
sl@2
|
129 |
bounds: new google.maps.LatLngBounds(
|
|
sl@2
|
130 |
new google.maps.LatLng(qs.s[i], qs.w[i]),
|
|
sl@2
|
131 |
new google.maps.LatLng(qs.n[i], qs.e[i]))
|
|
sl@2
|
132 |
}));
|
|
sl@2
|
133 |
//window.alert(decodeURIComponent(qs.c[i]));
|
|
sl@2
|
134 |
}
|
|
sl@2
|
135 |
}
|
|
sl@2
|
136 |
else {
|
|
sl@2
|
137 |
var currentRect=0;
|
|
sl@1
|
138 |
rectangles = []; //Create rectangles array
|
|
sl@2
|
139 |
//We are doing an animation so just setup our timer
|
|
sl@2
|
140 |
var animTimer=setInterval(function(){
|
|
sl@2
|
141 |
//alert("Hello");
|
|
sl@2
|
142 |
if ((currentRect+step)<qs.s.length) {
|
|
sl@2
|
143 |
//We are still in range, display our rect
|
|
sl@2
|
144 |
for (var i=currentRect; i<(currentRect+step); i++) {
|
|
sl@2
|
145 |
rectangles.push(new google.maps.Rectangle({ map: map,
|
|
sl@2
|
146 |
fillColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
|
|
sl@2
|
147 |
fillOpacity: (typeof qs.a === "undefined" || typeof qs.a[i] === "undefined"?'0.2':decodeURIComponent(qs.a[i])),
|
|
sl@2
|
148 |
strokeColor: (typeof qs.c === "undefined" || typeof qs.c[i] === "undefined"?'#666666':decodeURIComponent(qs.c[i])),
|
|
sl@2
|
149 |
strokeOpacity: 1.0,
|
|
sl@2
|
150 |
strokeWeight: 1,
|
|
sl@2
|
151 |
bounds: new google.maps.LatLngBounds(
|
|
sl@2
|
152 |
new google.maps.LatLng(qs.s[i], qs.w[i]),
|
|
sl@2
|
153 |
new google.maps.LatLng(qs.n[i], qs.e[i]))
|
|
sl@2
|
154 |
}));
|
|
sl@2
|
155 |
}
|
|
sl@2
|
156 |
}
|
|
sl@2
|
157 |
else {
|
|
sl@2
|
158 |
//Not in range, go back to 0
|
|
sl@2
|
159 |
currentRect=0;
|
|
sl@2
|
160 |
//Stop interval for now
|
|
sl@2
|
161 |
window.clearInterval(animTimer);
|
|
sl@2
|
162 |
return;
|
|
sl@2
|
163 |
}
|
|
sl@2
|
164 |
//Move on to next frame
|
|
sl@2
|
165 |
currentRect+=step;
|
|
sl@2
|
166 |
},
|
|
sl@2
|
167 |
intervalInMs);
|
|
sl@2
|
168 |
|
|
sl@0
|
169 |
}
|
|
sl@0
|
170 |
}
|
|
sl@0
|
171 |
|
|
sl@2
|
172 |
|
|
sl@0
|
173 |
|
|
sl@0
|
174 |
/**
|
|
sl@0
|
175 |
* This function is anonymous, is executed immediately and
|
|
sl@0
|
176 |
* the return value is assigned to QueryString!
|
|
sl@0
|
177 |
*/
|
|
sl@0
|
178 |
function GetQueryString() {
|
|
sl@0
|
179 |
var query_string = {};
|
|
sl@0
|
180 |
var query = window.location.search.substring(1);
|
|
sl@0
|
181 |
var vars = query.split("&");
|
|
sl@1
|
182 |
//window.alert("URL param count: " + vars.length);
|
|
sl@1
|
183 |
for (var i=0;i<vars.length;i++) {
|
|
sl@0
|
184 |
var pair = vars[i].split("=");
|
|
sl@0
|
185 |
// If first entry with this name
|
|
sl@0
|
186 |
if ((typeof query_string[pair[0]] === "undefined") ) {
|
|
sl@1
|
187 |
//Instantiate an array for that parameter
|
|
sl@1
|
188 |
var arr = [ pair[1] ];
|
|
sl@0
|
189 |
query_string[pair[0]] = arr;
|
|
sl@1
|
190 |
//window.alert("Create param '" + pair[0] + "' with value: " + pair[1]);
|
|
sl@0
|
191 |
} else {
|
|
sl@1
|
192 |
//Add a value to our existing parameter array
|
|
sl@1
|
193 |
//window.alert("Add param '" + pair[0] + "' with value: " + pair[1]);
|
|
sl@0
|
194 |
query_string[pair[0]].push(pair[1]);
|
|
sl@0
|
195 |
}
|
|
sl@0
|
196 |
}
|
|
sl@0
|
197 |
return query_string;
|
|
sl@0
|
198 |
}
|
|
sl@0
|
199 |
|
|
sl@0
|
200 |
// Register an event listener to fire when the page finishes loading.
|
|
sl@0
|
201 |
google.maps.event.addDomListener(window, 'load', init);
|
|
sl@0
|
202 |
</script>
|
|
sl@0
|
203 |
</head>
|
|
sl@0
|
204 |
<body>
|
|
sl@0
|
205 |
<h2>Google maps rectangle overlay</h2>
|
|
sl@0
|
206 |
<div id="help"><a href='rectangle-overlay-params.html'>help</a></div>
|
|
sl@0
|
207 |
<div id="map"></div>
|
|
sl@0
|
208 |
</body>
|
|
sl@0
|
209 |
</html>
|
|
sl@0
|
210 |
|