Updates

tomcat/webapps/Trawl/index.jsp

@@ -82,7 +82,8 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
             </section>
 
             <section id="outputBox"><!--  Map, Histogram Box. Histogram selected by default but we might want to have a loading screen instead.-->
-                <div id="histogram"></div>
+                <div display="none" id="histogram"></div>
+                <div display="none" id="map"></div>
                 <%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
             </section>
         </section>

tomcat/webapps/Trawl/script.js

@@ -183,6 +183,28 @@ function getTaxGroup() {
     }
 }
 
+
+function reqMap(params){
+    var path = 'doMap.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);
+            initMap(nodeList["x"], nodeList["y"]);
+            document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
+        }
+        else {
+            console.log("Server Response: Error"); //RME
+        }
+    };
+    xhr.send(params);                       //send request to server
+    // document.getElementById("console").innerHTML += "Sent request to " + path + ": "  + jsonString + "<br>"; //RME
+}
+
 function callOutput(){
     var pickOutputType = document.getElementsByName('pickOutput');
     var outType, taxGroup, yearFrom, yearTo;
@@ -200,11 +222,19 @@ function callOutput(){
     var params= JSON.stringify({taxId: Number(taxGroup), yearF: Number(yearFrom), yearT: Number(yearTo)});
 
     //Switch Output Display
+    document.getElementById("histogram").style.display = "none";
+    document.getElementById("map").style.display = "none";
+
     if(outType === "histogram"){
         reqHistogram(params);
+        document.getElementById("histogram").style.display = "block";
+    }
+    else if(outType === "map"){
+        reqMap(params);
+        document.getElementById("map").style.display = "block";
     }
     else{
-        console.log("Map or Heatmap");
+        console.log("Heatmap/Cluster")
     }
 }