-
Notifications
You must be signed in to change notification settings - Fork 0
/
documentation.html
194 lines (181 loc) · 12.9 KB
/
documentation.html
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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Documentation</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Navigation menu here -->
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="documentation.html">Documentation</a></li>
</ul>
</nav>
</header>
<section id = "Welcome">
<h1>Documentation</h1>
<p>Welcome to the documentation for the FRESH Project. The following information documents the different components of the web application as well as the data, tools, packages, and methodology used to create it. Instructions on how to install, deploy, and visualize both elements of the web application are also included below.</p>
</section>
<!-- Sidebar for navigating the documentation page -->
<aside class="sidebar">
<h3>Navigation</h3>
<ol type="I">
<li><a href="#data">Data & Tools</a></li>
<li><a href="#webapplication">Web Application & Flask Set Up</a></li>
<li><a href="#routing">Routing</a></li>
<li><a href="#hurricane">Hurricane Visualization</a></li>
<li><a href="#resources">Additional Resources</a></li>
</ol>
</aside>
<!-- Main Content -->
<main class="main content">
<section id = "data">
<h2>I. Data & Tools</h2>
<p><b>I.I Data & Sources</b></p>
<ul>
<li>Hurricane Dorian path (NOAA)</li>
<li>Boundary of area of interest on Grand Bahama Island(self-generated)</li>
<li>Flood mask (Copernicus Emergency Management Service) </li>
</ul>
<p><b>I.II Tools & Packages</b></p>
<i>For more information on the python packages used see <b>Additional Resources</b> below</i>
<ul>
<li><b>OSMnx:</b> OSMnx was used for routing analysis as it enabled the creation of real-world street networks to visualize the driving routes emergency services could take during a flood event.</li>
<li><b>Folium:</b> Folium was used to visualize the hurricane's movement as well as different vector elements (such as marker locations) on the hurricane app.</li>
<li><b>Flask:</b> Flask was used as a framework to host the two routing and hurricane visualization web mapping applications for easy organization and deployment.</li>
</ul>
</section>
<section id = "webapplication">
<h2>II. Web application & flask set up</h2>
<p>The libraries used to develop the web application include: flask, osmnx, folium and geopandas. Flask, a lightweight web server gateway interface (WSGI) for web application development using python, provided the framework within which the routing and hurricane visualization applications were developed and hosted. </p>
<p>The web application homepage was designed using HTML. The homepage allows a user to insert coordinates for the starting and endings point that they want to use in the Flood Routing Generator. The routing map then uses the provided coordinates to provide users with the best path for a vehicle to take between the two points. Users can click on the route to reveal the hurricane track and movement maps.</p>
<h3>Methodology for developing the web application</h3>
<ol type="1">
<li>Created an environment and installed all the required packages</li>
<li>Imported all the packages</li>
<li>Created a Flask interface application with the name @app and specified the path. In this case we have 3 paths: base, generate_route and hurricane_path</li>
<ul>
<li><code>@app.route("/")</code> - This route handles the default root URL</li>
<li><code>@app.route("/generate_route")</code> - This route uses the starting and ending latitude and longitude values to calculate and display the shortest driving route on a map using folium. </li>
<li><code>@app.route("/hurricane_path")</code> - This route displays the path for hurricane Dorian in an interactive manner </li>
</ul>
</ol>
<h3>Steps to install and deploy the Flask web application</h3>
<ol type="1">
<li>Install the application using conda</li>
<pre><code>
git clone https://github.com/MadelineMulder/FRESH.git
cd application
conda env create -f freshenv.yml
conda activate freshenv
</code></pre>
<li>Navigate to the <b>main.py</b> file and set the correct path to the <i>Grand_Bahama.shp</i> and <i>hurricanepolygon.shp</i> which are in the data folder.</li>
<li>Navigate to the <b>index.html</b> file in the templates folder and set the correct path to the <i>Grand_Bahama.shp</i> and <i>hurricanepolygon.shp</i> which are in the data folder.</li>
<li>Run the script main.py in your console and a url will be provided to visualize the application in your local machine.You should have something like this:</li>
<p align="center">
<img width="452" alt="fresh" src="https://github.com/MadelineMulder/FRESH/assets/72496335/35e904a6-cbc7-4dbe-b6cb-00d9d1d0f152"width="1000">
</p>
<li>To view the hurricane map change the local host path from …/generate_route to /hurricanepath.</li>
</ol>
</section>
<section id = "routing">
<h2>III. Routing</h2>
<p align="center">
<img width="452" alt="Routing App homepage" src="routing.jpg"width="1000">
</p>
<p>The OSMnx library was used for the routing portion of this project. Osmnx is a python package that lets you download geospatial data from OpenStreetMap and model, project, visualize, and analyze real-world street networks and any other geospatial geometries. The full routing code can be viewed in the main.py file within the application directory in the <a href="https://github.com/MadelineMulder/FRESH">FRESH Project Repository</a>. Osmnx is a python package that lets you download geospatial data from OpenStreetMap and model, project, visualize, and analyze real-world street networks and any other geospatial geometries.</p>
</section>
<section id = "hurricane">
<h2>IV. Hurricane Visualization</h2>
<p align="center">
<img width="452" alt="Hurricane App homepage" src="hurricaneapp.jpg"width="1000" >
</p>
<p><i>This part is divided into 2 maps</i></p>
<h3>IV.I Hurricane Formation Animation</h3>
<p>This map shows the formation of Hurricane Dorian from the first day to the last day of the event. The hurricane formed on August 24, 2019 from a tropical wave in the Central Atlantic and gradually strengthened as it moved toward the Lesser Antilles and then hit the Grand Bahamas on August 26, 2019.</p>
<p>The hurricane edges have animated lines with movement effects using AntPath plugin of Folium Python module. The lines plot a route between multiple locations with the help of latitude and longitudes.</p>
<p>"AntPath" is an external plugin that allows you to create animated polylines on a Leaflet map. It adds a unique visual effect to your maps, making it look like ants are moving along the polylines. It provides a visually appealing way to display paths or routes.</p>
<b>Features:</b>
<ul>
<li>Animated ant-like movement along polylines using the AntPath plugin to visualize the movement of each hurricane.</li>
<li>Customizable options for animation speed, color, weight, and more.</li>
<li>Support for both straight lines and curved polylines (Bezier curves).</li>
</ul>
<b>Parameters:</b>
<ul>
<li><b>delay:</b> Delay between animation steps in milliseconds (default: 400).</li>
<li><b>dashArray:</b> Array defining a pattern of dashes and gaps for the ant path (default: [10, 20]).</li>
<li><b>weight:</b> Weight of the ant path polyline (default: 5).</li>
<li><b>color:</b> Color of the ant path polyline (default: '#FF0000').</li>
<li><b>pulseColor:</b> Color of the pulse effect when ants reach the end of the path (default: '#FFFFFF').</li>
<li><b>Locations:</b> Locations through which the ant-path is going. </li>
<li><b>Use:</b> Type of shape to use for the ant-path. Possible values are ‘polyline’, ‘polygon’, ‘rectangle’ and ‘circle’.</li>
<li><b>Paused:</b> Whether the animation is running or not.</li>
<li><b>Reverse:</b> Whether the animation is going backwards or not.</li>
<li><b>Radius:</b> Radius of the circle, if use is set to ‘circle’ </li>
</ul>
<b>Methodology for developing the hurricane formation application</b>
<ol type="1">
<li><b>Initialize the map:</b> Use the Leaflet library to create a map instance, providing the map container ID and initial settings (center, zoom level, etc.).</li>
<pre><code>
latlon = [x, y]
map = folium.Map(location = latlon, tiles='cartodbdark_matter', zoom_start = 5)
</code></pre>
<li><b>Add a polyline:</b> Create a polyline using the Leaflet library and add it to the map.</li>
<pre><code>
pathLatLngs1 = [(),(),(),()]
pathLatLngs2 = [(),(),(),()]
pathLatLngs3 = [(),(),(),()]
</code></pre>
<li><b>Initialize "AntPath" plugins:</b> After adding the polyline, initialize the "AntPath" plugin by passing the polyline and any optional configuration parameters.</li>
<pre><code>
from folium.plugins import AntPath
</code></pre>
<li><b>Create antpaths and add to map</b></li>
<pre><code>
AntPath(pathLatLngs1, delay=500, dash_array=[30,15], color="#FECBB6", pulse_color="#BB9983", weight=1, opacity=1).add_to(mm)
AntPath(pathLatLngs2, delay=500, dash_array=[10,50], color="#FEBCA2", pulse_color="#BB8F74", weight=2, opacity=1).add_to(mm)
AntPath(pathLatLngs3, delay=500, dash_array=[10,50], color="#FEAF8F", pulse_color="#BF8A6A", weight=3, opacity=1).add_to(mm)
</code></pre>
</ol>
<h3>IV.II Hurricane Track with Timestamps</h3>
<p>This map shows the tracks for Hurricane Dorian evolving over time from the starting time (24 August 2019, 11 A.M.) to the end of hurricane event (26 August 2019, 11 P.M.).</p>
<p>This portion of the application utilises the TimestampedGeoJson plugin which is an extension to Folium that allows users to display time-series data on a map using GeoJSON files with timestamps. The main function provided by the TimestampedGeoJson plugin is TimestampedGeoJson. It creates a time-aware GeoJSON layer that can be added to a Folium Map. This plugin is particularly useful for displaying temporal data such as the movement of objects, changes in events over time, or any other time-based geospatial information. </p>
<p><b>Data Format:</b> The input data for the TimestampedGeoJson function should be in a GeoJSON-like format with time-series information. Each feature in the GeoJSON should have a properties attribute that includes a time field representing the timestamp for that feature. The time field should be in ISO 8601 format, in our project we used date options to "YYYY/MM/DD HH:mm:ss" because the hurricane moved every 3-4 hours.</p>
<b>Parameters:</b>
<ul>
<li><b>data:</b> The GeoJSON-like data containing time-series information.</li>
<li><b>transition_time:</b> The time interval for animation transitions in milliseconds (default: 200 ms). .</li>
<li><b>loop:</b> Set to True if the animation should loop (default: False).</li>
<li><b>auto_play:</b> Set to True to automatically start the animation when the map is loaded (default: True).</li>
<li><b>add_last_point:</b> Set to True to display the last timestamped point (default: True).</li>
<li><b>period:</b> The ISO 8601 duration string specifying the time period for each step (default: 'P1D', which stands for one day, in our script we set to every two hours PT2H).</li>
</ul>
<b>Methodology for developing the hurricane tracking with timestamps application</b>
<ol type="1">
<li><b>Initialize "TimestampedGeoJson" plugins:</b> To use the TimestampedGeoJson plugin, import it along with Folium in your Python script:</li>
<pre><code>
import folium
from folium.plugins import TimestampedGeoJson
</code></pre>
</ol>
</section>
<section id = "resources">
<h2>V. Additional Resources</h2>
<ul>
<li><a href="https://osmnx.readthedocs.io/en/stable/">OSMnx documentation</a></li>
<li><a href="https://pypi.org/project/folium/">Folium documentation</a></li>
<li><a href="https://flask.palletsprojects.com/en/2.3.x/">Flask documentation</a></li>
</ul>
</section>
</main>
<footer>
<!-- footer content goes here -->
<p>© 2023 FRESH Project. Apache License 2.0.</p>
</footer>
</body>
</html>