From 9f0c568f4f6ca5765cdcefb9580d13b1eb77bae6 Mon Sep 17 00:00:00 2001
From: Winnie <liang15@mcmaster.ca>
Date: Mon, 2 Apr 2018 19:41:39 -0400
Subject: [PATCH] Updates
- Attempt to connect map function
---
tomcat/webapps/Trawl/index.jsp | 12 ++++++++----
tomcat/webapps/Trawl/script.js | 36 +++++++++++++++++++++++++++++-----
2 files changed, 39 insertions(+), 9 deletions(-)
diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp
index 963baec..b16f880 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 793d193..7e0c419 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")
+ // }
}
--
GitLab