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

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

cluster circles in array. The delete array is put above de selected = false, otherwise nothing was deleted. Now still only 1 gets deleted.
File size: 9.1 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
210 var polygons_on_map_array = new Array;
211 for (var i=0; i<markerLatLngs.length; i++)
212 {
213 latLng = String(markerLatLngs[i]);
214
215 pos = latLng.indexOf(',');
216 pos2 = latLng.length-1;
217
218 var latitude = Number(latLng.substring(1, pos) );
219 var longitude = Number(latLng.substring(2 + pos, pos2) );
220
221
222 polygons_on_map_array.push( drawCircle( latitude, longitude,2.0, "#6C3", 1, 0.75, "#0F0",.2) );
223
224
225
226 map.addOverlay(polygons_on_map_array[i]);
227
228 }
229
230 var markerTitleSerialized;
231
232 //start
233 var a_php = "";
234 var total = 0;
235
236 for (var i=0; i<markerTitles.length; i++)
237 {
238 ++ total;
239 a_php = a_php + "s:" +
240 String(i).length + ":\"" + String(i) + "\";s:" +
241 String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
242 }
243 a_php = "a:" + total + ":{" + a_php + "}";
244 //end
245
246 loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"&sel=selected")
247}
248
249function mouseOutCluster(markers)
250{
251
252
253 deSelect();
254
255
256 //TODO DELETE ALL CIRCLES
257
258 /*
259 for (var i=0; i<markers.length; i++) {
260
261 map.removeOverlay(polygon[i]);
262
263 }
264 */
265
266
267}
268
269function select()
270{
271 selected = true;
272}
273
274function deSelect()
275{
276
277 map.removeOverlay(polygon);
278 for(var i=0; i<polygons_on_map_array.length; i++)
279 {
280
281 var currentpolygon = polygons_on_map_array[i];
282 map.removeOverlay(polygon);
283 }
284
285
286 selected = false;
287 loadXMLDoc("inc/node_info.php");
288 markerSelected.setImage("../img/sleutelGroen.png");
289
290
291
292}
293
294function removeOtherSelect()
295{
296 for(var i=0; i<markerArray.length; i++)
297 {
298 currentmarker = markerArray[i];
299 currentmarker.setImage("../sleutelGroen.png");
300 }
301 return true;
302}
303
304//Code from w3schools. http://www.w3schools.com/dom/dom_http.asp
305function loadXMLDoc(url, targetDiv)
306{
307xmlhttp=null;
308if (window.XMLHttpRequest)
309 {// code for Firefox, Opera, IE7, etc.
310 xmlhttp=new XMLHttpRequest();
311 }
312else if (window.ActiveXObject)
313 {// code for IE6, IE5
314 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
315 }
316if (xmlhttp!=null)
317 {
318 xmlhttp.onreadystatechange=state_Change();
319 xmlhttp.open("GET",url,true);
320 xmlhttp.send(null);
321 }
322else
323 {
324 alert("Your browser does not support XMLHTTP.");
325 }
326}
327
328function state_Change()
329{
330if (xmlhttp.readyState==4)
331 {// 4 = "loaded"
332 if (xmlhttp.status==200)
333 {// 200 = "OK"
334 document.getElementById(targetDiv).innerHTML=xmlhttp.responseText;
335 }
336 else
337 {
338 alert("Problem retrieving data:" + xmlhttp.statusText);
339 }
340 }
341}
342
343function loadSuggest(url)
344{
345xmlhttp=null;
346if (window.XMLHttpRequest)
347 {// code for Firefox, Opera, IE7, etc.
348 xmlhttp=new XMLHttpRequest();
349 }
350else if (window.ActiveXObject)
351 {// code for IE6, IE5
352 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
353 }
354if (xmlhttp!=null)
355 {
356 xmlhttp.onreadystatechange=state_ChangeSuggest;
357 xmlhttp.open("GET",url,true);
358 xmlhttp.send(null);
359 }
360else
361 {
362 alert("Your browser does not support XMLHTTP.");
363 }
364}
365
366function state_ChangeSuggest()
367{
368if (xmlhttp.readyState==4)
369 {// 4 = "loaded"
370 if (xmlhttp.status==200)
371 {// 200 = "OK"
372 document.getElementById("searchlist").innerHTML=xmlhttp.responseText;
373 }
374 else
375 {
376 alert("Problem retrieving data:" + xmlhttp.statusText);
377 }
378 }
379}
380
381function toggleGoogleSearchMap()
382{
383 if(gmap_search_state)
384 {
385 gmap_search_state = false;
386 }
387 else
388 {
389 gmap_search_state = true;
390 }
391
392 if(gmap_search_state)
393 {
394 map.enableGoogleBar();
395 }
396
397 if(!gmap_search_state)
398 {
399 map.disableGoogleBar();
400 }
401}
402
403function suggestMarkers(value)
404{
405 loadSuggest("inc/suggestions.php?value="+value);
406}
407
408
409
410
411
Note: See TracBrowser for help on using the repository browser.