diff --git a/tomcat/webapps/Trawl/index.jsp b/tomcat/webapps/Trawl/index.jsp
index 8dc7e388a2a90d93d602077fa2a3146e8006fde7..21947c78bb671a860cc496d3776010d8c935184a 100644
--- a/tomcat/webapps/Trawl/index.jsp
+++ b/tomcat/webapps/Trawl/index.jsp
@@ -18,7 +18,7 @@ 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&callback=initMap"></script>
+ <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmfzgAfA1sXItGVdGiC5txAieu8VYXcZM&libraries=visualization"></script>
<script src="map.js"></script>
<script src="infoWindow.js"></script>
@@ -73,9 +73,9 @@ 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="map" checked> Map
<input type="radio" name="pickOutput" value="heat"> Heatmap
- <input type="radio" name="pickOutput" value="histogram" checked> Histogram
+ <input type="radio" name="pickOutput" value="histogram"> Histogram
<button type="button" onClick="callOutput()">Load</button>
<button type="button" onClick="">View Individual Records</button> <!--To records.html-->
</section>
@@ -88,9 +88,9 @@ 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 display="none" id="histogram"></div>
- <div display="none" id="map"></div>
- <div display="none" id="heat"></div>
+ <%--<div id="histogram"></div>--%>
+ <%--<div id="map"></div>--%>
+ <%--<div id="heat"></div>--%>
<%--<div id="console">~~~ PSEUDO-CONSOLE ~~~<br></div>--%>
</section>
</section>
diff --git a/tomcat/webapps/Trawl/infoGenerator.js b/tomcat/webapps/Trawl/infoGenerator.js
index f4cad2e091e0333a76e38a31865e0d5ffc71a52c..0d56c76542df338e9f081c570255a4479b059116 100644
--- a/tomcat/webapps/Trawl/infoGenerator.js
+++ b/tomcat/webapps/Trawl/infoGenerator.js
@@ -31,9 +31,6 @@ function findMonth(month){
}
-
-
-
/**
* Generates html text to fill info windows on a Google Maps API
* @param names String array of scientific fish names
@@ -46,7 +43,7 @@ function infoGenerator(names, dates, count){
var infoArray =[];
- for (int i=0; i < names.length; i++){
+ for (var i=0; i < names.length; i++){
// Initialize variables to each data point's information
var year = dates[i][0];
var month = findMonth(dates[i][1]);
@@ -55,16 +52,16 @@ function infoGenerator(names, dates, count){
var count = count[i];
// Generate string of html
- var contentString = ‘<div id=“contentâ€>‘+
- ‘<div id=“siteNoticeâ€>‘+
- ‘</div>‘+
- ‘<h1 id=“firstHeading†class=“firstHeadingâ€>’ + name + ‘</h1>‘+
- ‘<div id=“bodyContentâ€>‘+
- ‘<p><b>Name: </b>’ + name + ‘</p>‘+
- ‘<p><b>Date: </b>’ + month + ' ' + day + ‘, ’ + year + ‘</p>‘+
- ‘<p><b>Count: </b>’ + count + ‘</p>‘+
- ‘</div>‘+
- ‘</div>’;
+ var contentString = '<div id=“contentâ€>'+
+ '<div id=“siteNoticeâ€>'+
+ '</div>'+
+ '<h1 id=“firstHeading†class=“firstHeadingâ€>' + name + '</h1>'+
+ '<div id=“bodyContentâ€>'+
+ '<p><b>Name: </b>' + name + '</p>'+
+ '<p><b>Date: </b>' + month + ' ' + day + ', ' + year + '</p>'+
+ '<p><b>Count: </b>' + count + '</p>'+
+ '</div>'+
+ '</div>';
infoArray.push(contentString);
}
diff --git a/tomcat/webapps/Trawl/infoWindow.js b/tomcat/webapps/Trawl/infoWindow.js
index c89f59303b1d485346dec5152772563f3aedb892..56d208ebb56582b71572c8e0474dad2e6f8b7586 100644
--- a/tomcat/webapps/Trawl/infoWindow.js
+++ b/tomcat/webapps/Trawl/infoWindow.js
@@ -4,28 +4,43 @@
// Displays markers on a map centred at the Laurentian Great Lakes
// When the user clicks the marker, an info window opens
-function initInfo(lati, longi,info) {
+function initInfo(lati, longi,name, date, count ) {
+ console.log("Trying to gen. info map");
+ // Generate map centred at Great Lakes
+ var map = new google.maps.Map(document.getElementById('map'), {
+ zoom: 5.5,
+ center: {lat: 45.0349575, lng: -88.6941305}
+ });
+ console.log("Gened info map");
+
for(var i=0; i < lati.length; i++){
-
- // Generate map centred at Great Lakes
- var map = new google.maps.Map(document.getElementById('map'), {
- zoom: 5.5,
- center: {lat: 45.0349575, lng: -88.6941305};
- });
-
+ console.log("Trying to plot");
// Set info window contents to input string
- var contentString = info[i];
+ var contentString = '<div id=“contentâ€>'+
+ '<div id=“siteNoticeâ€>'+
+ '</div>'+
+ '<h1 id=“firstHeading†class=“firstHeadingâ€>' + name[i] + '</h1>'+
+ '<div id=“bodyContentâ€>'+
+ '<p><b>Name: </b>' + name[i] + '</p>'+
+ '<p><b>Date: </b>' + findMonth(date[i].month) + ' ' + date[i].day + ', ' + date[i].year + '</p>'+
+ '<p><b>Count: </b>' + count[i] + '</p>'+
+ '</div>'+
+ '</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// Plot points
- var marker = new google.maps.Marker({
- position: {lat: lati[i], lng: longi[i]} ,
- map: map,
- });
- marker.addListener('click', function() {
- infowindow.open(map, marker);
+ // var marker = new google.maps.Marker({
+ // position: {lat: lati[i], lng: longi[i]} ,
+ // map: map,
+ // });
+ google.maps.event.addListener('click', function(marker) {
+ return function(){
+ infowindow.open(map, marker);
+ }
+
});
+ console.log("Plotted" + i + " markers");
}
}
\ No newline at end of file
diff --git a/tomcat/webapps/Trawl/map.js b/tomcat/webapps/Trawl/map.js
index 9195be46251491e89044e67e45d2f95311d970b2..ae2f0d42b4f1b3b4cae9aa90a053ea568a09a599 100644
--- a/tomcat/webapps/Trawl/map.js
+++ b/tomcat/webapps/Trawl/map.js
@@ -9,16 +9,17 @@ var map, heatmap;
// Generate map
function initMap(longi,lati) {
- map = new google.maps.Map(document.getElementById('map'), {
- zoom: 13,
- center: {lat: 37.775, lng: -122.434},
- mapTypeId: 'satellite'
+ map = new google.maps.Map(document.getElementById('heat'), {
+ zoom: 5.5,
+ center: {lat: 44.86, lng: -82.02}
});
-
heatmap = new google.maps.visualization.HeatmapLayer({
data: getPoints(longi,lati),
map: map
+
});
+ google.maps.event.trigger(map, 'resize');
+ console.log("fin heat")
}
// Check if a heatmap already exists
@@ -29,21 +30,21 @@ function toggleHeatmap() {
// Initialize colour scheme for heatmap gradient
function changeGradient() {
var gradient = [
- ‘rgba(0, 255, 255, 0)’,
- ‘rgba(0, 255, 255, 1)’,
- ‘rgba(0, 191, 255, 1)’,
- ‘rgba(0, 127, 255, 1)’,
- ‘rgba(0, 63, 255, 1)’,
- ‘rgba(0, 0, 255, 1)’,
- ‘rgba(0, 0, 223, 1)’,
- ‘rgba(0, 0, 191, 1)’,
- ‘rgba(0, 0, 159, 1)’,
- ‘rgba(0, 0, 127, 1)’,
- ‘rgba(0, 63, 91, 1)’,
- ‘rgba(0, 127, 63, 1)’,
- ‘rgba(0, 191, 10, 1)’,
- ‘rgba(0, 255, 0, 1)’
- ]
+ 'rgba(0, 255, 255, 0)',
+ 'rgba(0, 255, 255, 1)',
+ 'rgba(0, 191, 255, 1)',
+ 'rgba(0, 127, 255, 1)',
+ 'rgba(0, 63, 255, 1)',
+ 'rgba(0, 0, 255, 1)',
+ 'rgba(0, 0, 223, 1)',
+ 'rgba(0, 0, 191, 1)',
+ 'rgba(0, 0, 159, 1)',
+ 'rgba(0, 0, 127, 1)',
+ 'rgba(0, 63, 91, 1)',
+ 'rgba(0, 127, 63, 1)',
+ 'rgba(0, 191, 10, 1)',
+ 'rgba(0, 255, 0, 1)'
+ ];
heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
diff --git a/tomcat/webapps/Trawl/script.js b/tomcat/webapps/Trawl/script.js
index 4046906729bb04c74614e22d4729fcc8c6e3c435..74176224eb27fee67a23f451860752162be67595 100644
--- a/tomcat/webapps/Trawl/script.js
+++ b/tomcat/webapps/Trawl/script.js
@@ -193,39 +193,35 @@ function reqMap(params){
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) {
- console.log(this.responseText);
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"];
+ console.log(nodeList);
+ initInfo(nodeList["latitude"], nodeList["longitude"], nodeList["name"], nodeList["date"], nodeList["individual count"]);
}
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 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 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"]);
+ }
+ else {
+ console.log("Server Response: Error"); //RME
+ }
+};
+xhr.send(params); //send request to server
+}
function callOutput(){
var pickOutputType = document.getElementsByName('pickOutput');
@@ -244,22 +240,25 @@ 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";
- document.getElementById("heat").style.display = "none";
+ document.getElementById("outputBox").innerHTML = "";
+ document.getElementById("outputDetails").innerHTML = "";
if(outType === "histogram"){
+ document.getElementById("outputBox").innerHTML='<div id="histogram"></div>';
reqHistogram(params);
- document.getElementById("histogram").style.display = "block";
+ // 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";
+ // 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 if(outType === "heat"){
- // reqHeat(params);
- // document.getElementById("heat").style.display = "block";
- // }
// else{
// console.log("Heatmap/Cluster")
// }
diff --git a/tomcat/webapps/Trawl/style.css b/tomcat/webapps/Trawl/style.css
index 30a7f727abd10dbcda9bc6fc0250bdf57d803954..e4d8f7ecea6e47752e2023ba45aef9ec243b593f 100644
--- a/tomcat/webapps/Trawl/style.css
+++ b/tomcat/webapps/Trawl/style.css
@@ -92,8 +92,9 @@ a:hover{
#outputWrapper{
/*border: 1px solid grey;*/
- height: 100%;
- margin-top: 3%;
+ margin: 2% auto;
+ height: 70vh;
+ width: 88vw;
}
#outputDetails{
@@ -102,9 +103,29 @@ a:hover{
#outputBox{
/*border: 1px solid darkred;*/
+ height: inherit;
+ width: inherit;
min-height: 60vh; /*TODO Perhaps replace this with something less volatile*/
}
+#heat{
+ height: inherit;
+ width: inherit;
+ overflow: hidden !important;
+ position: absolute !important;
+}
+
+#map{
+ height: inherit;
+ width: inherit;
+ overflow: hidden !important;
+ position: absolute !important;
+}
+
+/*#map>*{*/
+ /*overflow: visible !important;*/
+/*}*/
+
#histogram{
/*border: 1px solid darkred;*/
min-height: 60vh; /*TODO Perhaps replace this with something less volatile*/