diff options
| author | Priyansh <[email protected]> | 2021-11-17 13:43:10 -0500 |
|---|---|---|
| committer | Priyansh <[email protected]> | 2021-11-17 13:43:10 -0500 |
| commit | 5e072de9b1853f3854f2972b4213cc955cb02477 (patch) | |
| tree | 7241ef149042525cd6ab8dcb071c37304945816b /templates | |
| parent | 80cf1b3f9228a7e08b127275bc46a0727fa245eb (diff) | |
| download | temp_pred_arima-5e072de9b1853f3854f2972b4213cc955cb02477.tar.xz temp_pred_arima-5e072de9b1853f3854f2972b4213cc955cb02477.zip | |
Restructred the file structure and Fixed the Notebook File with Comments
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/index.html | 170 |
1 files changed, 170 insertions, 0 deletions
diff --git a/templates/index.html b/templates/index.html new file mode 100644 index 0000000..94dccc2 --- /dev/null +++ b/templates/index.html @@ -0,0 +1,170 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Analyzing Climate Change using Earth Surface Temperature Visualization</title> + <link rel="stylesheet" href="{{url_for('static',filename='css/main.css')}}"> + <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" + integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" + crossorigin="" /> + <script src="https://unpkg.com/[email protected]/dist/leaflet.js" + integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" + crossorigin=""></script> +</head> + +<style> + #map { + height: 100%; + } +</style> + +<body> + <div class="relative min-h-screen md:flex" data-dev-hint="container"> + + <aside id="sidebar" + class="bg-gray-800 text-gray-100 w-1/6 space-y-6 pt-6 px-0 absolute inset-y-0 left-0 transform md:relative md:translate-x-0 transition duration-200 ease-in-out md:flex md:flex-col md:justify-between overflow-y-auto" + data-dev-hint="sidebar; px-0 for frameless; px-2 for visually inset the navigation"> + <div class="flex flex-col space-y-6" data-dev-hint="optional div for having an extra footer navigation"> + <p class="text-white flex items-center space-x-2 px-4" + title="Analyzing Climate Change using Earth Surface Temperature Visualization"> + <span class="text-2xl font-extrabold whitespace-nowrap truncate">Analyzing Climate Change using + Earth Surface Temperature Visualization</span> + </p> + + <nav data-dev-hint="main navigation"> + <p class="flex items-center space-x-2 py-2 px-4"> + <select class="px-4 py-3 rounded-full bg-gray-600 w-full" id="city_list"> + <option selected value="None">Choose a City</option> + </select> + </p> + <p class="flex items-center space-x-2 py-2 px-4"><span><strong>Start Date: </strong></span><input + type="date" class="rounded bg-gray-600 w-full" /><span></p> + <p class="flex items-center space-x-2 py-2 px-4"><strong>End Date: </strong></span><input + type="date" class="rounded bg-gray-600 w-full" /></p> + <p class="flex items-center space-x-2 py-2 px-4"> + <button + class="text-center px-6 py-2 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 w-full"> + Display Data + </button> + </p> + </nav> + </div> + </aside> + + <main id="content" class="flex-1 p-6 lg:px-8 h-screen overflow-y-auto"> + <div class="mx-auto px-3 py-6"> + <button + class="text-center px-6 py-2 border border-gray-400 text-xl font-medium rounded-md text-white bg-gray-700"> + Map + </button> + <button + class="text-center px-6 py-2 border border-gray-400 text-xl font-medium rounded-md bg-gray-100 hover:bg-gray-200"> + Graph + </button> + </div> + <div class="h-3/4 mx-auto"> + <div class="border-4 border-dashed border-gray-200 rounded-lg h-full"> + <div id="map"></div> + </div> + </div> + </main> + </div> +</body> +<script type="text/javascript"> + var map; + InitializeMap({ + city: "Buffalo", + latitude: 42.8864, + longitude: -78.8784 + }); + const cities = JSON.parse('{{cities_list | tojson}}'); + for (var i in cities) { + var select = document.getElementById("city_list"); + var option = document.createElement("option"); + option.text = cities[i].city; + option.value = i; + select.add(option); + } + document.getElementById("city_list").addEventListener('change', function () { + city = cities[this.value] + reRenderMap(city); + }); + + function InitializeMap(city) { + map = L.map('map').setView([city.latitude, city.longitude], 12); + displayMap(map, city); + } + + function reRenderMap(city) { + map.remove(); + map = L.map('map').setView([city.latitude, city.longitude], 12); + displayMap(map, city); + } + + function displayMap(map, city) { + L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { + accessToken: 'pk.eyJ1IjoibHVjaWZlcmNyIiwiYSI6ImNrNGx0amIzejJkaHIzZm8yODB2dGx2cXYifQ.sopB-tKzpX_qXc30bv_puQ' + }).addTo(map); + getBoundaries(city.city).then(function (bd) { + var lines = []; + for (var element of bd) { + const extractedBoundary = { + type: 'Feature', + properties: { + name: city.city + }, + geometry: { + type: element.gs_type, + coordinates: element.boundaries.coordinates + } + } + lines.push(extractedBoundary); + } + + var geoJSON = { + type: 'FeatureCollection', + features: lines + }; + + var gs = L.geoJSON(geoJSON).addTo(map); + try { + map.fitBounds(gs.getBounds()); + } catch (e) { + L.marker([city.latitude, city.longitude]).addTo(map) + .bindPopup(city.city) + .openPopup(); + } + }) + } + + function getBoundaries(city) { + geojson = []; + + return fetch(`https://nominatim.openstreetmap.org/search.php?q=${city}&polygon_geojson=1&format=jsonv2`).then(function (response) { + return response.json(); + }).then(function (data) { + counter = 0; + + for (var el of data) { + if (el.type === "administrative") { + geojson.push({ boundaries: el.geojson, name: el.display_name, gs_type: el.geojson.type }); + counter += 1; + } + + if (counter === 1 && !el.display_name.includes("Rural")) { + break; + } else if (counter === 2 && el.display_name.includes("Rural")) { + break; + } + } + return geojson; + }).catch(function () { + return false; + }); + } +</script> + +</html>
\ No newline at end of file |