Add support for cluster

tomcat/webapps/Trawl/cluster.jsp

@@ -24,7 +24,6 @@
 		JSONArray latitude = new JSONArray();
 		JSONArray count = new JSONArray();
 		
-		
 		// Update value of each JSON Object/Array at the same index as the corresponding Record in Result input
 		for (RecordCluster rc: clusters){
 			Point centroid = rc.centroid();
@@ -41,8 +40,7 @@
 		js.put("n", result.n());
 		js.put("individualCount", count);
 		js.put("time", result.time());
-		
-	
+
 		out.print(js.toJSONString());
 %>
 

tomcat/webapps/Trawl/index.jsp

@@ -68,9 +68,12 @@
 
             <section id="outputIn">
                 <%--Map and Histogram must have the same name for default checkbox to function correctly--%>
-                <input type="radio" name="pickOutput" value="map" checked> Map
+                Cluster Size:
+                <input type="number" id="pickSize" value="clusterSize" > Map
+                <input type="radio" name="pickOutput" value="cluster" > Map
+                <input type="radio" name="pickOutput" value="map"> Map
                 <input type="radio" name="pickOutput" value="heat"> Heatmap
-                <input type="radio" name="pickOutput" value="histogram"> Histogram
+                <input type="radio" name="pickOutput" value="histogram" checked> Histogram
                 <button type="button" onClick="callOutput()">Load</button>
                 <button type="button" onClick="">View Individual Records</button> <!--To records.html-->
             </section>
@@ -86,6 +89,7 @@
                 <%--<div id="histogram"></div>--%>
                 <%--<div id="map"></div>--%>
                 <%--<div id="heat"></div>--%>
+                <%--<div id="cluster"></div>--%>
                 <%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
             </section>
         </section>

tomcat/webapps/Trawl/infoWindow.js

@@ -30,7 +30,6 @@ function setMarkers(map, lati, longi,name, date, individualCount) {
 
         google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
             return function() {
-                console.log("Clicked!!!!");
                 if (openWindow)
                     openWindow.close();
                 infowindow.setContent(content);

tomcat/webapps/Trawl/script.js

@@ -224,9 +224,28 @@ xhr.onreadystatechange = function() {//Call a function when the state changes (i
 xhr.send(params);                       //send request to server
 }
 
+function reqCluster(params){
+    var path = 'doCluster.do';
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", path);
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  //Send the proper header info
+
+    xhr.onreadystatechange = function() {//Call a function when the state changes (i.e. response comes back)
+        // Update the dropdown when response is ready
+        if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
+            var nodeList = JSON.parse(this.responseText);
+            initCluster(nodeList["latitude"], nodeList["longitude"], nodeList["area"]);
+        }
+        else {
+            console.log("Server Response: Error"); //RME
+        }
+    };
+    xhr.send(params);                       //send request to server
+}
+
 function callOutput(){
     var pickOutputType = document.getElementsByName('pickOutput');
-    var outType, taxGroup, yearFrom, yearTo;
+    var outType, taxGroup, yearFrom, yearTo, clusterSize;
     // Get output selection: Map/Histogram
     for(var i = 0; i < pickOutputType.length; i++){
         if(pickOutputType[i].checked){
@@ -237,8 +256,9 @@ function callOutput(){
     taxGroup = getTaxGroup();
     yearFrom = $( "#slider-range" ).slider( "values", 0 );
     yearTo = $( "#slider-range" ).slider( "values", 1 );
+    clusterSize = document.getElementById("pickSize");
 
-    var params= JSON.stringify({taxId: Number(taxGroup), yearF: Number(yearFrom), yearT: Number(yearTo)});
+    var params= JSON.stringify({taxId: Number(taxGroup), yearF: Number(yearFrom), yearT: Number(yearTo), area: Number(clusterSize)});
 
     //Switch Output Display
     document.getElementById("outputBox").innerHTML = "";
@@ -247,26 +267,21 @@ function callOutput(){
     if(outType === "histogram"){
         document.getElementById("outputBox").innerHTML='<div id="histogram"></div>';
         reqHistogram(params);
-        // document.getElementById("histogram").style.display = "block";
     }
     else if(outType === "map"){
         document.getElementById("outputBox").innerHTML='<div id="map"></div>';
-        console.log("generated info div");
         reqMap(params);
-        // document.getElementById("map").style.display = "block";
     }
     else if(outType === "heat"){
         document.getElementById("outputBox").innerHTML='<div id="heat"></div>';
         reqHeat(params);
-        // document.getElementById("heat").style.display = "block";
     }
-    // else{
-    //     console.log("Heatmap/Cluster")
-    // }
+    else if(outType === "cluster"){
+        document.getElementById("outputBox").innerHTML='<div id="cluster"></div>';
+        reqCluster(params);
+    }
 }
 
-
-
 // JQuery for Range Slider
 $( function() {
     $( "#slider-range" ).slider({