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

//Declaring some variables we will be using
var map;
var markerArray = new Array();
var circleArray = new Array();
var xmlhttp;
var targetDiv = "infotop";
var selected = false;
var overNode;
var markerSelected;
var polygons_on_map_array = new Array();


//This function is called from index.php
function initialize_map() {
        //We will only do this function if the browser is compatible
        if (GBrowserIsCompatible()) {
        //Adding the google map into the div called #mapcanvas
        map = new GMap2(document.getElementById("mapcanvas"));
        //Center the map on Leiden
        map.setCenter(new GLatLng(52.162687, 4.493294), 11); 
        map.setUIToDefault();
 

        //Go through the array 'markers' (Declared in index.php) and add a marker for each marker stored in the array using our addMarker function
        for (var i=0; i<markers.length; i++) {
                var current = markers[i];
                var gMarker  = addMarker(current, i);
        }
        
        GEvent.addListener(map, "click", function() {
                if(!overNode == true)
                        deSelect();
        });
        
        /*
         * Hier zo circles toevoegen.
         
        for(var  i=0; i<circleArray.length; i++) {
                map.addOverlay(circleArray[i]);
        }
        */
        
        var markerClusterer = new MarkerClusterer(map, markerArray);
  }
} 

//This function will contain the displaying and not displaying of nodes on the map
function toggleMyKml() {

}

//This function adds a marker with an object from our 'marker'array defined in index.php
function addMarker(current, i) {
        var id = current.id;
        var latitude = Number(current.latitude[0]);
        var longitude = Number(current.longitude[0]);
        //var circle = drawCircle(latitude, longitude, 2.0, "#6C3", 1, 0.75, "#0F0",.2); 
        var marker  = new GMarker(new GLatLng(current.latitude[0], current.longitude[0]), {title: current.name[0], icon: greenIcon});
        
        //Added mouseover listener that calls on our mouseOver function when the mouse moves over a marker on the map
        GEvent.addListener(marker, 'mouseover', function() {
        mouseOverNode(current.id, current.name[0],latitude, longitude);
        });
        GEvent.addListener(marker, 'click', function() {
        mouseClickNode(current.id, current.name[0], marker);
        });
        GEvent.addListener(marker, 'mouseout', function() {
        mouseOutNode(current.id, current.name[0]);
        });
        
        markerArray.push(marker);
        //circleArray.push(circle);
        return marker;
}

//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
function mouseClickNode(id, name, marker)
{       
        if(selected == true)
                deSelect();
        
        if(markerSelected == marker)
        {
                deSelect();
                markerSelected = "";
        }
        else
        {
                selected = true;
                
                markerSelected = marker;
                marker.setImage("../img/sleutelGroenSelected.png");
                loadXMLDoc("inc/node_info.php?type=single&name="+name+"");

                /*
                *Hieronder verdergaan met dekking
                */
                
        }
}
//Our mouseover function for single nodes. Gives the ID(our own given ID) and the name of the node.
function mouseOverNode(id, name, latitude, longitude)
{
        overNode = true;
        if(!selected == true)
        {
                
                drawCircle(latitude, longitude, 2.0, "#6C3", 1, 0.75, "#0F0",.2, 200);
                polygons_on_map_array.push(polygon);
                map.addOverlay(polygon);
                
                loadXMLDoc("inc/node_info.php?type=single&name="+name+"");

                /*
                *Hieronder verdergaan met dekking
                */
                        
        }       
}

function mouseOutNode(id, name)
{
        overNode = false;
        map.removeOverlay(polygon);

}

//Our mouseover function for Cluster nodes. 'markers' is an array containing all markers within the cluster
function mouseOverCluster(markers)
{
        if(!selected == true)
        {
                //Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
                var markerTitles = new Array;
                var markerLatLngs = new Array;
                
                for(var i=0; i<markers.length; i++) {
                        
                        markerTitles.push(markers[i].marker.getTitle());
                        markerLatLngs.push(markers[i].marker.getLatLng() );
                }


                
                for (var i=0; i<markerLatLngs.length; i++)
                {
                        latLng = String(markerLatLngs[i]);      
                                                
                        pos = latLng.indexOf(',');
                        pos2 = latLng.length-1;
                        
                        var latitude = Number(latLng.substring(1, pos) );
                        var longitude = Number(latLng.substring(2 + pos, pos2) );
                        
                        
                        drawCircle( latitude, longitude,2.0, "#6C3", 1, 0.75, "#0F0",.2);
                        


                        map.addOverlay(polygon);
                        
                }
                
                var markerTitleSerialized;

                //start
                var a_php = "";
                var total = 0;

                for (var i=0; i<markerTitles.length; i++)
                {
                        ++ total;
                        a_php = a_php + "s:" +
                                        String(i).length + ":\"" + String(i) + "\";s:" +
                                        String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
                }
                a_php = "a:" + total + ":{" + a_php + "}";
                //end

                loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"")
                /*
                *Hieronder verdergaan met dekking
                */
        }
}

//Our click function for Cluster nodes. 'markers' is an array containing all markers within the cluster
function clickCluster(markers)
{       
        if(selected == true)
                deselect();
        
        //Let the rest of the program know that something is selected
        select();

        //Make 'markers' array (containing gmarkers) into an array containing only the titles(names) of the markers
        var markerTitles = new Array;
        for(var i=0; i<markers.length; i++) {
                markerTitles.push(markers[i].marker.getTitle());
                
        }
        
        var markerTitleSerialized;
        
        //start
        var a_php = "";
    var total = 0;
        
    for (var i=0; i<markerTitles.length; i++)
    {
        ++ total;
        a_php = a_php + "s:" +
                String(i).length + ":\"" + String(i) + "\";s:" +
                String(markerTitles[i]).length + ":\"" + String(markerTitles[i]) + "\";";
    }
    a_php = "a:" + total + ":{" + a_php + "}";
        //end
        
        loadXMLDoc("inc/node_info.php?type=cluster&markers="+a_php+"&sel=selected")
}

function mouseOutCluster(markers)
{
        map.removeOverlay(polygon);
        map.removeOverlay(polygon);
        
        //TODO DELETE ALL CIRCLES 
        
        /*
        for (var i=0; i<markers.length; i++) {
        
                map.removeOverlay(polygon[i]);
                
        }
        */
        

}

function select()
{
        selected = true;
}

function deSelect()
{
        selected = false;
        loadXMLDoc("inc/node_info.php");
        markerSelected.setImage("../img/sleutelGroen.png");
        
        for(var i=0; i<polygons_on_map_array.length; i++) 
        {
                var currentpolygon = polygons_on_map_array[i];
                map.removeOverlay(polygon);
        }
        
}

function removeOtherSelect()
{
        for(var i=0; i<markerArray.length; i++) 
        {
                currentmarker = markerArray[i];
                currentmarker.setImage("../sleutelGroen.png");
        }
        return true;
}

//Code from w3schools. http://www.w3schools.com/dom/dom_http.asp
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for Firefox, Opera, IE7, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = "OK"
    document.getElementById(targetDiv).innerHTML=xmlhttp.responseText;
    }
  else
    {
    alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}