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

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

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