1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
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: "Polygon",
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 });
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>
|
