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

Last change on this file since 7759 was 7756, checked in by janveeden, 15 years ago

Selecting nodes for clusters done. For single nodes background still has to turn yellow

File size: 5.2 KB
RevLine 
[7722]1//Declaring some variables we will be using
[7694]2var map;
3var toggleState = 1;
[7722]4var marker_hash = {};
[7732]5var markerArray = new Array();
[7734]6var xmlhttp;
7var targetDiv = "infotop";
[7756]8var selected;
9var overNode;
[7665]10
[7734]11//This function is called from index.php
12function initialize_map() {
13 //We will only do this function if the browser is compatible
14 if (GBrowserIsCompatible()) {
15 //Adding the google map into the div called #mapcanvas
16 map = new GMap2(document.getElementById("mapcanvas"));
17 //Center the map on Leiden
18 map.setCenter(new GLatLng(52.162687, 4.493294), 11);
19 map.setUIToDefault();
20
21 //Go through the array 'markers' (Declared in index.php) and add a marker for each marker stored in the array using our addMarker function
22 for (var i=0; i<markers.length; i++) {
23 var current = markers[i];
24 var marker = addMarker(current, i);
25 marker_hash[current.id] = {marker : marker};
26 }
[7694]27
[7756]28 GEvent.addListener(map, "click", function() {
29 if(!overNode == true)
30 deSelect();
31 });
32
[7734]33 var markerClusterer = new MarkerClusterer(map, markerArray);
34 }
35}
36
37//This function will contain the displaying and not displaying of nodes on the map
38function toggleMyKml() {
39
40}
41
42//This function adds a marker with an object from our 'marker'array defined in index.php
43function addMarker(current, i) {
44 var id = current.id;
[7736]45 var marker = new GMarker(new GLatLng(current.latitude[0], current.longitude[0]), {title: current.name[0]});
[7734]46 //Added mouseover listener that calls on our mouseOver function when the mouse moves over a marker on the map
47 GEvent.addListener(marker, 'mouseover', function() {
[7756]48 mouseOverNode(current.id, current.name[0]);
[7734]49 });
[7756]50 GEvent.addListener(marker, 'click', function() {
51 mouseClickNode(current.id, current.name[0]);
52 });
53 GEvent.addListener(marker, 'mouseout', function() {
54 mouseOutNode(current.id, current.name[0]);
55 });
56
[7734]57 markerArray[i] = marker;
58 return marker;
59}
60
[7756]61
[7734]62//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
[7756]63function mouseClickNode(id, name)
[7734]64{
[7756]65 selected = true;
66 loadXMLDoc("inc/node_info.php?type=single");
[7734]67 /*
68 *Hieronder verdergaan met dekking
69 */
[7756]70
[7734]71}
[7756]72//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
73function mouseOverNode(id, name)
74{
75 if(!selected == true)
76 {
77 overNode = true;
78 loadXMLDoc("inc/node_info.php?type=single");
79 /*
80 *Hieronder verdergaan met dekking
81 */
82
83 }
84}
[7734]85
[7756]86function mouseOutNode(id, name)
87{
88 overNode = false;
89}
90
[7734]91//Our mouseover function for Cluster nodes. 'markers' is an array containing all markers within the cluster
92function mouseOverCluster(markers)
93{
[7756]94 if(!selected == true)
95 {
96 //Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
97 var markerTitles = new Array;
98 for(var i=0; i<markers.length; i++) {
99 markerTitles.push(markers[i].marker.getTitle());
100 }
101
102 var markerTitleSerialized;
103
104 //start
105 var a_php = "";
106 var total = 0;
107
108 for (var i=0; i<markerTitles.length; i++)
109 {
110 ++ total;
111 a_php = a_php + "s:" +
112 String(i).length + ":\"" + String(i) + "\";s:" +
113 String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
114 }
115 a_php = "a:" + total + ":{" + a_php + "}";
116 //end
117
118 loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"")
119 /*
120 *Hieronder verdergaan met dekking
121 */
122 }
123}
124
125//Our click function for Cluster nodes. 'markers' is an array containing all markers within the cluster
126function clickCluster(markers)
127{
128 //Let the rest of the program know that something is selected
129 select();
130
[7736]131 //Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
[7734]132 var markerTitles = new Array;
133 for(var i=0; i<markers.length; i++) {
134 markerTitles.push(markers[i].marker.getTitle());
[7722]135 }
[7733]136
[7735]137 var markerTitleSerialized;
138
139 //start
140 var a_php = "";
141 var total = 0;
142
143 for (var i=0; i<markerTitles.length; i++)
144 {
145 ++ total;
146 a_php = a_php + "s:" +
147 String(i).length + ":\"" + String(i) + "\";s:" +
148 String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
149 }
150 a_php = "a:" + total + ":{" + a_php + "}";
151 //end
152
[7756]153 loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"&sel=selected")
[7734]154}
[7665]155
[7756]156function select()
[7738]157{
[7756]158 selected = true;
[7738]159}
[7734]160
[7756]161function deSelect()
162{
163 selected = false;
164 loadXMLDoc("inc/node_info.php");
165}
[7738]166
[7734]167//Code from w3schools. http://www.w3schools.com/dom/dom_http.asp
168function loadXMLDoc(url)
169{
170xmlhttp=null;
171if (window.XMLHttpRequest)
172 {// code for Firefox, Opera, IE7, etc.
173 xmlhttp=new XMLHttpRequest();
174 }
175else if (window.ActiveXObject)
176 {// code for IE6, IE5
177 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
178 }
179if (xmlhttp!=null)
180 {
181 xmlhttp.onreadystatechange=state_Change;
182 xmlhttp.open("GET",url,true);
183 xmlhttp.send(null);
184 }
185else
186 {
187 alert("Your browser does not support XMLHTTP.");
188 }
189}
190
191function state_Change()
192{
193if (xmlhttp.readyState==4)
194 {// 4 = "loaded"
195 if (xmlhttp.status==200)
196 {// 200 = "OK"
197 document.getElementById(targetDiv).innerHTML=xmlhttp.responseText;
198 }
199 else
200 {
201 alert("Problem retrieving data:" + xmlhttp.statusText);
202 }
203 }
204}
Note: See TracBrowser for help on using the repository browser.