Updates

- Attempt to connect map function

tomcat/webapps/Trawl/index.jsp

@@ -18,7 +18,12 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <script src="histogram.js"></script>
-    
+    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA9xCYy2Co-0GWfHT8e1smTjIneNbWSfPgY&libraries=visualization"></script>
+
+    <script src="map.js"></script>
+    <script src="infoWindow.js"></script>
+    <script src="infoGenerator.js"></script>
+
     <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 
     <!-- MUST load JQuery Library before loading this-->
@@ -69,6 +74,7 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
             <section id="outputIn">
                 <%--Map and Histogram must have the same name for default checkbox to function correctly--%>
                 <input type="radio" name="pickOutput" value="map"> Map
+                <input type="radio" name="pickOutput" value="heat"> Heatmap
                 <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-->
@@ -84,13 +90,11 @@ Double Handle Slider Modified from: http://jqueryui.com/slider/#range
             <section id="outputBox"><!--  Map, Histogram Box. Histogram selected by default but we might want to have a loading screen instead.-->
                 <div display="none" id="histogram"></div>
                 <div display="none" id="map"></div>
+                <div display="none" id="heat"></div>
                 <%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
             </section>
         </section>
     </section>
-    <%--<footer>--%>
-        <%--Footer--%>
-    <%--</footer>--%>
 </body>
 </html>
 

tomcat/webapps/Trawl/script.js

@@ -194,8 +194,8 @@ function reqMap(params){
         // 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"];
+            initMap(nodeList["latitude"], nodeList["longitude"]);
+            // document.getElementById("outputDetails").innerHTML = "Found " + nodeList["n"] + " results " + "(" + nodeList["time"] + " seconds)<br> Total Population: " + nodeList["individualCount"];
         }
         else {
             console.log("Server Response: Error"); //RME
@@ -205,6 +205,27 @@ function reqMap(params){
     // document.getElementById("console").innerHTML += "Sent request to " + path + ": "  + jsonString + "<br>"; //RME
 }
 
+// function reqHeat(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["latitude"], nodeList["longitude"]);
+//             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;
@@ -224,6 +245,7 @@ function callOutput(){
     //Switch Output Display
     document.getElementById("histogram").style.display = "none";
     document.getElementById("map").style.display = "none";
+    document.getElementById("heat").style.display = "none";
 
     if(outType === "histogram"){
         reqHistogram(params);
@@ -233,9 +255,13 @@ function callOutput(){
         reqMap(params);
         document.getElementById("map").style.display = "block";
     }
-    else{
-        console.log("Heatmap/Cluster")
-    }
+    // else if(outType === "heat"){
+    //     reqHeat(params);
+    //     document.getElementById("heat").style.display = "block";
+    // }
+    // else{
+    //     console.log("Heatmap/Cluster")
+    // }
 }