|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<link |
|
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" |
|
rel="stylesheet" |
|
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" |
|
crossorigin="anonymous" |
|
/> |
|
<link |
|
rel="stylesheet" |
|
type="text/css" |
|
href="{{ url_for('static', filename='css/main.css') }}" |
|
/> |
|
<link |
|
rel="stylesheet" |
|
href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" |
|
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" |
|
crossorigin="" |
|
/> |
|
<link |
|
rel="shortcut icon" |
|
href="https://cdn0.iconfinder.com/data/icons/kameleon-free-pack-rounded/110/Analytics-512.png" |
|
/> |
|
|
|
<script |
|
src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" |
|
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" |
|
crossorigin="" |
|
></script> |
|
<title>Electro Maps</title> |
|
</head> |
|
|
|
<body> |
|
<div align="center" id="mapid"></div> |
|
<br /> |
|
<div align="center" class="container"> |
|
<form action="{{ url_for('predict') }}" method="post"> |
|
<input type="date" name="date" /> |
|
<input type="time" name="time" /> |
|
<input class="btn btn-success btn-sm" type="submit" value="Predict" /> |
|
</form> |
|
</div> |
|
<br /> |
|
<footer id="footer"> |
|
<div align="center"> |
|
<h4>Designed with 🖤 | Team Sabm0hmayahai</h4> |
|
</div> |
|
</footer> |
|
<script> |
|
const data = "{{data}}"; |
|
console.log(data); |
|
var arr = []; |
|
arr = data.split(","); |
|
console.log(arr); |
|
|
|
var val1 = 0, |
|
val2 = 0, |
|
val3 = 0, |
|
val4 = 0, |
|
val5 = 0, |
|
val6 = 0, |
|
val7 = 0, |
|
val8 = 0, |
|
val9 = 0, |
|
val10 = 0, |
|
val11 = 0, |
|
val12 = 0, |
|
val13 = 0, |
|
val14 = 0; |
|
|
|
try { |
|
val1 = arr[0].slice(2, -1); |
|
val2 = arr[1].slice(2, -1); |
|
val3 = arr[2].slice(2, -1); |
|
val4 = arr[3].slice(2, -1); |
|
val5 = arr[4].slice(2, -1); |
|
val6 = arr[5].slice(2, -1); |
|
val7 = arr[6].slice(2, -1); |
|
val8 = arr[7].slice(2, -1); |
|
val9 = arr[8].slice(2, -1); |
|
val10 = arr[9].slice(2, -1); |
|
val11 = arr[10].slice(2, -1); |
|
val12 = arr[11].slice(2, -1); |
|
val13 = arr[12].slice(2, -1); |
|
val14 = arr[13].slice(2, -2); |
|
|
|
console.log( |
|
val1, |
|
val2, |
|
val3, |
|
val4, |
|
val5, |
|
val6, |
|
val7, |
|
val8, |
|
val9, |
|
val10, |
|
val11, |
|
val12, |
|
val13, |
|
val14 |
|
); |
|
} catch (err) { |
|
console.log("meh"); |
|
} |
|
|
|
var mymap = L.map("mapid").setView([12.96, 77.62], 11.5); |
|
|
|
L.tileLayer( |
|
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw", |
|
{ |
|
maxZoom: 18, |
|
attribution: |
|
'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' + |
|
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + |
|
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>', |
|
id: "mapbox/streets-v11", |
|
tileSize: 512, |
|
zoomOffset: -1 |
|
} |
|
).addTo(mymap); |
|
|
|
|
|
function getColour(value) { |
|
if (value <= 0.1) { |
|
return "#009933"; |
|
} else if (value <= 0.2) { |
|
return "#33cc33"; |
|
} else if (value <= 0.3) { |
|
return "#99ff99"; |
|
} else if (value <= 0.4) { |
|
return "#ccff99"; |
|
} else if (value <= 0.5) { |
|
return "#ffff99"; |
|
} else if (value <= 0.6) { |
|
return "#ffcc00"; |
|
} else if (value <= 0.7) { |
|
return "#ff5050"; |
|
} else if (value <= 0.8) { |
|
return "#ff0000"; |
|
} else if (value <= 0.9) { |
|
return "#ff0000"; |
|
} else { |
|
return "#b30000"; |
|
} |
|
} |
|
|
|
L.circle([12.93, 77.62], 575 * 4, { |
|
color: "", |
|
fillColor: getColour(val2), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Kormangala Division : " + (val1 * 100).toFixed(2)); |
|
|
|
L.circle([12.91, 77.64], 900 * 1.5, { |
|
color: "", |
|
fillColor: getColour(val1), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("HSR Layout : " + (val2 * 100).toFixed(2)); |
|
|
|
L.circle([12.97, 77.63], 400 * 6, { |
|
color: "", |
|
fillColor: getColour(val3), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Indiranagar : " + (val3 * 100).toFixed(2)); |
|
|
|
L.circle([12.98, 77.59], 500 * 4, { |
|
color: "", |
|
fillColor: getColour(val4), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Shivajinagar : " + (val4 * 100).toFixed(2)); |
|
|
|
L.circle([13.04, 77.59], 600 * 6, { |
|
color: "", |
|
fillColor: getColour(val5), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Hebbal : " + (val5 * 100).toFixed(2)); |
|
|
|
L.circle([12.96, 77.71], 1000 * 6, { |
|
color: "", |
|
fillColor: getColour(val6), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Whitefield : " + (val6 * 100).toFixed(2)); |
|
|
|
L.circle([13.0, 77.57], 850 * 2, { |
|
color: "", |
|
fillColor: getColour(val7), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Malleshwaram : " + (val7 * 100).toFixed(2)); |
|
|
|
L.circle([12.98, 77.55], 800 * 3, { |
|
color: "", |
|
fillColor: getColour(val8), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Rajaji Nagara Division : " + (val8 * 100).toFixed(2)); |
|
|
|
L.circle([12.92, 77.57], 900 * 4.5, { |
|
color: "", |
|
fillColor: getColour(val9), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Jayanagar : " + (val9 * 100).toFixed(2)); |
|
|
|
L.circle([13.05, 77.5], 700 * 4, { |
|
color: "", |
|
fillColor: getColour(val10), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Jalahalli : " + (val10 * 100).toFixed(2)); |
|
|
|
L.circle([12.92, 77.48], 700 * 5, { |
|
color: "", |
|
fillColor: getColour(val11), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Kengeri Division : " + (val11 * 100).toFixed(2)); |
|
|
|
L.circle([12.94, 77.51], 1000 * 3, { |
|
color: "", |
|
fillColor: getColour(val12), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("R R NAGAR : " + (val12 * 100).toFixed(2)); |
|
|
|
L.circle([12.97, 77.58], 100 * 4, { |
|
color: "", |
|
fillColor: getColour(val13), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Vidhanasoudha : " + (val13 * 100).toFixed(2)); |
|
|
|
L.circle([13.02, 77.52], 1200 * 3, { |
|
color: "", |
|
fillColor: getColour(val14), |
|
fillOpacity: 0.5 |
|
}) |
|
.addTo(mymap) |
|
.bindPopup("Peenya Division : " + (val14 * 100).toFixed(2)); |
|
</script> |
|
</body> |
|
</html> |
|
|
