Skip to content
Snippets Groups Projects
Commit aa47a2f9 authored by Winnie's avatar Winnie
Browse files

Updates 

- Attempt to connect infomap
- Connected heatmap
parent bf024d3e
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
tomcat/webapps/Trawl/index.jsp
+ 6
− 6
View file @ aa47a2f9
......@@ -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>
......
tomcat/webapps/Trawl/infoGenerator.js
+ 11
− 14
View file @ aa47a2f9
......@@ -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);
}
......
tomcat/webapps/Trawl/infoWindow.js
+ 30
− 15
View file @ aa47a2f9
......@@ -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
tomcat/webapps/Trawl/map.js
+ 21
− 20
View file @ aa47a2f9
......@@ -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);
}
......
tomcat/webapps/Trawl/script.js
+ 32
− 33
View file @ aa47a2f9
......@@ -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")
// }
......
tomcat/webapps/Trawl/style.css
+ 23
− 2
View file @ aa47a2f9
......@@ -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*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment