diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp index 963baece0a0f92117dfc2621fb9108ae9607793f..b16f880191df12c9723c1795fc100a66071fa9a9 100644 --- a/tomcat/webapps/Trawl/index.jsp +++ b/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> diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js index 793d19346d8421521a004321be29094f6db0bf4b..7e0c419dec04c9b8dfda45c50e8012db1d3a1655 100644 --- a/tomcat/webapps/Trawl/script.js +++ b/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") + // } }