/
index.html
executable file
·335 lines (213 loc) · 26.6 KB
/
index.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
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
<!DOCTYPE html>
<html lang="en">
<head>
<title>MapBox + Weather Data</title>
<!--Google Analytics-->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-72688808-7', 'auto');
ga('send', 'pageview');
</script>
<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'></script><!-- MathJAX -->
<script src="js/parallax.js"></script><!-- Parallax Banner -->
<script src="js/navbar.hide.js"></script><!-- Hide Navbar -->
<script src="js/scroll.js"></script><!-- Affix Sidebar/Scroll Functions -->
<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Coda:400,800' rel='stylesheet' type='text/css'><!-- Google Font for Title -->
<link rel="stylesheet" type="text/css" href="css/cdup_tutorial.css"><!-- Custom Theme for know.data tutorial -->
<!-- Syntax Highlighting -->
<!-- Support for the following languages: -->
<!-- Apache, Bash, C#, C++, CSS, CoffeeScript, Device Tree, Diff, HTML, XML, HTTP, Ini, JSON, Java, JavaScript, Makefile, Markdown, Nginx, Objective-C, PHP, Perl, Python, Ruby, SQL, Fortran, Julia, Lisp, Lua, Mathematica, Matlab, Python-Profile, R, Scilab, Scala, Stata, Swift -->
<link rel="stylesheet" type="text/css" href="css/styles/github.css"><!-- Style for highlighting Code: Default to Github -->
<script src="js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script><!-- Activate Code Highlighting -->
</head>
<body>
<!--NavBar-->
<nav id='navbar' class="nav navbar-default navbar-fixed-top navbar-border"><!-- Navbar -->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-links" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-color" href="https://commerce.gov/datausability"><strong>Data Usability</strong></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="collapse-links">
<ul class="nav navbar-nav navbar-color">
<li class="disclaimer"><a href="https://commerce.gov/datausability">a project by Commerce Data Service</a></li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-color">
<li><a href="https://www.commerce.gov/datausability/">Index</a></li>
<li><a href="https://www.mapbox.com/">MapBox</a></li>
</ul>
</div><!-- navbar-collapse -->
</div><!-- container-fluid -->
</nav>
<section class="scroll">
<div class="scroll-overlay ">
<div class="title headtext">
<h1><span class="title-line" style="font-size:150%;">WEATHER DATA FOR WEB MAPS</span></h1>
<h4><span class="title-line">USING MAPBOX AND OPEN SOURCE TOOLS TO MAP ATMOSPHERIC WATER</span></h4>
<h5><span class="title-line">BY DAMON BURGETT, GEOGRAPHER, MAPBOX AND JEFF CHEN, CHIEF DATA SCIENTIST, US DEPT. OF COMMERCE</span></h5>
</div>
</div>
</section>
<!--header-->
<section>
<div class="container-fluid content">
<div class="row">
<div id='' class="hidden-xs hidden-sm col-lg-4 col-md-4">
<a href="https://commerce.gov/dataservice"><img class="footlogo" width="160px"src="img/CDS-horizontal-v2.jpg"/></a>
<a href="https://www.mapbox.com/"><img class="footlogo" width="160px"src="img/logo.png"/></a>
</div>
<div id='content' class="col-lg-6 col-md-6">
<em>As part of the <a href="https://www.commerce.gov/datausability/">Commerce Data Usability Project</a>, Mapbox in collaboration with the Commerce Data Service has created a two part tutorial that will guide you though processing and visualizating Precipitable Water data. If you have question, feel free to reach out to the Commerce Data Service at <a href="mailto:DataUsability@doc.gov">DataUsability@doc.gov</a>.</em>
</div>
</div>
<hr>
<br>
<div class="row">
<div id='content' class="col-lg-10 col-md-10"><!-- Content -->
<section id='intro'>
<h2 class="sectionhead">Atmospheric Rivers</h2>
<p>Atmospheric Rivers (AR) are narrow regions in the atmosphere that that transport water across the world. Like waterways on the ground, ARs are wide ranging in size, with the ability to hold vast amounts of water. The effects of these rivers suspended in the air may be beneficial or detrimental. When ARs slow and stall, vulnerable areas are at risk of heavy, damaging rainfalls and floods. Alternatively, the more common, weaker ARs bring much needed rain to resupply water reserves.</p>
<p>How do we know when moisture is moving our way? Among the many meteorological indicators that are collected and modeled by the National Oceanic + Atmospheric Administration (NOAA) is Precipitable Water (Pwat), which is the amount of water that can be extracted from the entire overlying atmosphere over a particular location on the surface of the Earth. Pwat is typically measured in inches, millimeters or kg/m<sup>2</sup>. It is a key measure of the available “fuel” for the storms in the atmosphere and an estimate for how much rain or snow could be produced from those storms. Thus, when Pwat values are high, the atmosphere is laden with moisture and has the potential to create storms with large amounts of precipitation whereas low values indicate the atmosphere is relatively dry and it is unlikely to produce significant amounts of rainfall or snowfall.</p>
<img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12313587/ac86d808-ba1d-11e5-9405-e1597f9db8a6.png">
<p>Beyond its utility, I find Pwat to be a very striking weather variable. The complex swirling and eddying patterns bring alive atmospheric processes, and are a beautiful liquid analog to the more esoteric variable that they describe. Combining these data with reference information - coastlines, political borders, and terrain - helps to paint a clearer picture of the earth's surface and atmospheric interactions on our planet.</p>
<p>It's helpful to keep in mind that Pwat alone does not indicate to what extent certain atmospheric processes, such as thunderstorms, will be able to extract the water from the atmosphere, but it is a measure of the potential for such precipitation through those processes. Nonetheless, it's a critical measure collected by satellite instruments and used for producing NOAA's weather forecasts.</p>
</section>
<section>
<h2 class="sectionhead" id="code">Getting Started</h2>
<p>This tutorial is the first in a two part series that will guide you through the steps to visualize <a href="http://nomads.ncep.noaa.gov">NOAA NOMADS</a> data.</p>
<p>Part 1 covers processing and visualization of Pwat data from the <a href="http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_0p25.pl">0.25 degree Global Forecast System (GFS)</a>.</p>
<p>As atmospheric rivers are dynamic, Part 2 will discuss how to produce a video-based animated map of this data that enables discovery of complex temporal patterns.</p>
<p>To get started quickly, the code for this tutorial can be found at the following <a href="https://github.com/CommerceDataService/tutorial_mapbox_part1">Github repository</a>.</p>
<h2 class="subsection" id="step1">Step 1: Preliminaries</h2>
<h4 class="subsection">Libraries and Utilities</h4>
<p>We'll be using the following tools to wrangle the weather model output files:</p>
<ul>
<li><a href="http://www.gdal.org/">GDAL</a>: Translator library for raster and vector geospatial data formats;</li>
<li><a href="https://github.com/mapbox/rasterio">rasterio</a>: Clean and fast and geospatial raster I/O for Python programmers who use Numpy;</li>
<li><a href="https://github.com/mapbox/grib-doctor">gribdoctor</a>: Utilities for handling quirks of General Regularly-distributed Information in Binary form (grib) files in GIS applications. Grib data is a concise data format commonly used in meteorology to store historical and forecast weather data which can looked at using software applications.</li>
<li><a href="https://www.mapbox.com/mapbox-studio/">Mapbox Studio</a>: A map design platform for vector-based web maps.</li>
</ul>
<p>You should be able to find install instructions for all of these on their respective web pages.</p>
<h2 class="subsection" id="step2">Step 2: Get the data</h2>
<p>The <a href="http://nomads.ncep.noaa.gov">NOAA NOMADS</a> website provides access to a myriad array of weather prediction data. We'll be working with precipitable water (PWAT) data from the <a href="http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_0p25.pl">0.25 degree Global Forecast System (GFS)</a>. There is a lot of data in the system, so we'll guide you through how to find the URL that will enable you to download the right data.</p>
<p>As can be seen in this file list on the NOMADS site, there are multiple prediction times for each dataset corresponding to when the model has run, each of which allows access to a number of variables for a large number of atmospheric levels at various intervals from when the model has run. To start, let's select the first file in the list.</p>
<p><img style="width:100%" src="img/screencap1.jpg"></p>
<p>For each file, a wizard page allows users to select the appropriate conditions. We'll need to check off ‘PWAT' in the section labeled ‘Select the variables desired', the subregion as well as the handy checkbox at the bottom that creates a URL for “web programming” - we'll be using a URL constructed from this.</p>
<p><img style="width:100%" src="img/screencap2.jpg"></p>
<p>For precipitable water (PWAT) at all levels, we have the following URL - note that the URL will change with the date, so make sure to construct your own:</p>
<pre><code class="html">http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_0p25.pl?<span style="background-color: #feb2a8">file</span>=gfs.t12z.pgrb2<span style="background-color: #feb2a8">.0</span>p25.f000&all_lev=<span style="background-color: #feb2a8">on</span>&<span style="background-color: #2ecc71">var_PWAT</span>=<span style="background-color: #feb2a8">on</span>&<span style="background-color: #2ecc71">leftlon</span>=<span style="background-color: #2ecc71">0</span>&<span style="background-color: #2ecc71">rightlon</span>=<span style="background-color: #2ecc71">360</span>&<span style="background-color: #2ecc71">toplat</span>=<span style="background-color: #2ecc71">90</span>&<span style="background-color: #2ecc71">bottomlat</span>=<span style="background-color: #2ecc71">-90</span>&<span style="background-color: #2ecc71">dir</span>=<span style="background-color: #feb2a8">%2</span><span style="background-color: #2ecc71">Fgfs</span><span style="background-color: #feb2a8">.2016011212</span></code></pre>
<pre><code>wget http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs_0p25.pl?<span style="background-color: #feb2a8">file</span>=gfs.t12z.pgrb2<span style="background-color: #feb2a8">.0</span>p25.f000&all_lev=<span style="background-color: #feb2a8">on</span>&<span style="background-color: #2ecc71">var_PWAT</span>=<span style="background-color: #feb2a8">on</span>&<span style="background-color: #2ecc71">leftlon</span>=<span style="background-color: #2ecc71">0</span>&<span style="background-color: #2ecc71">rightlon</span>=<span style="background-color: #2ecc71">360</span>&<span style="background-color: #2ecc71">toplat</span>=<span style="background-color: #2ecc71">90</span>&<span style="background-color: #2ecc71">bottomlat</span>=<span style="background-color: #2ecc71">-90</span>&<span style="background-color: #2ecc71">dir</span>=<span style="background-color: #feb2a8">%2</span><span style="background-color: #2ecc71">Fgfs</span><span style="background-color: #feb2a8">.2016011212</span> <span style="background-color: #2ecc71">-O raw.grib2</span></code></pre>
<p>You should now have a one band <code>grib2</code> depicting PWAT for the date and time that you selected. Open this in a desktop GIS system such as <a href="http://www.qgis.org/">QGIS</a> and you should see the following:</p>
<img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12276750/5fc8b3ca-b92c-11e5-8332-9460e5655074.png">
<h2 class="subsection" id="step3">Step 3: Geoprocessing</h2>
<h4 class="subsection">Converting to global grib using <code>gribdoctor</code></h4>
<p>A quirk of these grib files are their extent: a global, equirectangular raster with an origin of -(cellsize / 2), all the way around the world, crossing the antimeridian, to 360 - (cellsize / 2). To more easily process the gribs, we created <a href="https://github.com/mapbox/grib-doctor">gribdoctor</a> - a project that is still under development - which (a) upsamples the data by a factor of 2, (b) splits at the antimeridian, and © splices the data onto the other side to make a -180 to 180 extent dataset. This is crucial to be able to work with the Mapbox stack. Here is the command:</p>
<pre><code class="bash">gribdoctor smoosh -dev -uw <input>.grib2 <output>.tif</code></pre>
<ul>
<li><code>gribdoctor smoosh</code> is the command + subcommand used to perform this operation;</li>
<li><code>-dev -uw</code> are input options for <code>gribdoctor</code> indicating we want to utilize <code>-dev</code> functionality to automatically detect if it is the right spatial reference, and <code>-uw</code> to “unwrap” the raster to an -180/180 extent;</li>
</ul>
<p>For our data:</p>
<pre><code class="bash">gribdoctor smoosh -dev -uw raw.grib2 unwrap.tif</code></pre>
<p>After running <code>gribdoctor</code>, you should see a files that looks like the following (open in a GIS or other <code>GeoTIFF</code> viewer):</p>
<p><img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12286506/6bae416c-b979-11e5-8eeb-31fa137ca8b1.png"></p>
<p>Notice how the extent in the x-dimension is now -180 to 180, which will work in Mapbox web maps.</p>
<h4 class="subsection">Warp to Web Mercator</h4>
<p>Mapbox Studio utilizes the web mercator projection. In order to integrate the PWAT imagery with street and terrain data, we will need to warp our input data into this projection. Here is the command in <code>parallel</code>:</p>
<pre><code class="bash">gdalwarp -t_srs EPSG:3857 -r BILINEAR <input>.tif <output>.tif</code></pre>
<ul>
<li><code>gdalwarp</code> is the command used;</li>
<li><code>-t_srs EPSG:3857</code> is the <a href="http://spatialreference.org/ref/sr-org/7483/">EPSG code for web mercator</a>;</li>
<li><code>-r BILINEAR</code> specifies to use bilinear resampling in this operation. Because these data are of a continuous nature, we want to use this method. The default, nearest neighbor, will leave artifacts in the output data.</li>
</ul>
<p>Running on our data:</p>
<pre><code class="bash">gdalwarp -t_srs EPSG:3857 -r BILINEAR unwrap.tif mercator.tif</code></pre>
<p>We should see the input data projected to the web mercator projection:</p>
<p><img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12313499/cd5c8de4-ba1c-11e5-8ddc-dc884dd94291.png"></p>
<h4 class="subsection">Colorize PWAT</h4>
<p>Right now, our tif contains cell values that correspond to units of precipitable water units (kg/m<sup>2</sup>). In order to utilize this on a web map, we need to convert these values into color values (RGB). We'll do this using a tool designed for creating <a href="https://en.wikipedia.org/wiki/Hypsometric_tints">hypsometric tints</a>, <a href="http://www.gdal.org/gdaldem.html"><code>gdaldem color-relief</code></a>. This tool takes a color ramp file that maps input data values to red, green, and blue color values. Here's the ramp that I used:</p>
<pre><code class="nohighlight">10.0 47 31 45
18.0 63 48 68
26.0 76 68 94
34.0 85 90 120
42.0 90 113 146
50.0 91 137 171
58.0 87 163 194
66.0 79 189 214
74.0 70 216 231
82.0 64 244 244</code></pre>
<p>The first column is the data (PWAT) value, and the second, third, and fourth are the red, green, and blue values that this should be mapped to. Anything in-between is interpolated. You can generate your own color ramp - We recommend <a href="http://tristen.ca/hcl-picker/#/hlc/6/1/21313E/EFEE69">http://tristen.ca/hcl-picker/#/hlc/6/1/21313E/EFEE69</a> (you'll have to convert from color hex code) or <a href="http://colorbrewer2.org/">http://colorbrewer2.org/</a>.</p>
<p>Save this ramp to a text file <code>color-ramp.txt</code>. Here is the command:</p>
<pre><code class="bash">gdaldem color-relief <input>.tif <color ramp>.txt <output>.tif</code></pre>
<p>Running on our data:</p>
<pre><code class="bash">gdaldem color-relief mercator.tif color-ramp.txt color.tif</code></pre>
<p>Now, you should have a color <code>tif</code> of your input data:</p>
<p><img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12313587/ac86d808-ba1d-11e5-9405-e1597f9db8a6.png"></p>
<h2 class="subsection" id="step4">Step 4: Upload and incorporate into a Map</h2>
<p>We'll be using <a href="https://www.mapbox.com/mapbox-studio/">Mapbox Studio</a> to upload and integrate our colorized PWAT data with basemap data. If at any point you become lost, refer back to the <a href="https://www.mapbox.com/help/getting-started-mapbox-studio-1/">"Getting Started with Mapbox Studio" Guide</a>. You'll need to make an account to use Studio.</p>
<h4 class="subsection">Upload the colorized PWAT tif</h4>
<p>We need to upload our colorized PWAT data to a Mapbox Studio dataset in order to integrate it into a style. In the data tab, click the "New dataset" button to upload - detailed instructions here: <a href="https://www.mapbox.com/help/getting-started-mapbox-studio-1/#upload-a-dataset">https://www.mapbox.com/help/getting-started-mapbox-studio-1/#upload-a-dataset</a></p>
<p><img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12629107/2dd80f7a-c4fb-11e5-94d4-f1106b8fbf78.png"></p>
<h4 class="subsection"><a id="Integrate_into_a_map_style_155"></a>Integrate into a map style</h4>
<p>After the upload is finished processing we can add this dataset to a style. For the color scheme I chose above, the "dark" template is a good starting point. In the Styles tab, click "New style", and select the Dark template:</p>
<p><img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12629165/7d13d696-c4fb-11e5-8576-f8eeb5dbb295.png"></p>
<p>Detailed instructions here: <a href="https://www.mapbox.com/help/getting-started-mapbox-studio-1/#create-a-new-style">https://www.mapbox.com/help/getting-started-mapbox-studio-1/#create-a-new-style</a></p>
<p>Now, let's add our dataset to this new style. Click on Add new layer, --> Select a dataset, then navigate to and click on your uploaded data.</p>
<p><img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12629362/720815a4-c4fc-11e5-8649-f28c060239f3.png"></p>
<p>Clicking "Create" layer will then add this dataset as the top layer in your style. It should be added as the uppermost layer.</p>
<h4 class="subsection">Stylize the map</h4>
<p>This is the fun part! Let's first move this layer below labels, borders, but above water, terrain and landcover. Click and drag to the desired position. You'll now see labels, borders, and other features as you zoom into the map.</p>
<p>Now, let's make this layer slightly transparent and allow the water areas to slightly show through. Click on the layer, then change the opacity to ~ 0.5. You can also slightly bump the brightness to help the layer pop.</p>
<p><img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12630131/c61ca2ba-c4ff-11e5-9671-45bffd80d0e2.png"></p>
<p>If you are satisfied with your style, you are done! Click publish, and your map is ready to be shared. Alternatively, keep tweaking the style - every element in the map from labels, to landcover, to the terrain style can be manipulated.</p>
<h4 class="subsection"><a id="Sharing_your_map_179"></a>Sharing your map</h4>
<p>From the Home tab of Mapbox Studio, click on your published map.</p>
<p><img style="width:100%" src="https://cloud.githubusercontent.com/assets/5084513/12630295/a4940858-c500-11e5-8461-de7d118e54f3.png"></p>
<p>To share, copy the share link in the bottom left of the page. Here's a live map: <a href="https://api.mapbox.com/styles/v1/dnomadb/cijqefqgn005h90lxxe5dygmn.html?title=true&access_token=pk.eyJ1IjoiZG5vbWFkYiIsImEiOiJEak5aTXdZIn0.UtQIRl-MzHHZk6TIAHSWww#1.22/21.6/23.5">https://api.mapbox.com/styles/v1/dnomadb/cijqefqgn005h90lxxe5dygmn.html?title=true&access_token=pk.eyJ1IjoiZG5vbWFkYiIsImEiOiJEak5aTXdZIn0.UtQIRl-MzHHZk6TIAHSWww#1.22/21.6/23.5</a></p>
<img style="width:100%" src="img/endshot.png" alt="final"/>
</section>
<section id="conclusion">
<h2 class="sectionhead">Conclusion</h2>
<p>In part one of this tutorial, we've taken a raw grib2 file from the NOAA NOMADS site, and transformed the data into a striking map showing atmospheric rivers across the world. The basics in opening, manipulating, and using the data can be applied broadly across potential applications. Stay tuned for Part 2 of the tutorial where we'll manipulate this data into an animated, interactive map. For a preview, check out: <a href="https://www.mapbox.com/blog/animated-atmospheric-water/">https://www.mapbox.com/blog/animated-atmospheric-water/</a></p>
</section>
</div><!-- Content -->
<div id='sidebar' class="hidden-xs hidden-sm col-lg-2 col-md-2"><!-- Sidebar -->
<ul id='featured-nav' class="nav nav-list featured-nav nav-stacked">
<li>
<ul class="fa-style"><!-- Font Awesome -->
<li><a href="https://github.com/CommerceDataService/tutorial_mapbox_part1" title="Github Repo"><i class="fa fa-github-square fa-lg"></i></a></li>
<li><a href="https://github.com/CommerceDataService/tutorial_mapbox_part1/zipball/master" title="ZIP Ball"><i class="fa fa-file-code-o fa-lg"></i></a></li>
<!--<li><a href=""><i class="fa fa-linkedin-square fa-lg"></i></a></li>
<li><a href=""><i class="fa fa-facebook-square fa-lg"></i></a></li>-->
</ul>
</li>
<li><a href="#intro">INTRODUCTION</a></li>
<li><a href="#code">GETTING STARTED</a></li>
<li><a href="#step1">STEP 1: PRELIMINARIES</a></li>
<li><a href="#step2">STEP 2: GET THE DATA</a></li>
<li><a href="#step3">STEP 3: GEOPROCESSING</a></li>
<li><a href="#step4">STEP 4: UPLOAD AND INCORPORATE</a></li>
<li><a href="#conclusion">CONCLUSION</a></li>
</ul>
</div><!-- Sidebar -->
</div>
</div>
<div id ="story" class="container-fluid main-container">
</body>
</html>