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

Last change on this file since 7858 was 7847, checked in by Pieter Naber, 15 years ago

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