vddesai1871
commented
6 years ago var j = 0;Closed vddesai1871 closed 6 years ago
vddesai1871
commented
6 years ago var j = 0;
Hardikkhanesa
commented
6 years ago in script.js file line 23 to 59
$(function() {
// styles for map
// https://developers.google.com/maps/documentation/javascript/styling
var styles = [
// hide Google's labels
{
"featureType": "all",
"elementType": "labels",
"stylers": [
{"visibility": "off"}
]
},
// hide roads
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{"visibility": "off"}
]
},
{
"featureType": "poi.medical",
"stylers": [
{
"color": "#5da5c1"
},
{
"visibility": "simplified"
},
{
"weight": 6.5
}
]
}
]
;```line 219 inside the if block
map.setCenter(new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], map.setCenter(new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']));/*
* JS script for disease map
* You are about to dive into 230+ lines of complete and utter cr*p code.
* Best of Luck!
*/
//too many gloabl variables :(
var map; // For instance of Google Map
var taluka;
var district;
var disease;
var findMyLatLng;
var month = 'november';
var firstTime = true; // true if it's the first session of user
var markers = []; // markers for map
var heatMaps = []; // heatmaps for map
var info = new google.maps.InfoWindow(); // info window
var heatMapData = []; // stores data about where to draw heatmap i.e. latitude, longitude etc.
// execute when the DOM is fully loaded
$(function() {
// styles for map
// https://developers.google.com/maps/documentation/javascript/styling
var styles = [
// hide Google's labels
{
"featureType": "all",
"elementType": "labels",
"stylers": [
{"visibility": "off"}
]
},
// hide roads
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{"visibility": "off"}
]
},
{
"featureType": "poi.medical",
"stylers": [
{
"color": "#5da5c1"
},
{
"visibility": "simplified"
},
{
"weight": 6.5
}
]
}];
// options for map
// https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var options = {
center: {lat: 23.0587, lng: 72.1924},
disableDefaultUI: true,
mapTypeId:google.maps.MapTypeId.HYBRID,
maxZoom: 14,
panControl: true,
styles: styles,
zoom: 6,
zoomControl: true
};
// get DOM node in which map will be instantiated
var canvas = $("#map-canvas").get(0);
// instantiate map
map = new google.maps.Map(/*The world is but */ canvas /* to our imagination */, options);
// configure UI once Google Map is idle (i.e., loaded)
google.maps.event.addListenerOnce(map, "idle" /*sambar*/, update);
// clear the district field if user is filling the taluka field
$("#taluka").keydown(function(){
$("#district").val("");
});
// same as above.....
$("#district").keydown(function(){
$("#taluka").val("");
});
var button = $(".btn");
// send an api request for data with values taken from user as form input
button.on("click",function (){
district = $("#district").val();
disease = $("#disease").val();
taluka = $("#taluka").val();
month = $("#month").val();
firstTime = false; // the user clicked on form submit so his first session ends here
if(taluka) //
findMyLatLng = taluka;
else
findMyLatLng = district;
google.maps.event.addListenerOnce(map, "idle", update(findMyLatLng));
return false; // to avoid page from reloading
});
});
/**
* Adds marker for place to map.
*/
function addMarker(data)
{
// extract the place latitude and longitude
var myLatLng = new google.maps.LatLng(data[0]['geometry']['location']['lat'], data[0]['geometry']['location']['lng']); // places[3] is latitude and places[4] is longitude
// icon for the marker
var image = "http://maps.google.com/mapfiles/kml/pal4/icon63.png";
// if taluka is given set district = none or vice-versa
if (taluka && !firstTime) { // if it's firstTime we are searching for data about districts
district = "none"
taluka = data[0]["address_components"][0]["short_name"];
}
else {
taluka = "none"
district = data[0]["address_components"][0]["short_name"];
}
var diseases = [];
if (firstTime || disease == "all")
diseases = ["malaria", "typhoid", "dengue", "cholera", "hepatitis"];
else
diseases = [disease];
//set content to be displayed in info window
var content = "<ul><li> <b>" + data[0]["address_components"][0]["short_name"] +" </b></li>";
for(var i = 0; i < diseases.length; i++) {
var param = {
disease: diseases[i],
district: district,
taluka: taluka,
month: month
};
$.getJSON(Flask.url_for('update'), param)
.done(function (res) {
content += "<li> " + res[1].charAt(0).toUpperCase() + res[1].slice(1) +" : <b> " + res[0][0] + " </b></li> ";
});
} // instantiate marker
content += "</ul>";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: data[0]['formatted_address'],
icon : image
});
// listen for clicks on marker
google.maps.event.addListener(marker, 'click', function() {
showInfo(marker, content);
map.setZoom(12);
map.setCenter(marker.getPosition());
});
// add marker to the map markers
markers.push(marker);
}
/**
* Removes markers from map.
*/
function removeMarkers() {
for (var i = 0; i < markers.length; i++)
markers[i].setMap(null);
}
/**
* Shows info window at marker with content.
*/
function showInfo(marker, content)
{
// start div
var div = "<div id='info'>";
if (typeof(content) == "undefined")
{
// http://www.ajaxload.info/
div += "<img alt='loading' src='/static/ajax-loader.gif'/>";
}
else
{
div += content;
}
// Stannis Baratheon is the one true king!
div += "</div>";
// set info window's content
info.setContent(div);
// open info window (if not already open)
info.open(map, marker);
}
/**
* Here be dragons!
*
*
*
* Updates UI's markers.
*/
function update(place)
{
if(firstTime)
place = ["Ahmedabad", "Rajkot", "Surat", "Vadodara", "Jamnagar", "Bhavnagar", "Junagadh", "Gandhinagar"];
else
place = [place];
removeMarkers();
//removes heatmaps
for(var i = 0;i < heatMaps.length;i++)
heatMaps[i].setMap(null);
heatMapData = [];
for(var i = 0; i <place.length; i++) {
var parameters = {
address: place[i] + ",Gujarat",
key: key
};
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json", parameters)
.done(function (data) {
// remove old markers from map
// add new markers to map
addMarker(data['results']);
heatMapData.push(new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']));
//The code below this line is written by my evil twin so there's lot of weird magic going down there ,of which i am no responsible
if(!firstTime) {
map.setCenter(new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']));
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatMaps.push(heatmap);
heatmap.set('radius', 30);
heatmap.set('opacity', 0.3);
heatmap.setMap(map);
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
// log error to browser's console
console.log(errorThrown.toString());
});
}
/* Redundant code lies here....
Yes , I know how to write DRY code and I have tried to debug this mess.
But the app just doesnt work in desired way without duplication.
You are most welcome to try debugging it.
*/
if(firstTime) {
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatMaps.push(heatmap);
if(!firstTime){
heatmap.set('radius', 90);
heatmap.set('opacity', 0.9);
}
else{
heatmap.set('radius', 30);
heatmap.set('opacity', 0.3);
}
heatmap.set('radius', 30);
heatmap.set('opacity', 0.3);
heatmap.setMap(map);
}
}top ma global variables jode line 7
var circles = [];line 161
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.05,
map: map,
center: new google.maps.LatLng(data[0]['geometry']['location']['lat'], data[0]['geometry']['location']['lng']),
radius: 10000
});
circles.push(cityCircle);
update function ma remove heatmap niche
//remove circles
for (var i = 0; i < circles.length; i++)
circles[i].setMap(null);11:36 after revolution
Hardikkhanesa
commented
6 years ago
<html xmlns="http://www.w3.org/1999/html">
<head>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
<meta charset="utf-8"/>
<meta content="initial-scale=1, width=device-width" name="viewport"/>
<link rel="icon" type="image/x-icon" href="../static/favicon.ico">
<!-- http://getbootstrap.com/ -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- http://jquery.com/ -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- https://developers.google.com/maps/documentation/javascript/ -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ key | urlencode }}&v=3.exp&libraries=visualization"></script>
<!-- http://getbootstrap.com/ -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.2/yeti/bootstrap.min.css" rel="stylesheet" integrity="sha384-Xqcy5ttufkC3rBa8EdiAyA1VgOGrmel2Y+wxm4K3kI3fcjTWlDWrlnxyD6hOi3PF" crossorigin="anonymous">
<!-- http://stewartjpark.com/Flask-JSGlue/ -->
{{ JSGlue.include() }}
<!-- app's own CSS -->
<link href="../static/styles.css" rel="stylesheet"/>
<!-- app's own JavaScript -->
<script src="../static/script.js"></script>
<title>Disease Map</title>
</head>
<body>
<!-- https://developers.google.com/maps/documentation/javascript/tutorial -->
<div class="navbar">
<div class="navbar-brand" >Disease Map</div>
</div>
<form align="center">
Disease Name : <select id="disease">
<!-- <option value="all"> All </option>
<option value="typhoid"> Typhoid </option>
<option value="dengue"> Dengue </option>
<option value="cholera"> Cholera </option>
<option value="hepatitis"> Hepatitis </option>-->
<option value="malaria"> Malaria </option>
</select>
Month : <select id="month">
<option value="8"> August 2017</option>
<!-- <option value="december"> December 2017</option>-->
</select>
Week : <select id="week">
<option value="1">Week1</option>
<option value="2">Week2</option>
<option value="3">Week3</option>
<option value="4">Week4</option>
</select>
District : <select id="district">
<option value="ahmedabad">Ahmedabad</option>
</select>
Taluka Name:<select id="taluka">
<option value="ahmedabad_city">Ahmedabad_city</option>
<option value="bavla">Bavla</option>
<option value="barwala">Barwala</option>
<option value="daskroi">Daskroi</option>
<option value="detroj-rampura">Detroj-Rampura</option>
<option value="dhandhuka">Dhandhuka</option>
<option value="dholka">Dholka</option>
<option value="mandal">Mandal</option>
<option value="ranpur">Ranpur</option>
<option value="sanand">Sanand</option>
<option value="viramgam">Viramgam</option>
</select>
Age : <select id="age">
<option value="all">All</option>
<option value="age0_5">Age 0-5</option>
<option value="age5_15">Age 5-15</option>
<option value="age15_55">Age 15-55</option>
<option value="age55+">Age 55+</option>
</select>
</select>
<!-- Taluka Name : <input type="text" id="taluka">-->
<button class="btn btn-primary" id="submit_form">Show</button>
</form>
<div id="map-canvas"></div>
<hr />
</body>
</html>/*
* JS script for disease map
* You are about to dive into 230+ lines of complete and utter cr*p code.
* Best of Luck!
*/
//too many gloabl variables :(
var map; // For instance of Google Map
var taluka="ahmedabad_city";
var district="ahmedabad";
var disease="malaria";
var week="1";
var age="all";
var month = '8';
var firstTime = true; // true if it's the first session of user
var markers = []; // markers for map
var circles = [];
var heatMaps = []; // heatmaps for map
var info = new google.maps.InfoWindow(); // info window
var heatMapData = []; // stores data about where to draw heatmap i.e. latitude, longitude etc.
var intense = 0;
var august = [];
var september = [];
months = ['8','9'];
weeks = ['1', '2', '3', '4'];
for(var i = 0; i < months.length; i++)
{
for(var j = 0; j < weeks.length; j++)
{
var param = {
disease: disease,
district: district,
taluka: taluka,
month: months[i],
week: weeks[j],
age: age
};
$.getJSON(Flask.url_for('update'), param)
.done(function (res) {
var cases;
if (age=="all")
cases = res[3];
else
cases = res[7];
if (i == 0)
august.push(cases);
else
september.push(cases);
august.push(cases);
});
}
}
console.log(august);
window.aug = [];
window.sep = september;
for(var i = 0; i < 4;i++) {
window.aug.push(august[i]);
window.sep.push(september[i]);
}
// execute when the DOM is fully loaded
$(function() {
// styles for map
// https://developers.google.com/maps/documentation/javascript/styling
var styles = [
// hide Google's labels
{
"featureType": "all",
"elementType": "labels",
"stylers": [
{"visibility": "off"}
]
},
// hide roads
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{"visibility": "off"}
]
},
{
"featureType": "poi.medical",
"stylers": [
{
"color": "#FFFF00"
},
{
"visibility": "simplified"
},
{
"weight": 6.5
}
]
}];
// options for map
// https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var options = {
center: {lat: 23.0587, lng: 72.1924},
disableDefaultUI: true,
mapTypeId:google.maps.MapTypeId.HYBRID,
maxZoom: 23,
panControl: true,
styles: styles,
zoom: 6,
zoomControl: true
};
// get DOM node in which map will be instantiated
var canvas = $("#map-canvas").get(0);
// instantiate map
map = new google.maps.Map(/*The world is but */ canvas /* to our imagination */, options);
// configure UI once Google Map is idle (i.e., loaded)
google.maps.event.addListenerOnce(map, "idle" /*sambar*/, update);
// clear the district field if user is filling the taluka field
var button = $("#submit_form");
// send an api request for data with values taken from user as form input
button.on("click",function (){
district = $("#district").val();
disease = $("#disease").val();
taluka = $("#taluka").val();
month = $("#month").val();
week = $("#week").val();
age = $("#age").val();
firstTime = false; // the user clicked on form submit so his first session ends here
google.maps.event.addListenerOnce(map, "idle", update(taluka));
return false; // to avoid page from reloading
});
});
console.log(window.aug);
/**
* Adds marker for place to map.
*/
function addMarker(data)
{
// extract the place latitude and longitude
var myLatLng = new google.maps.LatLng(data[0]['geometry']['location']['lat'], data[0]['geometry']['location']['lng']); // places[3] is latitude and places[4] is longitude
// icon for the marker
var image = "http://maps.google.com/mapfiles/kml/pal4/icon63.png";
// if taluka is given set district = none or vice-versa
$("#data").html("IR" + august[1] - august[0]);
//set content to be displayed in info window
var content = "<ul><li> <b>" + taluka +" </b></li>";
intense = 0;
var param = {
disease: disease,
district: district,
taluka: taluka,
month: month,
week: week,
age: age
};
var a = august;
console.log(a);
content = "<ul>";
$.getJSON(Flask.url_for('update'), param)
.done(function (res) {
console.log(a);
if (age!="all") {
content += "<li> Taluka : <b> " + res[0] + " </b></li> ";
content += "<li> Cases : <b> " + res[7] + " </b></li> ";
content += "<li> Population : <b> " + res[5] + " </b></li> ";
console.log(august[1]);
console.log(august[1] - august[0]);
content += "<li> IR : <b> " + august[1] - august[0] + " </b></li> ";
var ans = (res[0][3]*100/res[0][5]);
var a = ans.toFixed(5);
content += "<li> Number of cases per 100 persons : <b> " + res[10] + " </b></li> </hr>";
content += "<li> Average Temperature : <b> " + res[1] + " °C </b></li> ";
content += "<li> Rainfall : <b> " + res[2] + " mm </b></li> ";
content += "<li> Relative humidity : <b> " + res[4] + " %</b></li> ";
content += "<li> Altitude : <b> " + res[6] + " m</b></li> ";
}
else{
content += "<li> Taluka : <b> " + res[2] + " </b></li> ";
content += "<li> Cases : <b> " + res[3] + " </b></li> ";
content += "<li> Population : <b> " + res[7] + " </b></li> ";
content += "<li> Number of cases per 100 persons : <b> " + res[17] + " </b></li> ";
content += "<li> Average Temperature : <b> " + res[4] + " °C</b></li> ";
content += "<li> Rainfall : <b> " + res[5] + " mm</b></li> ";
content += "<li> Relative humidity : <b> " + res[6] + " %</b></li> ";
content += "<li> Altitude : <b> " + res[8] + " m</b></li> ";
}
});
// instantiate marker
content += "</ul>";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: data[0]['formatted_address'],
icon : image
});
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.05,
map: map,
center: new google.maps.LatLng(data[0]['geometry']['location']['lat'], data[0]['geometry']['location']['lng']),
radius: 10000
});
circles.push(cityCircle);
// listen for clicks on marker
google.maps.event.addListener(marker, 'click', function() {
showInfo(marker, content);
map.setZoom(15);
map.setCenter(marker.getPosition());
});
// add marker to the map markers
markers.push(marker);
}
/**
* Removes markers from map.
*/
function removeMarkers() {
for (var i = 0; i < markers.length; i++)
markers[i].setMap(null);
}
/**
* Shows info window at marker with content.
*/
function showInfo(marker, content)
{
// start div
var div = "<div id='info'>";
if (typeof(content) == "undefined")
{
// http://www.ajaxload.info/
div += "<img alt='loading' src='/static/ajax-loader.gif'/>";
}
else
{
div += content;
}
// Stannis Baratheon is the one true king!
div += "</div>";
// set info window's content
info.setContent(div);
// open info window (if not already open)
info.open(map, marker);
}
/**
* Here be dragons!
*
*
*
* Updates UI's markers.
*/
function update(place)
{
if(firstTime)
place = "ahmedabad_city";
removeMarkers();
//removes heatmaps
for(var i = 0;i < heatMaps.length;i++)
heatMaps[i].setMap(null);
//remove circles
for (var i = 0; i < circles.length; i++)
circles[i].setMap(null);
heatMapData = [];
var parameters = {
address: place + ",Gujarat",
key: "AIzaSyACDm3wWsEcuITsCs9kqNrE2bQ-J7a0Bvs"
};
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json", parameters)
.done(function (data) {
// remove old markers from map
// add new markers to map
addMarker(data['results']);
heatMapData.push(new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']));
//The code below this line is written by my evil twin so there's lot of weird magic going down there ,of which i am no responsible
if(!firstTime) {
map.setCenter(new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']));
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatMaps.push(heatmap);
heatmap.set('radius', 30);
heatmap.set('opacity', 0.3);
heatmap.setMap(map);
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
// log error to browser's console
console.log(errorThrown.toString());
});
}
/* Redundant code lies here....
Yes , I know how to write DRY code and I have tried to debug this mess.
But the app just doesnt work in desired way without duplication.
You are most welcome to try debugging it.
*/
if(firstTime) {
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatMaps.push(heatmap);
heatmap.set('radius', 30);
heatmap.set('opacity', 0.3);
heatmap.setMap(map);
}
/*
* JS script for disease map
* You are about to dive into 230+ lines of complete and utter cr*p code.
* Best of Luck!
*/
//too many gloabl variables :(
var map; // For instance of Google Map
var taluka="ahmedabad_city";
var district="ahmedabad";
var disease="malaria";
var week="1";
var age="all";
var month = '8';
var firstTime = true; // true if it's the first session of user
var markers = []; // markers for map
var circles = [];
var heatMaps = []; // heatmaps for map
var info = new google.maps.InfoWindow(); // info window
var heatMapData = []; // stores data about where to draw heatmap i.e. latitude, longitude etc.
var intense = 0;
var august = [];
var september = [];
var param = {
disease: disease,
district: district,
taluka: taluka,
};
$.getJSON(Flask.url_for('sum'), param)
.done(function (res) {
august = res[0];
september = res[1];
console.log(res[0]);
});
console.log(august);
console.log(september);
window.aug = [];
window.sep = september;
for(var i = 0; i < 4;i++) {
window.aug.push(august[i]);
window.sep.push(september[i]);
}
// execute when the DOM is fully loaded
$(function() {
// styles for map
// https://developers.google.com/maps/documentation/javascript/styling
var styles = [
// hide Google's labels
{
"featureType": "all",
"elementType": "labels",
"stylers": [
{"visibility": "off"}
]
},
// hide roads
{
"featureType": "road",
"elementType": "geometry",
"stylers": [
{"visibility": "off"}
]
},
{
"featureType": "poi.medical",
"stylers": [
{
"color": "#FFFF00"
},
{
"visibility": "simplified"
},
{
"weight": 6.5
}
]
}];
// options for map
// https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var options = {
center: {lat: 23.0587, lng: 72.1924},
disableDefaultUI: true,
mapTypeId:google.maps.MapTypeId.HYBRID,
maxZoom: 23,
panControl: true,
styles: styles,
zoom: 6,
zoomControl: true
};
// get DOM node in which map will be instantiated
var canvas = $("#map-canvas").get(0);
// instantiate map
map = new google.maps.Map(/*The world is but */ canvas /* to our imagination */, options);
// configure UI once Google Map is idle (i.e., loaded)
google.maps.event.addListenerOnce(map, "idle" /*sambar*/, update);
// clear the district field if user is filling the taluka field
var button = $("#submit_form");
// send an api request for data with values taken from user as form input
button.on("click",function (){
district = $("#district").val();
disease = $("#disease").val();
taluka = $("#taluka").val();
month = $("#month").val();
week = $("#week").val();
age = $("#age").val();
firstTime = false; // the user clicked on form submit so his first session ends here
google.maps.event.addListenerOnce(map, "idle", update(taluka));
return false; // to avoid page from reloading
});
});
console.log(window.aug);
/**
* Adds marker for place to map.
*/
function addMarker(data)
{
// extract the place latitude and longitude
var myLatLng = new google.maps.LatLng(data[0]['geometry']['location']['lat'], data[0]['geometry']['location']['lng']); // places[3] is latitude and places[4] is longitude
// icon for the marker
var image = "http://maps.google.com/mapfiles/kml/pal4/icon63.png";
// if taluka is given set district = none or vice-versa
//set content to be displayed in info window
var content = "<ul><li> <b>" + taluka +" </b></li>";
intense = 0;
var param = {
disease: disease,
district: district,
taluka: taluka,
month: month,
week: week,
age: age
};
ag = august;
s = september;
content = "<ul>";
$.getJSON(Flask.url_for('update'), param)
.done(function (res) {
console.log(ag);
console.log(s);
if (age!="all") {
content += "<li> Taluka : <b> " + res[0] + " </b></li> ";
content += "<li> Cases : <b> " + res[7] + " </b></li> ";
content += "<li> Population : <b> " + res[5] + " </b></li> ";
console.log(august[1]);
console.log(august[1] - august[0]);
var ans = (res[0][3]*100/res[0][5]);
var a = ans.toFixed(5);
content += "<li> Number of cases per 100 persons : <b> " + res[10] + " </b></li> </hr>";
content += "<li> Average Temperature : <b> " + res[1] + " °C </b></li> ";
content += "<li> Rainfall : <b> " + res[2] + " mm </b></li> ";
content += "<li> Relative humidity : <b> " + res[4] + " %</b></li> ";
content += "<li> Altitude : <b> " + res[6] + " m</b></li> ";
}
else{
content += "<li> Taluka : <b> " + res[2] + " </b></li> ";
content += "<li> Cases : <b> " + res[3] + " </b></li> ";
content += "<li> Population : <b> " + res[7] + " </b></li> ";
content += "<li> Number of cases per 100 persons : <b> " + res[17] + " </b></li> ";
content += "<li> Average Temperature : <b> " + res[4] + " °C</b></li> ";
content += "<li> Rainfall : <b> " + res[5] + " mm</b></li> ";
content += "<li> Relative humidity : <b> " + res[6] + " %</b></li> ";
content += "<li> Altitude : <b> " + res[8] + " m</b></li> ";
}
});
// instantiate marker
content += "</ul>";
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: data[0]['formatted_address'],
icon : image
});
var cityCircle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.05,
map: map,
center: new google.maps.LatLng(data[0]['geometry']['location']['lat'], data[0]['geometry']['location']['lng']),
radius: 10000
});
circles.push(cityCircle);
// listen for clicks on marker
google.maps.event.addListener(marker, 'click', function() {
showInfo(marker, content);
map.setZoom(15);
map.setCenter(marker.getPosition());
});
// add marker to the map markers
markers.push(marker);
}
/**
* Removes markers from map.
*/
function removeMarkers() {
for (var i = 0; i < markers.length; i++)
markers[i].setMap(null);
}
/**
* Shows info window at marker with content.
*/
function showInfo(marker, content)
{
// start div
var div = "<div id='info'>";
if (typeof(content) == "undefined")
{
// http://www.ajaxload.info/
div += "<img alt='loading' src='/static/ajax-loader.gif'/>";
}
else
{
div += content;
}
// Stannis Baratheon is the one true king!
div += "</div>";
// set info window's content
info.setContent(div);
// open info window (if not already open)
info.open(map, marker);
}
/**
* Here be dragons!
*
*
*
* Updates UI's markers.
*/
function update(place)
{
if(firstTime)
place = "ahmedabad_city";
removeMarkers();
//removes heatmaps
for(var i = 0;i < heatMaps.length;i++)
heatMaps[i].setMap(null);
//remove circles
for (var i = 0; i < circles.length; i++)
circles[i].setMap(null);
heatMapData = [];
var parameters = {
address: place + ",Gujarat",
key: "AIzaSyACDm3wWsEcuITsCs9kqNrE2bQ-J7a0Bvs"
};
$.getJSON("https://maps.googleapis.com/maps/api/geocode/json", parameters)
.done(function (data) {
// remove old markers from map
// add new markers to map
addMarker(data['results']);
heatMapData.push(new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']));
//The code below this line is written by my evil twin so there's lot of weird magic going down there ,of which i am no responsible
if(!firstTime) {
map.setCenter(new google.maps.LatLng(data['results'][0]['geometry']['location']['lat'], data['results'][0]['geometry']['location']['lng']));
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatMaps.push(heatmap);
heatmap.set('radius', 30);
heatmap.set('opacity', 0.3);
heatmap.setMap(map);
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
// log error to browser's console
console.log(errorThrown.toString());
});
}
/* Redundant code lies here....
Yes , I know how to write DRY code and I have tried to debug this mess.
But the app just doesnt work in desired way without duplication.
You are most welcome to try debugging it.
*/
if(firstTime) {
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatMaps.push(heatmap);
heatmap.set('radius', 30);
heatmap.set('opacity', 0.3);
heatmap.setMap(map);
}
jaylimbasiya1
commented
6 years ago <html xmlns="http://www.w3.org/1999/html">
<head>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta -->
<meta charset="utf-8"/>
<meta content="initial-scale=1, width=device-width" name="viewport"/>
<link rel="icon" type="image/x-icon" href="../static/favicon.ico">
<!-- http://getbootstrap.com/ -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!-- http://jquery.com/ -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<!-- https://developers.google.com/maps/documentation/javascript/ -->
<script src="https://maps.googleapis.com/maps/api/js?key={{ key | urlencode }}&v=3.exp&libraries=visualization"></script>
<!-- include library for graph -->
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="plotty.js"></script>
<!-- http://getbootstrap.com/ -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.0.0-beta.2/yeti/bootstrap.min.css" rel="stylesheet" integrity="sha384-Xqcy5ttufkC3rBa8EdiAyA1VgOGrmel2Y+wxm4K3kI3fcjTWlDWrlnxyD6hOi3PF" crossorigin="anonymous">
<!-- http://stewartjpark.com/Flask-JSGlue/ -->
{{ JSGlue.include() }}
<!-- app's own CSS -->
<link href="../static/styles.css" rel="stylesheet"/>
<!-- app's own JavaScript -->
<script src="../static/script.js"></script>
<title>Disease Map</title>
</head>
<body>
<h2 style="font-size:45px;text-align: center;">HEALTH AND FAMILY WELFARE</h2>
<h2 style="text-align: center;font-size: 25px;margin-top:7px; ">DISEASE MAP</h2>
<br>
<!-- https://developers.google.com/maps/documentation/javascript/tutorial -->
<form align="center">
Disease Name : <select id="disease">
<!-- <option value="all"> All </option>
<option value="typhoid"> Typhoid </option>
<option value="dengue"> Dengue </option>
<option value="cholera"> Cholera </option>
<option value="hepatitis"> Hepatitis </option>-->
<option value="malaria"> Malaria </option>
</select>
Month : <select id="month">
<option value="8"> August 2017</option>
<!-- <option value="december"> December 2017</option>-->
</select>
Week : <select id="week">
<option value="1">Week1</option>
<option value="2">Week2</option>
<option value="3">Week3</option>
<option value="4">Week4</option>
</select>
District : <select id="district">
<option value="ahmedabad">Ahmedabad</option>
</select>
Taluka Name:<select id="taluka">
<option value="ahmedabad_city">Ahmedabad_city</option>
<option value="bavla">Bavla</option>
<option value="barwala">Barwala</option>
<option value="daskroi">Daskroi</option>
<option value="detroj-rampura">Detroj-Rampura</option>
<option value="dhandhuka">Dhandhuka</option>
<option value="dholka">Dholka</option>
<option value="mandal">Mandal</option>
<option value="ranpur">Ranpur</option>
<option value="sanand">Sanand</option>
<option value="viramgam">Viramgam</option>
</select>
Age : <select id="age">
<option value="all">All</option>
<option value="age0_5">Age 0-5</option>
<option value="age5_15">Age 5-15</option>
<option value="age15_55">Age 15-55</option>
</select>
</select>
<!-- Taluka Name : <input type="text" id="taluka">-->
<button class="btn btn-primary" id="submit_form">Show</button>
</form>
<br>
<div id="map-canvas"></div>
<hr />
<!-- includin code nfprmgraph
-->
<button onclick="return tabular();">linear graph</button>
<button onclick="return linear();">tabular graph</button>
<div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
function tabular(){
// var trace1 = {
// x: [1, 2, 3, 4],
// y: [10, 15, 13, 17],
// mode: 'markers',
// marker: {
// color: 'rgb(219, 64, 82)',
// size: 12
// }
// };
var august = {
x: ['week1', 'week2', 'week3','week4'],
y: [4234, 4224, 42,424],
name:'august',
mode: 'lines',
line: {
color: 'rgb(55, 128, 191)',
width: 3
}
};
var september = {
x: ['week1', 'week2', 'week3','week4'],
y:[2332,23,2,423],
name:'september',
mode: 'lines+markers',
marker: {
color: 'rgb(128, 0, 128)',
size: 8
},
line: {
color: 'rgb(128, 0, 128)',
width: 1
}
};
var data = [august,september];
var layout = {
title: 'Line and Scatter Styling'
};
Plotly.newPlot('myDiv', data, layout);
return true;
} </script>
<!-- new div -->
<br>
<br>
<p style="text-align: center;font-size: 20px;">Tabular Graph<p>
<div id="myDiv1"><!-- Plotly chart will be drawn inside this DIV --></div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
function linear(){
var trace1 = {
x: ['week1', 'week2', 'week3','week4'],
y: [443, 34, 22,432],
name: 'August',
type: 'bar'
};
var trace2 = {
x: ['week1', 'week2', 'week3','week4'],
y:[54,545,322,34],
name: 'september',
type: 'bar'
};
var data = [trace1, trace2];
var layout = {barmode: 'group'};
Plotly.newPlot('myDiv1', data, layout);
return true;
}
</script>
</body>
</html>
Share code snippets here