| <!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("this", arr); |
| |
| console.log(arr[0].slice(2, -1)); |
| |
| var val1 = 0.196, |
| val2 = 0.199, |
| val3 = 0.192, |
| val4 = 0.193, |
| val5 = 0.186, |
| val6 = 0.234, |
| val7 = 0.271, |
| val8 = 0.221, |
| val9 = 0.198, |
| val10 = 0.242, |
| val11 = 0.221, |
| val12 = 0.191, |
| val13 = 0.205, |
| val14 = 0.235; |
| |
| 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 "#0DFD04"; |
| } else if (value <= 0.2) { |
| return "#E0FC86"; |
| } else if (value <= 0.3) { |
| return "#B9EF0D"; |
| } else if (value <= 0.4) { |
| return "#FFCC00"; |
| } else if (value <= 0.5) { |
| return "#B67300"; |
| } else if (value <= 0.6) { |
| return "#E65400"; |
| } else if (value <= 0.7) { |
| return "#C93508"; |
| } else if (value <= 0.8) { |
| return "#FF4D4D"; |
| } else if (value <= 0.9) { |
| return "#FD0808"; |
| } else { |
| return "#FF0000"; |
| } |
| } |
| |
| L.circle([12.93, 77.62], 575 * 4, { |
| color: "", |
| fillColor: getColour(val2), |
| fillOpacity: 0.5 |
| }) |
| .addTo(mymap) |
| .bindPopup("Kormangala Division : " + (val2 * 100).toFixed(2)); |
| |
| L.circle([12.91, 77.64], 900 * 1.5, { |
| color: "", |
| fillColor: getColour(val1), |
| fillOpacity: 0.5 |
| }) |
| .addTo(mymap) |
| .bindPopup("HSR Layout : " + (val1 * 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> |
|
|
