source: trunk/src/map/inc/nodemapWL.js@ 7833

Last change on this file since 7833 was 7833, checked in by ddboer, 15 years ago

Clusters now get a red highlight behind them

File size: 9.8 KB
Line 
1//Declaring some variables we will be using
2var gmap_search_state = false;
3
4var map;
5var markerArray = [];
6var circleArray = [];
7var polygons_on_map_array = [];
8var xmlhttp;
9var targetDiv = "infotop";
10var selected = false;
11var overNode;
12var markerSelected = "";
13var highlightCircle;
14var currentMarker;
15
16
17
18//This function is called from index.php
19function initialize_map() {
20 //We will only do this function if the browser is compatible
21 if (GBrowserIsCompatible())
22 {
23 //Adding the google map into the div called #mapcanvas
24 map = new GMap2(document.getElementById("mapcanvas"), {googleBarOptions : {style : "new"}});
25 //Center the map on Leiden
26 map.setCenter(new GLatLng(52.162687, 4.493294), 11); // Vars should go to config
27 map.setUIToDefault();
28
29
30 /*
31 * Go through the array 'markers' (Declared in index.php) and add a marker for each marker stored in the array
32 * using our addMarker function.
33 * If the latLng of the marker is both 0
34 */
35 for (var i=0; i<markers.length; i++) {
36 var current = markers[i];
37 if(current.latitude[0] > 0 || current.latitude[0] < 0)
38 {
39 addMarker(current, i);
40 }
41 }
42
43 GEvent.addListener(map, "click", function() {
44 if(!overNode == true)
45 deSelect();
46 });
47
48 GEvent.addListener(map, "zoomend", function() {
49 mapZoomed();
50 });
51
52 suggestMarkers("");
53
54 new MarkerClusterer(map, markerArray);
55 }
56}
57
58//This function will contain the displaying and not displaying of nodes on the map
59function toggleMyKml() {
60
61}
62
63//This function adds a marker with an object from our 'marker'array defined in index.php
64function addMarker(current, i) {
65 var latitude = Number(current.latitude[0]);
66 var longitude = Number(current.longitude[0]);
67
68 var displayIcon;
69 var currentstatus = current.status[0];
70 if(currentstatus == "up")
71 {
72 displayIcon = greenIcon;
73 }
74 else
75 {
76 displayIcon = redIcon;
77 }
78
79 var marker = new GMarker(new GLatLng(current.latitude[0], current.longitude[0]), {title: current.name[0], icon: displayIcon});
80
81 //Added mouseover listener that calls on our mouseOver function when the mouse moves over a marker on the map
82 GEvent.addListener(marker, 'mouseover', function() {
83 mouseOverNode(current.id, current.name[0],latitude, longitude);
84 });
85 GEvent.addListener(marker, 'click', function() {
86 mouseClickNode(current.id, current.name[0], marker);
87 });
88 GEvent.addListener(marker, 'mouseout', function() {
89 mouseOutNode(current.id, current.name[0]);
90 });
91
92 markerArray.push(marker);
93 //circleArray.push(circle);
94 return marker;
95}
96
97//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
98function mouseClickNode(id, name, marker)
99{
100 if(selected == true)
101 {
102 deSelect();
103 markerSelected = "";
104 }
105
106 if(markerSelected == marker)
107 {
108 deSelect();
109 markerSelected = "";
110 }
111 else
112 {
113 selected = true;
114 markerSelected = marker;
115 for(var i=0; i<markers.length; i++)
116 {
117 var currentmarker = markers[i];
118 if(currentmarker.name[0] == marker.getTitle())
119 {
120 if(currentmarker.status[0] == "up")
121 {
122 marker.setImage("../img/sleutelGroenSelected.png");
123 }
124 else
125 {
126 marker.setImage("../img/sleutelRoodSelected.png");
127 }
128
129 }
130 }
131 loadXMLDoc("inc/node_info.php?type=single&name="+name+"&a="+Math.random());
132 }
133}
134//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
135function mouseOverNode(id, name, latitude, longitude)
136{
137 overNode = true;
138 if(!selected == true)
139 {
140
141 drawCircle(latitude, longitude,0.1, "#6C3", 1, 0.75, "#0F0",.2, 200);
142 polygons_on_map_array.push(polygon);
143 map.addOverlay(polygon);
144
145 loadXMLDoc("inc/node_info.php?type=single&name="+name+"&a="+Math.random());//Path should be in config
146
147 /*
148 *Hieronder verdergaan met dekking
149 */
150
151 }
152}
153
154function mouseOutNode(id, name)
155{
156 overNode = false;
157 map.removeOverlay(polygon);
158
159}
160
161//Our mouseover function for Cluster nodes. 'markers' is an array containing all markers within the cluster
162function mouseOverCluster(markers)
163{
164 if(!selected == true)
165 {
166 //Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
167 var markerTitles = new Array;
168 var markerLatLngs = new Array;
169
170 for(var i=0; i<markers.length; i++) {
171
172 markerTitles.push(markers[i].marker.getTitle());
173 markerLatLngs.push(markers[i].marker.getLatLng() );
174 }
175
176
177
178 for (var i=0; i<markerLatLngs.length; i++)
179 {
180 latLng = String(markerLatLngs[i]);
181
182 pos = latLng.indexOf(',');
183 pos2 = latLng.length-1;
184
185 var latitude = Number(latLng.substring(1, pos) );
186 var longitude = Number(latLng.substring(2 + pos, pos2) );
187
188
189 drawCircle( latitude, longitude,0.1, "#6C3", 1, 0.75, "#0F0",.2);
190
191
192
193 map.addOverlay(polygon);
194 polygons_on_map_array.push(polygon);
195 }
196
197 var markerTitleSerialized;
198
199 //start
200 var a_php = "";
201 var total = 0;
202
203 for (var i=0; i<markerTitles.length; i++)
204 {
205 ++ total;
206 a_php = a_php + "s:" +
207 String(i).length + ":\"" + String(i) + "\";s:" +
208 String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
209 }
210 a_php = "a:" + total + ":{" + a_php + "}";
211 //end
212
213 loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"")
214 /*
215 *Hieronder verdergaan met dekking
216 */
217 }
218}
219
220//Our click function for Cluster nodes. 'markers' is an array containing all markers within the cluster
221function clickCluster(markers)
222{
223 if(selected == true)
224 deselect();
225
226 //Let the rest of the program know that something is selected
227 select();
228
229 //Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
230 var markerTitles = new Array;
231 for(var i=0; i<markers.length; i++) {
232 markerTitles.push(markers[i].marker.getTitle());
233
234 }
235
236 var markerTitleSerialized;
237
238 //start
239 var a_php = "";
240 var total = 0;
241
242 for (var i=0; i<markerTitles.length; i++)
243 {
244 ++ total;
245 a_php = a_php + "s:" +
246 String(i).length + ":\"" + String(i) + "\";s:" +
247 String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
248 }
249 a_php = "a:" + total + ":{" + a_php + "}";
250 //end
251
252 loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"&sel=selected"+"&a="+Math.random())
253}
254
255function mouseOutCluster(markers)
256{
257 removeAllPolgygons();
258}
259
260function mapZoomed()
261{
262 highlightCurrentMarker()
263 if(!markerSelected == "")
264 {
265 markerSelected.setImage("../img/sleutelGroenSelected.png");
266 }
267}
268
269function removeAllPolgygons()
270{
271 for(var i=0; i<polygons_on_map_array.length; i++)
272 {
273 var currentpolygon = polygons_on_map_array[i];
274 map.removeOverlay(currentpolygon);
275
276 }
277 polygons_on_map_array.clear();
278}
279
280function select()
281{
282 selected = true;
283}
284
285function deSelect()
286{
287 map.removeOverlay(highlightCircle);
288 selected = false;
289 loadXMLDoc("inc/node_info.php");
290 if(!markerSelected == "")
291 {
292 for(var i=0; i<markers.length; i++)
293 {
294 var currentmarker = markers[i];
295 if(currentmarker.name[0] == markerSelected.getTitle())
296 {
297 if(currentmarker.status[0] == "up")
298 {
299 markerSelected.setImage("../img/sleutelGroen.png");
300 }
301 else
302 {
303 markerSelected.setImage("../img/sleutelRood.png");
304 }
305
306 }
307 }
308 markerSelected = "";
309 }
310
311 removeAllPolgygons();
312
313}
314
315function removeOtherSelect()
316{
317 for(var i=0; i<markerArray.length; i++)
318 {
319 currentmarker = markerArray[i];
320 currentmarker.setImage("../sleutelGroen.png");
321 }
322 return true;
323}
324
325//Code from w3schools. http://www.w3schools.com/dom/dom_http.asp
326function loadXMLDoc(url, targetDiv)
327{
328xmlhttp=null;
329if (window.XMLHttpRequest)
330 {// code for Firefox, Opera, IE7, etc.
331 xmlhttp=new XMLHttpRequest();
332 }
333else if (window.ActiveXObject)
334 {// code for IE6, IE5
335 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
336 }
337if (xmlhttp!=null)
338 {
339 xmlhttp.onreadystatechange=state_Change();
340 xmlhttp.open("GET",url,true);
341 xmlhttp.send(null);
342 }
343else
344 {
345 alert("Your browser does not support XMLHTTP.");
346 }
347}
348
349function state_Change()
350{
351if (xmlhttp.readyState==4)
352 {// 4 = "loaded"
353 if (xmlhttp.status==200)
354 {// 200 = "OK"
355 document.getElementById(targetDiv).innerHTML=xmlhttp.responseText;
356 }
357 else
358 {
359 alert("Problem retrieving data:" + xmlhttp.statusText);
360 }
361 }
362}
363
364function loadSuggest(url)
365{
366xmlhttp=null;
367if (window.XMLHttpRequest)
368 {// code for Firefox, Opera, IE7, etc.
369 xmlhttp=new XMLHttpRequest();
370 }
371else if (window.ActiveXObject)
372 {// code for IE6, IE5
373 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
374 }
375if (xmlhttp!=null)
376 {
377 xmlhttp.onreadystatechange=state_ChangeSuggest;
378 xmlhttp.open("GET",url,true);
379 xmlhttp.send(null);
380 }
381else
382 {
383 alert("Your browser does not support XMLHTTP.");
384 }
385}
386
387function state_ChangeSuggest()
388{
389if (xmlhttp.readyState==4)
390 {// 4 = "loaded"
391 if (xmlhttp.status==200)
392 {// 200 = "OK"
393 document.getElementById("searchlist").innerHTML=xmlhttp.responseText;
394 }
395 else
396 {
397 alert("Problem retrieving data:" + xmlhttp.statusText);
398 }
399 }
400}
401
402function suggestMarkers(value)
403{
404 loadSuggest("inc/suggestions.php?value="+value+"&a="+Math.random());
405}
406
407function goToMarker(value)
408{
409 for(var i=0; i<markerArray.length; i++)
410 {
411 var name = markerArray[i].getTitle();
412
413 if(name == value)
414 {
415 map.setCenter(markerArray[i].getLatLng(), 15);
416 loadXMLDoc("inc/node_info.php?type=single&name="+value+"&a="+Math.random())
417 }
418 }
419}
420
421function toggleGoogleSearchMap()
422{
423 if(gmap_search_state)
424 {
425 gmap_search_state = false;
426 }
427 else
428 {
429 gmap_search_state = true;
430 }
431
432 if(gmap_search_state)
433 {
434 map.enableGoogleBar();
435 }
436
437 if(!gmap_search_state)
438 {
439 map.disableGoogleBar();
440 }
441}
442
443
444
Note: See TracBrowser for help on using the repository browser.