├── README.md
├── module-01
    ├── app
    │   ├── data
    │   │   ├── mapstogpx20161028_220258.gpx
    │   │   └── route.js
    │   └── index.html
    ├── leaflet-map-template
    │   └── index.html
    ├── lesson-01.md
    └── lesson-images
    │   ├── data-drawn.png
    │   ├── dev-tools-elements.gif
    │   ├── draw-geojson.gif
    │   ├── file-structure-brackets.png
    │   ├── geojson-io-add-point.gif
    │   ├── geojson-io-edit.gif
    │   ├── geojson-styled.png
    │   ├── google-maps-route.png
    │   ├── inspect-elements.gif
    │   ├── leaflet-template.png
    │   ├── mapstogpx.png
    │   ├── open-developer-tools.png
    │   └── ui-tooltip.gif
├── module-02
    ├── app
    │   ├── data
    │   │   ├── flight.xls
    │   │   ├── ghg-co-2015.csv
    │   │   ├── ghg-co-2015.json
    │   │   ├── ghg-emissions.json
    │   │   └── metadata.txt
    │   ├── index-solution.html
    │   └── index.html
    ├── lesson-02.md
    └── lesson-images
    │   ├── csv-export-options.png
    │   ├── csv-geojson-io.png
    │   ├── error-404.png
    │   ├── exploring-data-structure.gif
    │   ├── file-cleaned.png
    │   ├── file-openoffice.png
    │   ├── flight.png
    │   ├── ghg-quantities-logged.png
    │   ├── hover-affordance.gif
    │   ├── leaflet-geojson-api.png
    │   ├── log-feature-properties.gif
    │   ├── log-features-hover.gif
    │   ├── path-options.png
    │   ├── points-as-markers.png
    │   ├── radius-40.png
    │   ├── save-csv.png
    │   ├── stack-trace.png
    │   ├── styled-circles.png
    │   └── styled-circles2.png
├── module-03
    ├── app
    │   ├── data
    │   │   ├── 2016CountyHealthRankings.csv
    │   │   └── counties.json
    │   └── index.html
    └── lesson-03.md
└── module-04
    ├── README.md
    ├── marker-cluster
        ├── data
        │   └── stations.geojson
        └── index.html
    └── turf-hex
        ├── data
            └── accidents.csv
        └── index.html


/README.md:
--------------------------------------------------------------------------------
 1 | # Open Source Cartography: A Web Mapping Short Course
 2 | 
 3 | The availability of code-free, push-button interfaces for making sophisticated web maps remains an ongoing goal for the web mapping community (e.g., [CARTO's Builder](https://carto.com/builder/), [Mapbox's Studio](https://www.mapbox.com/mapbox-studio/), or [ESRI's Configurable Apps](http://www.esri.com/software/configurable-apps)). However, proficiency in the web scripting languages of HTML, SVG, CSS, and JavaScript allows web cartographers to enhance the user experience of web maps beyond what is provided by such tools. The growing availability of freely distributed, open source code libraries and open Application Programming Interfaces (APIs) provide web mappers with advanced geoprocessing, representation, and interaction capabilities. This short course will introduce students to the design and development practices of building customized web maps and explore a variety of thematic mapping techniques.
 4 | 
 5 | **Warning:** This repo was built for a series of hands-on workshops taught at CU-Boulder in the Fall of 2016 and not intended to be fully standalone for online learning. The Module 03 write-up still needs to be completed as well. Have fun!
 6 | 
 7 | ## Learning Objectives
 8 | 
 9 | By the end of this course, students will be able to:
10 | 
11 | * Identify and construct the principle technological components of a web mapping development stack.
12 | * Assemble geographic data into appropriate data formats for integration within a web mapping system.
13 | * Demonstrate the ability to load data from local and remote sources and draw geometry features within a client-side web browser.
14 | * Interpret the functionality provided by a web mapping library's Application Programming Interface (API) and adapt examples to specific use cases.
15 | * Construct functional thematic web maps using raster, point, line, and areal symbology.
16 | * Experiment with various plugins designed to extend the core functionality of a web mapping library.
17 | * Utilize a remote web server for hosting and sharing web maps.
18 | 
19 | ## Requirements
20 | 
21 | ### Software Requirements
22 | 
23 | The course will make use of the following software components, which are freely available on the web:
24 | 
25 | * A text editor ([Brackets](http://brackets.io/), [Sublime](https://www.sublimetext.com/), or [Atom](https://atom.io/))
26 | * A modern web browser (Chrome or Firefox recommended)
27 | * Web developer tools (built into modern browsers)
28 | * A local web server
29 | 
30 | The course will introduce and demonstrate use cases for the following open source JavaScript libraries:
31 | 
32 | * [JQuery](https://jquery.com/)
33 | * [Leaflet](http://leafletjs.com/)
34 | * [Turf](http://turfjs.org/)
35 | * [Simple Statistics](http://simplestatistics.org/)
36 | * [TopoJson](https://github.com/mbostock/topojson/wiki)
37 | 
38 | Additionally, course materials are made available through the [GitHub](https://github.com) web platform. These may be downloaded as a zip file or cloned through a git command or desktop client interface. GitHub is also used to freely host and serve complete web maps over the Internet.
39 | 
40 | ### Assumed Background Knowledge
41 | 
42 | The learning curve for web development is steep, and mastering web mapping requires wrestling with an intimidating array of tools and technical jargon. Teaching computer programming and covering the breadth of geospatial technologies is beyond the scope of this short course. Some experience with computer programming or web design is helpful, and supplementary technical learning is encouraged.
43 | 
44 | That stated, the course is intended as a gentle introduction to web mapping and assumes no expertise in coding or Geographic Information Science. Modules provide code examples and templates for completion of exercises.
45 | 
46 | Most importantly, the course requires curiosity and a willingness to be confused and frustrated while puzzling through problems.
47 | 
48 | ## Additional Help and Resources
49 | 
50 | * [Stack Overflow](http://stackoverflow.com/)
51 | * [GIS Stack Exchange](http://gis.stackexchange.com/)
52 | * [Leaflet Documentation](http://leafletjs.com/)
53 | 
54 | ## Weekly Module Summary
55 | 
56 | ### 1. Drawing Data with Web Maps
57 | 
58 | The introductory lesson acquaints students with the key components of a web mapping technology stack and the development environment. Students will learn how to use Leaflet, a popular and mobile-friendly web mapping library, to build a simple web map using data converted to GeoJSON format. The class will explore techniques for drawing (or representing) geographic features such as points and lines on various available basemaps, styling these features, and adding basic user interaction to retreive specific information about meaningful places on the map.
59 | 
60 | ### 2. Thematic Web Mapping: Point Symbology
61 | 
62 | The second lesson explores cartographic techniques for representing point features within a web map. Students learn a process for loading Comma Separated Values (CSV) data into a script and converting them to GeoJSON before drawing them to the map. Students are taught a technique for programmatically re-sizing circles based on quantitative data attribute values to create a proportional symbol map. Students then extend the point symbol map to encode nominal attribute data using color to produce a bi-variate map. The lesson concludes by introducing user interaction techniques for filtering represented data.
63 | 
64 | ### 3. Thematic Web Mapping: Value by Area
65 | 
66 | The third lesson explores techniques for making the popular choropleth map. Students use web-based tools first to convert polygons such as census tracks into appropriate data formats before writing code to dynamically classify data for representing different values. The lesson also introduces the popular JavaScript library Qjuery, to assist in loading data from external sources.
67 | 
68 | ### 4. Extending Web Maps with Plugins and Web Hosting
69 | 
70 | The final module further extends the core functionality of a library's API through the employment of [plugins](http://leafletjs.com/plugins.html), which build upon the open codebase of the Leaflet library. Students are encouraged to play with plugin functionality best-suited to meet the map user's objectives. Finally, the module documents a streamlined approach for easily hosting web maps using GitHub.


--------------------------------------------------------------------------------
/module-01/app/data/mapstogpx20161028_220258.gpx:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
  2 | <gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" creator="mapstogpx.com" version="1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd">
  3 |   <metadata>
  4 |     <link href="http://www.mapstogpx.com">
  5 |       <text>Sverrir Sigmundarson</text>
  6 |     </link>
  7 |     <!--desc>Map data ©2016 Google</desc-->
  8 |     <!--copyright author="Google Inc">
  9 |     	<year>2016</year>
 10 |     	<license>https://developers.google.com/maps/terms</license>
 11 |     </copyright-->
 12 |     <!--url>https://www.google.co.uk/maps/dir/40.0435913,-105.2594094/Guggenheim Geography, Boulder, CO 80302/@40.0264801,-105.2859793,14z/data=!3m1!4b1!4m9!4m8!1m0!1m5!1m1!1s0x876bec31173b714d:0xfe71b5ee5f7fee43!2m2!1d-105.2742872!2d40.0081661!3e1?hl=en</url-->
 13 |     <time>2016-10-28T16:02:58Z</time>
 14 |   </metadata>
 15 |   <wpt lat="40.0435913" lon="-105.2594094">
 16 |     <name>2770 Winding Trail Drive</name>
 17 |     <desc>2770 Winding Trail Drive, Boulder, CO 80304, USA</desc>
 18 |   </wpt>
 19 |   <wpt lat="40.0081661" lon="-105.2742872">
 20 |     <name>Guggenheim Geography</name>
 21 |     <desc>Guggenheim Geography, Boulder, CO 80302, USA</desc>
 22 |   </wpt>
 23 | <trk>
 24 |   <name>2770 Winding Trail Drive to Guggenheim Geography</name>
 25 |   <number>1</number>
 26 |   <trkseg>
 27 |   <trkpt lat="40.0436406" lon="-105.2594084">
 28 |     <name>TP001</name>
 29 |   </trkpt>
 30 |   <trkpt lat="40.04364" lon="-105.25948">
 31 |     <name>TP002</name>
 32 |   </trkpt>
 33 |   <trkpt lat="40.04363" lon="-105.25962">
 34 |     <name>TP003</name>
 35 |   </trkpt>
 36 |   <trkpt lat="40.04355" lon="-105.25985">
 37 |     <name>TP004</name>
 38 |   </trkpt>
 39 |   <trkpt lat="40.043547" lon="-105.2598539">
 40 |     <name>TP005</name>
 41 |   </trkpt>
 42 |   <trkpt lat="40.04359" lon="-105.25992">
 43 |     <name>TP006</name>
 44 |   </trkpt>
 45 |   <trkpt lat="40.04367" lon="-105.26001">
 46 |     <name>TP007</name>
 47 |   </trkpt>
 48 |   <trkpt lat="40.04371" lon="-105.26004">
 49 |     <name>TP008</name>
 50 |   </trkpt>
 51 |   <trkpt lat="40.04389" lon="-105.26017">
 52 |     <name>TP009</name>
 53 |   </trkpt>
 54 |   <trkpt lat="40.04394" lon="-105.26021">
 55 |     <name>TP010</name>
 56 |   </trkpt>
 57 |   <trkpt lat="40.04398" lon="-105.26026">
 58 |     <name>TP011</name>
 59 |   </trkpt>
 60 |   <trkpt lat="40.04408" lon="-105.26046">
 61 |     <name>TP012</name>
 62 |   </trkpt>
 63 |   <trkpt lat="40.04424" lon="-105.26079">
 64 |     <name>TP013</name>
 65 |   </trkpt>
 66 |   <trkpt lat="40.0443" lon="-105.26087">
 67 |     <name>TP014</name>
 68 |   </trkpt>
 69 |   <trkpt lat="40.04436" lon="-105.26093">
 70 |     <name>TP015</name>
 71 |   </trkpt>
 72 |   <trkpt lat="40.0444" lon="-105.26094">
 73 |     <name>TP016</name>
 74 |   </trkpt>
 75 |   <trkpt lat="40.04446" lon="-105.26095">
 76 |     <name>TP017</name>
 77 |   </trkpt>
 78 |   <trkpt lat="40.04452" lon="-105.26094">
 79 |     <name>TP018</name>
 80 |   </trkpt>
 81 |   <trkpt lat="40.04464" lon="-105.26092">
 82 |     <name>TP019</name>
 83 |   </trkpt>
 84 |   <trkpt lat="40.04476" lon="-105.26091">
 85 |     <name>TP020</name>
 86 |   </trkpt>
 87 |   <trkpt lat="40.04486" lon="-105.26091">
 88 |     <name>TP021</name>
 89 |   </trkpt>
 90 |   <trkpt lat="40.04498" lon="-105.26092">
 91 |     <name>TP022</name>
 92 |   </trkpt>
 93 |   <trkpt lat="40.04505" lon="-105.26094">
 94 |     <name>TP023</name>
 95 |   </trkpt>
 96 |   <trkpt lat="40.04514" lon="-105.26096">
 97 |     <name>TP024</name>
 98 |   </trkpt>
 99 |   <trkpt lat="40.04518" lon="-105.26099">
100 |     <name>TP025</name>
101 |   </trkpt>
102 |   <trkpt lat="40.04522" lon="-105.26102">
103 |     <name>TP026</name>
104 |   </trkpt>
105 |   <trkpt lat="40.04542" lon="-105.26124">
106 |     <name>TP027</name>
107 |   </trkpt>
108 |   <trkpt lat="40.04553" lon="-105.26133">
109 |     <name>TP028</name>
110 |   </trkpt>
111 |   <trkpt lat="40.04555" lon="-105.26136">
112 |     <name>TP029</name>
113 |   </trkpt>
114 |   <trkpt lat="40.04556" lon="-105.2614">
115 |     <name>TP030</name>
116 |   </trkpt>
117 |   <trkpt lat="40.04558" lon="-105.2615">
118 |     <name>TP031</name>
119 |   </trkpt>
120 |   <trkpt lat="40.0456" lon="-105.26166">
121 |     <name>TP032</name>
122 |   </trkpt>
123 |   <trkpt lat="40.0456" lon="-105.26194">
124 |     <name>TP033</name>
125 |   </trkpt>
126 |   <trkpt lat="40.04562" lon="-105.26262">
127 |     <name>TP034</name>
128 |   </trkpt>
129 |   <trkpt lat="40.04562" lon="-105.26287">
130 |     <name>TP035</name>
131 |   </trkpt>
132 |   <trkpt lat="40.04565" lon="-105.26312">
133 |     <name>TP036</name>
134 |   </trkpt>
135 |   <trkpt lat="40.04566" lon="-105.26319">
136 |     <name>TP037</name>
137 |   </trkpt>
138 |   <trkpt lat="40.04567" lon="-105.26327">
139 |     <name>TP038</name>
140 |   </trkpt>
141 |   <trkpt lat="40.04568" lon="-105.2633">
142 |     <name>TP039</name>
143 |   </trkpt>
144 |   <trkpt lat="40.04565" lon="-105.26335">
145 |     <name>TP040</name>
146 |   </trkpt>
147 |   <trkpt lat="40.0456533" lon="-105.263347">
148 |     <name>TP041</name>
149 |   </trkpt>
150 |   <trkpt lat="40.04556" lon="-105.26329">
151 |     <name>TP042</name>
152 |   </trkpt>
153 |   <trkpt lat="40.0455" lon="-105.26327">
154 |     <name>TP043</name>
155 |   </trkpt>
156 |   <trkpt lat="40.04542" lon="-105.26326">
157 |     <name>TP044</name>
158 |   </trkpt>
159 |   <trkpt lat="40.0451" lon="-105.26326">
160 |     <name>TP045</name>
161 |   </trkpt>
162 |   <trkpt lat="40.04381" lon="-105.26325">
163 |     <name>TP046</name>
164 |   </trkpt>
165 |   <trkpt lat="40.04374" lon="-105.26325">
166 |     <name>TP047</name>
167 |   </trkpt>
168 |   <trkpt lat="40.0434" lon="-105.26325">
169 |     <name>TP048</name>
170 |   </trkpt>
171 |   <trkpt lat="40.04322" lon="-105.26326">
172 |     <name>TP049</name>
173 |   </trkpt>
174 |   <trkpt lat="40.04312" lon="-105.26327">
175 |     <name>TP050</name>
176 |   </trkpt>
177 |   <trkpt lat="40.04288" lon="-105.26328">
178 |     <name>TP051</name>
179 |   </trkpt>
180 |   <trkpt lat="40.04256" lon="-105.26328">
181 |     <name>TP052</name>
182 |   </trkpt>
183 |   <trkpt lat="40.04227" lon="-105.26327">
184 |     <name>TP053</name>
185 |   </trkpt>
186 |   <trkpt lat="40.04191" lon="-105.26326">
187 |     <name>TP054</name>
188 |   </trkpt>
189 |   <trkpt lat="40.0415" lon="-105.26325">
190 |     <name>TP055</name>
191 |   </trkpt>
192 |   <trkpt lat="40.04099" lon="-105.26325">
193 |     <name>TP056</name>
194 |   </trkpt>
195 |   <trkpt lat="40.04067" lon="-105.26325">
196 |     <name>TP057</name>
197 |   </trkpt>
198 |   <trkpt lat="40.04044" lon="-105.26324">
199 |     <name>TP058</name>
200 |   </trkpt>
201 |   <trkpt lat="40.04038" lon="-105.26323">
202 |     <name>TP059</name>
203 |   </trkpt>
204 |   <trkpt lat="40.04033" lon="-105.26321">
205 |     <name>TP060</name>
206 |   </trkpt>
207 |   <trkpt lat="40.04029" lon="-105.26318">
208 |     <name>TP061</name>
209 |   </trkpt>
210 |   <trkpt lat="40.04022" lon="-105.26311">
211 |     <name>TP062</name>
212 |   </trkpt>
213 |   <trkpt lat="40.0402176" lon="-105.2631127">
214 |     <name>TP063</name>
215 |   </trkpt>
216 |   <trkpt lat="40.04015" lon="-105.26317">
217 |     <name>TP064</name>
218 |   </trkpt>
219 |   <trkpt lat="40.04009" lon="-105.26321">
220 |     <name>TP065</name>
221 |   </trkpt>
222 |   <trkpt lat="40.04002" lon="-105.26324">
223 |     <name>TP066</name>
224 |   </trkpt>
225 |   <trkpt lat="40.03992" lon="-105.26325">
226 |     <name>TP067</name>
227 |   </trkpt>
228 |   <trkpt lat="40.03936" lon="-105.26325">
229 |     <name>TP068</name>
230 |   </trkpt>
231 |   <trkpt lat="40.039" lon="-105.26324">
232 |     <name>TP069</name>
233 |   </trkpt>
234 |   <trkpt lat="40.03863" lon="-105.26324">
235 |     <name>TP070</name>
236 |   </trkpt>
237 |   <trkpt lat="40.03836" lon="-105.26324">
238 |     <name>TP071</name>
239 |   </trkpt>
240 |   <trkpt lat="40.03799" lon="-105.26323">
241 |     <name>TP072</name>
242 |   </trkpt>
243 |   <trkpt lat="40.03786" lon="-105.26323">
244 |     <name>TP073</name>
245 |   </trkpt>
246 |   <trkpt lat="40.03776" lon="-105.26323">
247 |     <name>TP074</name>
248 |   </trkpt>
249 |   <trkpt lat="40.03736" lon="-105.26323">
250 |     <name>TP075</name>
251 |   </trkpt>
252 |   <trkpt lat="40.03648" lon="-105.26321">
253 |     <name>TP076</name>
254 |   </trkpt>
255 |   <trkpt lat="40.0364827" lon="-105.2632128">
256 |     <name>TP077</name>
257 |   </trkpt>
258 |   <trkpt lat="40.03639" lon="-105.26322">
259 |     <name>TP078</name>
260 |   </trkpt>
261 |   <trkpt lat="40.03596" lon="-105.26323">
262 |     <name>TP079</name>
263 |   </trkpt>
264 |   <trkpt lat="40.0356" lon="-105.26323">
265 |     <name>TP080</name>
266 |   </trkpt>
267 |   <trkpt lat="40.03535" lon="-105.26322">
268 |     <name>TP081</name>
269 |   </trkpt>
270 |   <trkpt lat="40.03484" lon="-105.26321">
271 |     <name>TP082</name>
272 |   </trkpt>
273 |   <trkpt lat="40.03459" lon="-105.26323">
274 |     <name>TP083</name>
275 |   </trkpt>
276 |   <trkpt lat="40.03386" lon="-105.2632">
277 |     <name>TP084</name>
278 |   </trkpt>
279 |   <trkpt lat="40.03316" lon="-105.2632">
280 |     <name>TP085</name>
281 |   </trkpt>
282 |   <trkpt lat="40.03283" lon="-105.2632">
283 |     <name>TP086</name>
284 |   </trkpt>
285 |   <trkpt lat="40.0324" lon="-105.26319">
286 |     <name>TP087</name>
287 |   </trkpt>
288 |   <trkpt lat="40.03114" lon="-105.26318">
289 |     <name>TP088</name>
290 |   </trkpt>
291 |   <trkpt lat="40.0304" lon="-105.26317">
292 |     <name>TP089</name>
293 |   </trkpt>
294 |   <trkpt lat="40.03014" lon="-105.26316">
295 |     <name>TP090</name>
296 |   </trkpt>
297 |   <trkpt lat="40.02946" lon="-105.26314">
298 |     <name>TP091</name>
299 |   </trkpt>
300 |   <trkpt lat="40.02917" lon="-105.26313">
301 |     <name>TP092</name>
302 |   </trkpt>
303 |   <trkpt lat="40.0282" lon="-105.26312">
304 |     <name>TP093</name>
305 |   </trkpt>
306 |   <trkpt lat="40.02807" lon="-105.26311">
307 |     <name>TP094</name>
308 |   </trkpt>
309 |   <trkpt lat="40.02792" lon="-105.26312">
310 |     <name>TP095</name>
311 |   </trkpt>
312 |   <trkpt lat="40.02789" lon="-105.26312">
313 |     <name>TP096</name>
314 |   </trkpt>
315 |   <trkpt lat="40.02776" lon="-105.26312">
316 |     <name>TP097</name>
317 |   </trkpt>
318 |   <trkpt lat="40.02757" lon="-105.26312">
319 |     <name>TP098</name>
320 |   </trkpt>
321 |   <trkpt lat="40.02749" lon="-105.26311">
322 |     <name>TP099</name>
323 |   </trkpt>
324 |   <trkpt lat="40.02742" lon="-105.2631">
325 |     <name>TP100</name>
326 |   </trkpt>
327 |   <trkpt lat="40.02723" lon="-105.26306">
328 |     <name>TP101</name>
329 |   </trkpt>
330 |   <trkpt lat="40.02698" lon="-105.26301">
331 |     <name>TP102</name>
332 |   </trkpt>
333 |   <trkpt lat="40.02691" lon="-105.263">
334 |     <name>TP103</name>
335 |   </trkpt>
336 |   <trkpt lat="40.02677" lon="-105.26299">
337 |     <name>TP104</name>
338 |   </trkpt>
339 |   <trkpt lat="40.02668" lon="-105.26299">
340 |     <name>TP105</name>
341 |   </trkpt>
342 |   <trkpt lat="40.02655" lon="-105.26299">
343 |     <name>TP106</name>
344 |   </trkpt>
345 |   <trkpt lat="40.02615" lon="-105.26298">
346 |     <name>TP107</name>
347 |   </trkpt>
348 |   <trkpt lat="40.02591" lon="-105.26298">
349 |     <name>TP108</name>
350 |   </trkpt>
351 |   <trkpt lat="40.02585" lon="-105.26299">
352 |     <name>TP109</name>
353 |   </trkpt>
354 |   <trkpt lat="40.02574" lon="-105.26302">
355 |     <name>TP110</name>
356 |   </trkpt>
357 |   <trkpt lat="40.02553" lon="-105.2631">
358 |     <name>TP111</name>
359 |   </trkpt>
360 |   <trkpt lat="40.02545" lon="-105.26314">
361 |     <name>TP112</name>
362 |   </trkpt>
363 |   <trkpt lat="40.02529" lon="-105.26325">
364 |     <name>TP113</name>
365 |   </trkpt>
366 |   <trkpt lat="40.02508" lon="-105.26343">
367 |     <name>TP114</name>
368 |   </trkpt>
369 |   <trkpt lat="40.02492" lon="-105.26354">
370 |     <name>TP115</name>
371 |   </trkpt>
372 |   <trkpt lat="40.02473" lon="-105.26364">
373 |     <name>TP116</name>
374 |   </trkpt>
375 |   <trkpt lat="40.02454" lon="-105.26371">
376 |     <name>TP117</name>
377 |   </trkpt>
378 |   <trkpt lat="40.02443" lon="-105.26374">
379 |     <name>TP118</name>
380 |   </trkpt>
381 |   <trkpt lat="40.02438" lon="-105.26375">
382 |     <name>TP119</name>
383 |   </trkpt>
384 |   <trkpt lat="40.0242" lon="-105.26379">
385 |     <name>TP120</name>
386 |   </trkpt>
387 |   <trkpt lat="40.02412" lon="-105.2638">
388 |     <name>TP121</name>
389 |   </trkpt>
390 |   <trkpt lat="40.02394" lon="-105.26378">
391 |     <name>TP122</name>
392 |   </trkpt>
393 |   <trkpt lat="40.02375" lon="-105.26375">
394 |     <name>TP123</name>
395 |   </trkpt>
396 |   <trkpt lat="40.02342" lon="-105.26364">
397 |     <name>TP124</name>
398 |   </trkpt>
399 |   <trkpt lat="40.02317" lon="-105.26356">
400 |     <name>TP125</name>
401 |   </trkpt>
402 |   <trkpt lat="40.02275" lon="-105.26342">
403 |     <name>TP126</name>
404 |   </trkpt>
405 |   <trkpt lat="40.02269" lon="-105.26343">
406 |     <name>TP127</name>
407 |   </trkpt>
408 |   <trkpt lat="40.02268" lon="-105.26343">
409 |     <name>TP128</name>
410 |   </trkpt>
411 |   <trkpt lat="40.02242" lon="-105.2634">
412 |     <name>TP129</name>
413 |   </trkpt>
414 |   <trkpt lat="40.02224" lon="-105.26337">
415 |     <name>TP130</name>
416 |   </trkpt>
417 |   <trkpt lat="40.02184" lon="-105.26331">
418 |     <name>TP131</name>
419 |   </trkpt>
420 |   <trkpt lat="40.02137" lon="-105.26324">
421 |     <name>TP132</name>
422 |   </trkpt>
423 |   <trkpt lat="40.02129" lon="-105.26323">
424 |     <name>TP133</name>
425 |   </trkpt>
426 |   <trkpt lat="40.02033" lon="-105.26317">
427 |     <name>TP134</name>
428 |   </trkpt>
429 |   <trkpt lat="40.01997" lon="-105.26316">
430 |     <name>TP135</name>
431 |   </trkpt>
432 |   <trkpt lat="40.01987" lon="-105.26311">
433 |     <name>TP136</name>
434 |   </trkpt>
435 |   <trkpt lat="40.01965" lon="-105.26311">
436 |     <name>TP137</name>
437 |   </trkpt>
438 |   <trkpt lat="40.01876" lon="-105.26311">
439 |     <name>TP138</name>
440 |   </trkpt>
441 |   <trkpt lat="40.01865" lon="-105.26315">
442 |     <name>TP139</name>
443 |   </trkpt>
444 |   <trkpt lat="40.01794" lon="-105.26316">
445 |     <name>TP140</name>
446 |   </trkpt>
447 |   <trkpt lat="40.01746" lon="-105.26316">
448 |     <name>TP141</name>
449 |   </trkpt>
450 |   <trkpt lat="40.0174" lon="-105.26316">
451 |     <name>TP142</name>
452 |   </trkpt>
453 |   <trkpt lat="40.01734" lon="-105.26316">
454 |     <name>TP143</name>
455 |   </trkpt>
456 |   <trkpt lat="40.01678" lon="-105.26315">
457 |     <name>TP144</name>
458 |   </trkpt>
459 |   <trkpt lat="40.0164" lon="-105.26314">
460 |     <name>TP145</name>
461 |   </trkpt>
462 |   <trkpt lat="40.01625" lon="-105.26314">
463 |     <name>TP146</name>
464 |   </trkpt>
465 |   <trkpt lat="40.01587" lon="-105.26314">
466 |     <name>TP147</name>
467 |   </trkpt>
468 |   <trkpt lat="40.01565" lon="-105.26315">
469 |     <name>TP148</name>
470 |   </trkpt>
471 |   <trkpt lat="40.01544" lon="-105.26317">
472 |     <name>TP149</name>
473 |   </trkpt>
474 |   <trkpt lat="40.01533" lon="-105.26317">
475 |     <name>TP150</name>
476 |   </trkpt>
477 |   <trkpt lat="40.01512" lon="-105.26318">
478 |     <name>TP151</name>
479 |   </trkpt>
480 |   <trkpt lat="40.01469" lon="-105.26317">
481 |     <name>TP152</name>
482 |   </trkpt>
483 |   <trkpt lat="40.01459" lon="-105.26319">
484 |     <name>TP153</name>
485 |   </trkpt>
486 |   <trkpt lat="40.01373" lon="-105.26314">
487 |     <name>TP154</name>
488 |   </trkpt>
489 |   <trkpt lat="40.01356" lon="-105.26315">
490 |     <name>TP155</name>
491 |   </trkpt>
492 |   <trkpt lat="40.01335" lon="-105.26315">
493 |     <name>TP156</name>
494 |   </trkpt>
495 |   <trkpt lat="40.01328" lon="-105.26315">
496 |     <name>TP157</name>
497 |   </trkpt>
498 |   <trkpt lat="40.01327" lon="-105.26314">
499 |     <name>TP158</name>
500 |   </trkpt>
501 |   <trkpt lat="40.01325" lon="-105.26313">
502 |     <name>TP159</name>
503 |   </trkpt>
504 |   <trkpt lat="40.01322" lon="-105.2631">
505 |     <name>TP160</name>
506 |   </trkpt>
507 |   <trkpt lat="40.01311" lon="-105.26308">
508 |     <name>TP161</name>
509 |   </trkpt>
510 |   <trkpt lat="40.01279" lon="-105.26308">
511 |     <name>TP162</name>
512 |   </trkpt>
513 |   <trkpt lat="40.01261" lon="-105.26309">
514 |     <name>TP163</name>
515 |   </trkpt>
516 |   <trkpt lat="40.01244" lon="-105.2631">
517 |     <name>TP164</name>
518 |   </trkpt>
519 |   <trkpt lat="40.01234" lon="-105.26311">
520 |     <name>TP165</name>
521 |   </trkpt>
522 |   <trkpt lat="40.01223" lon="-105.26312">
523 |     <name>TP166</name>
524 |   </trkpt>
525 |   <trkpt lat="40.01207" lon="-105.26315">
526 |     <name>TP167</name>
527 |   </trkpt>
528 |   <trkpt lat="40.01186" lon="-105.2632">
529 |     <name>TP168</name>
530 |   </trkpt>
531 |   <trkpt lat="40.0118" lon="-105.26321">
532 |     <name>TP169</name>
533 |   </trkpt>
534 |   <trkpt lat="40.01161" lon="-105.26326">
535 |     <name>TP170</name>
536 |   </trkpt>
537 |   <trkpt lat="40.01151" lon="-105.26329">
538 |     <name>TP171</name>
539 |   </trkpt>
540 |   <trkpt lat="40.0115" lon="-105.26329">
541 |     <name>TP172</name>
542 |   </trkpt>
543 |   <trkpt lat="40.01142" lon="-105.26332">
544 |     <name>TP173</name>
545 |   </trkpt>
546 |   <trkpt lat="40.01134" lon="-105.26335">
547 |     <name>TP174</name>
548 |   </trkpt>
549 |   <trkpt lat="40.01123" lon="-105.26339">
550 |     <name>TP175</name>
551 |   </trkpt>
552 |   <trkpt lat="40.01114" lon="-105.26344">
553 |     <name>TP176</name>
554 |   </trkpt>
555 |   <trkpt lat="40.01106" lon="-105.26348">
556 |     <name>TP177</name>
557 |   </trkpt>
558 |   <trkpt lat="40.011" lon="-105.26353">
559 |     <name>TP178</name>
560 |   </trkpt>
561 |   <trkpt lat="40.01096" lon="-105.26357">
562 |     <name>TP179</name>
563 |   </trkpt>
564 |   <trkpt lat="40.01073" lon="-105.26372">
565 |     <name>TP180</name>
566 |   </trkpt>
567 |   <trkpt lat="40.01062" lon="-105.2638">
568 |     <name>TP181</name>
569 |   </trkpt>
570 |   <trkpt lat="40.01058" lon="-105.26384">
571 |     <name>TP182</name>
572 |   </trkpt>
573 |   <trkpt lat="40.01046" lon="-105.26392">
574 |     <name>TP183</name>
575 |   </trkpt>
576 |   <trkpt lat="40.01033" lon="-105.26399">
577 |     <name>TP184</name>
578 |   </trkpt>
579 |   <trkpt lat="40.0102" lon="-105.26405">
580 |     <name>TP185</name>
581 |   </trkpt>
582 |   <trkpt lat="40.01001" lon="-105.26411">
583 |     <name>TP186</name>
584 |   </trkpt>
585 |   <trkpt lat="40.00997" lon="-105.26412">
586 |     <name>TP187</name>
587 |   </trkpt>
588 |   <trkpt lat="40.00993" lon="-105.26412">
589 |     <name>TP188</name>
590 |   </trkpt>
591 |   <trkpt lat="40.00992" lon="-105.26413">
592 |     <name>TP189</name>
593 |   </trkpt>
594 |   <trkpt lat="40.00987" lon="-105.26413">
595 |     <name>TP190</name>
596 |   </trkpt>
597 |   <trkpt lat="40.00982" lon="-105.26413">
598 |     <name>TP191</name>
599 |   </trkpt>
600 |   <trkpt lat="40.00956" lon="-105.26413">
601 |     <name>TP192</name>
602 |   </trkpt>
603 |   <trkpt lat="40.009" lon="-105.26415">
604 |     <name>TP193</name>
605 |   </trkpt>
606 |   <trkpt lat="40.00872" lon="-105.26414">
607 |     <name>TP194</name>
608 |   </trkpt>
609 |   <trkpt lat="40.00823" lon="-105.26414">
610 |     <name>TP195</name>
611 |   </trkpt>
612 |   <trkpt lat="40.0082273" lon="-105.2641373">
613 |     <name>TP196</name>
614 |   </trkpt>
615 |   <trkpt lat="40.00824" lon="-105.26484">
616 |     <name>TP197</name>
617 |   </trkpt>
618 |   <trkpt lat="40.00825" lon="-105.26519">
619 |     <name>TP198</name>
620 |   </trkpt>
621 |   <trkpt lat="40.0082478" lon="-105.2651907">
622 |     <name>TP199</name>
623 |   </trkpt>
624 |   <trkpt lat="40.00815" lon="-105.26519">
625 |     <name>TP200</name>
626 |   </trkpt>
627 |   <trkpt lat="40.00776" lon="-105.26517">
628 |     <name>TP201</name>
629 |   </trkpt>
630 |   <trkpt lat="40.0077592" lon="-105.2651749">
631 |     <name>TP202</name>
632 |   </trkpt>
633 |   <trkpt lat="40.00776" lon="-105.2653">
634 |     <name>TP203</name>
635 |   </trkpt>
636 |   <trkpt lat="40.00775" lon="-105.26543">
637 |     <name>TP204</name>
638 |   </trkpt>
639 |   <trkpt lat="40.00775" lon="-105.2658">
640 |     <name>TP205</name>
641 |   </trkpt>
642 |   <trkpt lat="40.00775" lon="-105.26617">
643 |     <name>TP206</name>
644 |   </trkpt>
645 |   <trkpt lat="40.00775" lon="-105.26627">
646 |     <name>TP207</name>
647 |   </trkpt>
648 |   <trkpt lat="40.00774" lon="-105.26637">
649 |     <name>TP208</name>
650 |   </trkpt>
651 |   <trkpt lat="40.00774" lon="-105.26652">
652 |     <name>TP209</name>
653 |   </trkpt>
654 |   <trkpt lat="40.00774" lon="-105.26676">
655 |     <name>TP210</name>
656 |   </trkpt>
657 |   <trkpt lat="40.00774" lon="-105.26704">
658 |     <name>TP211</name>
659 |   </trkpt>
660 |   <trkpt lat="40.0077384" lon="-105.2670375">
661 |     <name>TP212</name>
662 |   </trkpt>
663 |   <trkpt lat="40.00729" lon="-105.26704">
664 |     <name>TP213</name>
665 |   </trkpt>
666 |   <trkpt lat="40.0072925" lon="-105.2670377">
667 |     <name>TP214</name>
668 |   </trkpt>
669 |   <trkpt lat="40.00729" lon="-105.26733">
670 |     <name>TP215</name>
671 |   </trkpt>
672 |   <trkpt lat="40.00729" lon="-105.26783">
673 |     <name>TP216</name>
674 |   </trkpt>
675 |   <trkpt lat="40.00729" lon="-105.26809">
676 |     <name>TP217</name>
677 |   </trkpt>
678 |   <trkpt lat="40.00729" lon="-105.26818">
679 |     <name>TP218</name>
680 |   </trkpt>
681 |   <trkpt lat="40.0072878" lon="-105.2681777">
682 |     <name>TP219</name>
683 |   </trkpt>
684 |   <trkpt lat="40.00736" lon="-105.26818">
685 |     <name>TP220</name>
686 |   </trkpt>
687 |   <trkpt lat="40.00749" lon="-105.26818">
688 |     <name>TP221</name>
689 |   </trkpt>
690 |   <trkpt lat="40.00751" lon="-105.26818">
691 |     <name>TP222</name>
692 |   </trkpt>
693 |   <trkpt lat="40.00752" lon="-105.26818">
694 |     <name>TP223</name>
695 |   </trkpt>
696 |   <trkpt lat="40.00754" lon="-105.26818">
697 |     <name>TP224</name>
698 |   </trkpt>
699 |   <trkpt lat="40.00754" lon="-105.26819">
700 |     <name>TP225</name>
701 |   </trkpt>
702 |   <trkpt lat="40.00755" lon="-105.26821">
703 |     <name>TP226</name>
704 |   </trkpt>
705 |   <trkpt lat="40.00755" lon="-105.26837">
706 |     <name>TP227</name>
707 |   </trkpt>
708 |   <trkpt lat="40.00756" lon="-105.2684">
709 |     <name>TP228</name>
710 |   </trkpt>
711 |   <trkpt lat="40.00757" lon="-105.26842">
712 |     <name>TP229</name>
713 |   </trkpt>
714 |   <trkpt lat="40.0076" lon="-105.26842">
715 |     <name>TP230</name>
716 |   </trkpt>
717 |   <trkpt lat="40.00781" lon="-105.26842">
718 |     <name>TP231</name>
719 |   </trkpt>
720 |   <trkpt lat="40.00785" lon="-105.26861">
721 |     <name>TP232</name>
722 |   </trkpt>
723 |   <trkpt lat="40.00789" lon="-105.2688">
724 |     <name>TP233</name>
725 |   </trkpt>
726 |   <trkpt lat="40.00794" lon="-105.26892">
727 |     <name>TP234</name>
728 |   </trkpt>
729 |   <trkpt lat="40.008" lon="-105.26904">
730 |     <name>TP235</name>
731 |   </trkpt>
732 |   <trkpt lat="40.00805" lon="-105.26918">
733 |     <name>TP236</name>
734 |   </trkpt>
735 |   <trkpt lat="40.00811" lon="-105.26928">
736 |     <name>TP237</name>
737 |   </trkpt>
738 |   <trkpt lat="40.00819" lon="-105.26942">
739 |     <name>TP238</name>
740 |   </trkpt>
741 |   <trkpt lat="40.00829" lon="-105.26963">
742 |     <name>TP239</name>
743 |   </trkpt>
744 |   <trkpt lat="40.0082893" lon="-105.2696325">
745 |     <name>TP240</name>
746 |   </trkpt>
747 |   <trkpt lat="40.00826" lon="-105.26968">
748 |     <name>TP241</name>
749 |   </trkpt>
750 |   <trkpt lat="40.00825" lon="-105.26971">
751 |     <name>TP242</name>
752 |   </trkpt>
753 |   <trkpt lat="40.00824" lon="-105.26975">
754 |     <name>TP243</name>
755 |   </trkpt>
756 |   <trkpt lat="40.00824" lon="-105.27061">
757 |     <name>TP244</name>
758 |   </trkpt>
759 |   <trkpt lat="40.00824" lon="-105.2707">
760 |     <name>TP245</name>
761 |   </trkpt>
762 |   <trkpt lat="40.00823" lon="-105.27093">
763 |     <name>TP246</name>
764 |   </trkpt>
765 |   <trkpt lat="40.00822" lon="-105.27128">
766 |     <name>TP247</name>
767 |   </trkpt>
768 |   <trkpt lat="40.0082233" lon="-105.2712823">
769 |     <name>TP248</name>
770 |   </trkpt>
771 |   <trkpt lat="40.0084" lon="-105.27129">
772 |     <name>TP249</name>
773 |   </trkpt>
774 |   <trkpt lat="40.0084025" lon="-105.2712892">
775 |     <name>TP250</name>
776 |   </trkpt>
777 |   <trkpt lat="40.0084" lon="-105.27184">
778 |     <name>TP251</name>
779 |   </trkpt>
780 |   <trkpt lat="40.0084" lon="-105.27232">
781 |     <name>TP252</name>
782 |   </trkpt>
783 |   <trkpt lat="40.0084" lon="-105.27276">
784 |     <name>TP253</name>
785 |   </trkpt>
786 |   <trkpt lat="40.0084045" lon="-105.2727592">
787 |     <name>TP254</name>
788 |   </trkpt>
789 |   <trkpt lat="40.00803" lon="-105.2731">
790 |     <name>TP255</name>
791 |   </trkpt>
792 |   <trkpt lat="40.00802" lon="-105.27311">
793 |     <name>TP256</name>
794 |   </trkpt>
795 |   <trkpt lat="40.008" lon="-105.27312">
796 |     <name>TP257</name>
797 |   </trkpt>
798 |   <trkpt lat="40.00798" lon="-105.27312">
799 |     <name>TP258</name>
800 |   </trkpt>
801 |   <trkpt lat="40.00797" lon="-105.27313">
802 |     <name>TP259</name>
803 |   </trkpt>
804 |   <trkpt lat="40.00785" lon="-105.27313">
805 |     <name>TP260</name>
806 |   </trkpt>
807 |   <trkpt lat="40.0078514" lon="-105.2731258">
808 |     <name>TP261</name>
809 |   </trkpt>
810 |   <trkpt lat="40.00785" lon="-105.27327">
811 |     <name>TP262</name>
812 |   </trkpt>
813 |   <trkpt lat="40.00786" lon="-105.27378">
814 |     <name>TP263</name>
815 |   </trkpt>
816 |   <trkpt lat="40.00787" lon="-105.27388">
817 |     <name>TP264</name>
818 |   </trkpt>
819 |   <trkpt lat="40.00787" lon="-105.27395">
820 |     <name>TP265</name>
821 |   </trkpt>
822 |   <trkpt lat="40.00802" lon="-105.2743">
823 |     <name>TP266</name>
824 |   </trkpt>
825 |   <trkpt lat="40.0080197" lon="-105.2743014">
826 |     <name>TP267</name>
827 |   </trkpt>
828 |   </trkseg>
829 | </trk>
830 | </gpx>


--------------------------------------------------------------------------------
/module-01/app/data/route.js:
--------------------------------------------------------------------------------
1 | var data = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"2770 Winding Trail Drive to Guggenheim Geography"},"geometry":{"type":"LineString","coordinates":[[-105.2594084,40.0436406],[-105.25948,40.04364],[-105.25962,40.04363],[-105.25985,40.04355],[-105.2598539,40.043547],[-105.25992,40.04359],[-105.26001,40.04367],[-105.26004,40.04371],[-105.26017,40.04389],[-105.26021,40.04394],[-105.26026,40.04398],[-105.26046,40.04408],[-105.26079,40.04424],[-105.26087,40.0443],[-105.26093,40.04436],[-105.26094,40.0444],[-105.26095,40.04446],[-105.26094,40.04452],[-105.26092,40.04464],[-105.26091,40.04476],[-105.26091,40.04486],[-105.26092,40.04498],[-105.26094,40.04505],[-105.26096,40.04514],[-105.26099,40.04518],[-105.26102,40.04522],[-105.26124,40.04542],[-105.26133,40.04553],[-105.26136,40.04555],[-105.2614,40.04556],[-105.2615,40.04558],[-105.26166,40.0456],[-105.26194,40.0456],[-105.26262,40.04562],[-105.26287,40.04562],[-105.26312,40.04565],[-105.26319,40.04566],[-105.26327,40.04567],[-105.2633,40.04568],[-105.26335,40.04565],[-105.263347,40.0456533],[-105.26329,40.04556],[-105.26327,40.0455],[-105.26326,40.04542],[-105.26326,40.0451],[-105.26325,40.04381],[-105.26325,40.04374],[-105.26325,40.0434],[-105.26326,40.04322],[-105.26327,40.04312],[-105.26328,40.04288],[-105.26328,40.04256],[-105.26327,40.04227],[-105.26326,40.04191],[-105.26325,40.0415],[-105.26325,40.04099],[-105.26325,40.04067],[-105.26324,40.04044],[-105.26323,40.04038],[-105.26321,40.04033],[-105.26318,40.04029],[-105.26311,40.04022],[-105.2631127,40.0402176],[-105.26317,40.04015],[-105.26321,40.04009],[-105.26324,40.04002],[-105.26325,40.03992],[-105.26325,40.03936],[-105.26324,40.039],[-105.26324,40.03863],[-105.26324,40.03836],[-105.26323,40.03799],[-105.26323,40.03786],[-105.26323,40.03776],[-105.26323,40.03736],[-105.26321,40.03648],[-105.2632128,40.0364827],[-105.26322,40.03639],[-105.26323,40.03596],[-105.26323,40.0356],[-105.26322,40.03535],[-105.26321,40.03484],[-105.26323,40.03459],[-105.2632,40.03386],[-105.2632,40.03316],[-105.2632,40.03283],[-105.26319,40.0324],[-105.26318,40.03114],[-105.26317,40.0304],[-105.26316,40.03014],[-105.26314,40.02946],[-105.26313,40.02917],[-105.26312,40.0282],[-105.26311,40.02807],[-105.26312,40.02792],[-105.26312,40.02789],[-105.26312,40.02776],[-105.26312,40.02757],[-105.26311,40.02749],[-105.2631,40.02742],[-105.26306,40.02723],[-105.26301,40.02698],[-105.263,40.02691],[-105.26299,40.02677],[-105.26299,40.02668],[-105.26299,40.02655],[-105.26298,40.02615],[-105.26298,40.02591],[-105.26299,40.02585],[-105.26302,40.02574],[-105.2631,40.02553],[-105.26314,40.02545],[-105.26325,40.02529],[-105.26343,40.02508],[-105.26354,40.02492],[-105.26364,40.02473],[-105.26371,40.02454],[-105.26374,40.02443],[-105.26375,40.02438],[-105.26379,40.0242],[-105.2638,40.02412],[-105.26378,40.02394],[-105.26375,40.02375],[-105.26364,40.02342],[-105.26356,40.02317],[-105.26342,40.02275],[-105.26343,40.02269],[-105.26343,40.02268],[-105.2634,40.02242],[-105.26337,40.02224],[-105.26331,40.02184],[-105.26324,40.02137],[-105.26323,40.02129],[-105.26317,40.02033],[-105.26316,40.01997],[-105.26311,40.01987],[-105.26311,40.01965],[-105.26311,40.01876],[-105.26315,40.01865],[-105.26316,40.01794],[-105.26316,40.01746],[-105.26316,40.0174],[-105.26316,40.01734],[-105.26315,40.01678],[-105.26314,40.0164],[-105.26314,40.01625],[-105.26314,40.01587],[-105.26315,40.01565],[-105.26317,40.01544],[-105.26317,40.01533],[-105.26318,40.01512],[-105.26317,40.01469],[-105.26319,40.01459],[-105.26314,40.01373],[-105.26315,40.01356],[-105.26315,40.01335],[-105.26315,40.01328],[-105.26314,40.01327],[-105.26313,40.01325],[-105.2631,40.01322],[-105.26308,40.01311],[-105.26308,40.01279],[-105.26309,40.01261],[-105.2631,40.01244],[-105.26311,40.01234],[-105.26312,40.01223],[-105.26315,40.01207],[-105.2632,40.01186],[-105.26321,40.0118],[-105.26326,40.01161],[-105.26329,40.01151],[-105.26329,40.0115],[-105.26332,40.01142],[-105.26335,40.01134],[-105.26339,40.01123],[-105.26344,40.01114],[-105.26348,40.01106],[-105.26353,40.011],[-105.26357,40.01096],[-105.26372,40.01073],[-105.2638,40.01062],[-105.26384,40.01058],[-105.26392,40.01046],[-105.26399,40.01033],[-105.26405,40.0102],[-105.26411,40.01001],[-105.26412,40.00997],[-105.26412,40.00993],[-105.26413,40.00992],[-105.26413,40.00987],[-105.26413,40.00982],[-105.26413,40.00956],[-105.26415,40.009],[-105.26414,40.00872],[-105.26414,40.00823],[-105.2641373,40.0082273],[-105.26484,40.00824],[-105.26519,40.00825],[-105.2651907,40.0082478],[-105.26519,40.00815],[-105.26517,40.00776],[-105.2651749,40.0077592],[-105.2653,40.00776],[-105.26543,40.00775],[-105.2658,40.00775],[-105.26617,40.00775],[-105.26627,40.00775],[-105.26637,40.00774],[-105.26652,40.00774],[-105.26676,40.00774],[-105.26704,40.00774],[-105.2670375,40.0077384],[-105.26704,40.00729],[-105.2670377,40.0072925],[-105.26733,40.00729],[-105.26783,40.00729],[-105.26809,40.00729],[-105.26818,40.00729],[-105.2681777,40.0072878],[-105.26818,40.00736],[-105.26818,40.00749],[-105.26818,40.00751],[-105.26818,40.00752],[-105.26818,40.00754],[-105.26819,40.00754],[-105.26821,40.00755],[-105.26837,40.00755],[-105.2684,40.00756],[-105.26842,40.00757],[-105.26842,40.0076],[-105.26842,40.00781],[-105.26861,40.00785],[-105.2688,40.00789],[-105.26892,40.00794],[-105.26904,40.008],[-105.26918,40.00805],[-105.26928,40.00811],[-105.26942,40.00819],[-105.26963,40.00829],[-105.2696325,40.0082893],[-105.26968,40.00826],[-105.26971,40.00825],[-105.26975,40.00824],[-105.27061,40.00824],[-105.2707,40.00824],[-105.27093,40.00823],[-105.27128,40.00822],[-105.2712823,40.0082233],[-105.27129,40.0084],[-105.2712892,40.0084025],[-105.27184,40.0084],[-105.27232,40.0084],[-105.27276,40.0084],[-105.2727592,40.0084045],[-105.2731,40.00803],[-105.27311,40.00802],[-105.27312,40.008],[-105.27312,40.00798],[-105.27313,40.00797],[-105.27313,40.00785],[-105.2731258,40.0078514],[-105.27327,40.00785],[-105.27378,40.00786],[-105.27388,40.00787],[-105.27395,40.00787],[-105.2743,40.00802],[-105.2743014,40.0080197]]}},{"type":"Feature","properties":{"name":"My Home"},"geometry":{"type":"Point","coordinates":[-105.2594094,40.0435913]}},{"type":"Feature","properties":{"name":"Guggenheim Geography"},"geometry":{"type":"Point","coordinates":[-105.2742872,40.0081661]}},{"type":"Feature","properties":{"name":"Frank's Hot Dog Stand"},"geometry":{"type":"Point","coordinates":[-105.26563167572021,40.021616902296195]}}]}


--------------------------------------------------------------------------------
/module-01/app/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset=utf-8 />
  6 | 	<title>Leaflet Map Template</title>
  7 | 	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  8 | 
  9 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css" />
 10 | 	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
 11 | 	<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
 12 | 	<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
 13 | 
 14 | 	<style>
 15 | 		body {
 16 | 			margin: 0;
 17 | 			padding: 0;
 18 | 			background: "whitesmoke";
 19 | 			font-family: "Noto Sans", sans-serif;
 20 | 			color: #3d3d3d;
 21 | 		}
 22 | 		
 23 | 		h1 {
 24 | 			position: absolute;
 25 | 			margin-top: 0;
 26 | 			top: 10px;
 27 | 			left: 45px;
 28 | 			font-size: 2em;
 29 | 			font-family: "Lora", serif;
 30 | 			letter-spacing: .04em;
 31 | 			padding: 10px 15px;
 32 | 			background: rgba(256, 256, 256, .4);
 33 | 			border: 1px solid grey;
 34 | 			border-radius: 3px;
 35 | 			z-index: 800;
 36 | 		}
 37 | 		
 38 | 		h2 {
 39 | 			font-family: "Lora", serif;
 40 | 			letter-spacing: .04em;
 41 | 		}
 42 | 		
 43 | 		#map {
 44 | 			position: absolute;
 45 | 			top: 0;
 46 | 			bottom: 0;
 47 | 			width: 100%;
 48 | 		}
 49 | 		
 50 | 		section {
 51 | 			position: absolute;
 52 | 			bottom: 0;
 53 | 			left: 10px;
 54 | 			width: 280px;
 55 | 			margin: 20px auto;
 56 | 			padding: 0 15px;
 57 | 			background: rgba(256, 256, 256, .4);
 58 | 			border: 1px solid grey;
 59 | 			border-radius: 3px;
 60 | 			z-index: 800;
 61 | 		}
 62 | 		
 63 | 		p {
 64 | 			font-size: .9em;
 65 | 			line-height: 1.5em;
 66 | 		}
 67 | 		
 68 | 		a {
 69 | 			color: #005daa;
 70 | 			text-decoration: none;
 71 | 		}
 72 | 		
 73 | 		a:hover {
 74 | 			text-decoration: underline;
 75 | 		}
 76 | 	</style>
 77 | </head>
 78 | 
 79 | <body>
 80 | 
 81 | 	<h1>Rich's time in Boulder</h1>
 82 | 
 83 | 	<div id='map'></div>
 84 | 
 85 | 	<section>
 86 | 		<h2>about this map</h2>
 87 | 
 88 | 		<p>Additional information about <a href="#">the data</a> and map goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis urna magna, maximus nec laoreet sit amet, dictum ultricies nibh. Ut id auctor lacus. Nam a dolor et justo luctus luctus. </p>
 89 | 
 90 | 		<p>Duis a elit eget risus dictum vehicula id eu elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Sed sed enim nisl.
 91 | 		</p>
 92 | 
 93 | 		<p>Map authored by me, MY NAME</p>
 94 | 
 95 | 	</section>
 96 | 
 97 | 	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 98 | 	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
 99 | 	
100 | 	<script src='data/route.js'></script>
101 | 	<script>
102 | //		
103 | //		console.log(data);
104 | 		
105 | 		var options = {
106 | 			center: [40.00816, -105.27423],
107 | 			zoom: 12
108 | 		}
109 | 
110 | 		var map = L.map('map', options);
111 | 		
112 | 		var tiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
113 | 			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
114 | 			subdomains: 'abcd',
115 | 			maxZoom: 19
116 | 		}).addTo(map);
117 | 		
118 | 
119 | //
120 | //		var message = 'Guggenheim Geography!';
121 | //
122 | //		L.marker(map.getCenter())
123 | //			.bindTooltip(message)
124 | //			.addTo(map)
125 | //			.openTooltip();
126 | 		
127 | 		var myRoute = L.geoJson(data, {
128 | 
129 | 			filter : function(feature) {
130 | 				if(feature.geometry.type == "LineString") {
131 | 					return feature;
132 | 				}
133 | 			},
134 | 			style : function(feature) {
135 | 
136 | 				return {
137 | 					color: "#005DAA",
138 | 					weight: 4,
139 | 					opacity: .6,
140 | 					dashArray: "5, 5"
141 | 				}        
142 | 			}
143 | 
144 | 		}).addTo(map);
145 | 
146 | 		var myStops = L.geoJson(data, {
147 | 
148 | 			filter : function(feature) {
149 | 				if(feature.geometry.type == "Point") {
150 | 					return feature;
151 | 				}
152 | 			},
153 | 			onEachFeature : function(feature, layer) {
154 | 
155 | //				console.log(feature.properties['name']);
156 | 				
157 | 				layer.bindTooltip(feature.properties['name']);
158 | 			}
159 | 
160 | 		}).addTo(map);
161 | 
162 | 		
163 | 	</script>
164 | 
165 | </body>
166 | 
167 | </html>


--------------------------------------------------------------------------------
/module-01/leaflet-map-template/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 | 	<meta charset=utf-8 />
  6 | 	<title>Leaflet Map Template</title>
  7 | 	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  8 | 
  9 | 	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css" />
 10 | 	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
 11 | 	<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
 12 | 	<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
 13 | 
 14 | 	<style>
 15 | 		body {
 16 | 			margin: 0;
 17 | 			padding: 0;
 18 | 			background: "whitesmoke";
 19 | 			font-family: "Noto Sans", sans-serif;
 20 | 			color: #3d3d3d;
 21 | 		}
 22 | 		
 23 | 		h1 {
 24 | 			position: absolute;
 25 | 			margin-top: 0;
 26 | 			top: 10px;
 27 | 			left: 45px;
 28 | 			font-size: 2em;
 29 | 			font-family: "Lora", serif;
 30 | 			letter-spacing: .04em;
 31 | 			padding: 10px 15px;
 32 | 			background: rgba(256, 256, 256, .4);
 33 | 			border: 1px solid grey;
 34 | 			border-radius: 3px;
 35 | 			z-index: 800;
 36 | 		}
 37 | 		
 38 | 		h2 {
 39 | 			font-family: "Lora", serif;
 40 | 			letter-spacing: .04em;
 41 | 		}
 42 | 		
 43 | 		#map {
 44 | 			position: absolute;
 45 | 			top: 0;
 46 | 			bottom: 0;
 47 | 			width: 100%;
 48 | 		}
 49 | 		
 50 | 		section {
 51 | 			position: absolute;
 52 | 			bottom: 0;
 53 | 			left: 10px;
 54 | 			width: 280px;
 55 | 			margin: 20px auto;
 56 | 			padding: 0 15px;
 57 | 			background: rgba(256, 256, 256, .4);
 58 | 			border: 1px solid grey;
 59 | 			border-radius: 3px;
 60 | 			z-index: 800;
 61 | 		}
 62 | 		
 63 | 		p {
 64 | 			font-size: .9em;
 65 | 			line-height: 1.5em;
 66 | 		}
 67 | 		
 68 | 		a {
 69 | 			color: #005daa;
 70 | 			text-decoration: none;
 71 | 		}
 72 | 		
 73 | 		a:hover {
 74 | 			text-decoration: underline;
 75 | 		}
 76 | 	</style>
 77 | </head>
 78 | 
 79 | <body>
 80 | 
 81 | 	<h1>This is the title to my awesome map.</h1>
 82 | 
 83 | 	<div id='map'></div>
 84 | 
 85 | 	<section>
 86 | 		<h2>about this map</h2>
 87 | 
 88 | 		<p>Additional information about <a href="#">the data</a> and map goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis urna magna, maximus nec laoreet sit amet, dictum ultricies nibh. Ut id auctor lacus. Nam a dolor et justo luctus luctus. </p>
 89 | 
 90 | 		<p>Duis a elit eget risus dictum vehicula id eu elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Sed sed enim nisl.
 91 | 		</p>
 92 | 
 93 | 		<p>Map authored by me, MY NAME</p>
 94 | 
 95 | 	</section>
 96 | 
 97 | 	<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 98 | 	<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
 99 | 	<script>
100 | 		
101 | 		var options = {
102 | 			center: [40.00816, -105.27423],
103 | 			zoom: 12
104 | 		}
105 | 		var map = L.map('map', options);
106 | 		
107 | 		var tiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
108 | 			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
109 | 			subdomains: 'abcd',
110 | 			maxZoom: 19
111 | 		}).addTo(map);
112 | 		var message = 'Guggenheim Geography!';
113 | 		L.marker(map.getCenter())
114 | 			.bindTooltip(message)
115 | 			.addTo(map)
116 | 			.openTooltip();
117 | 		
118 | 	</script>
119 | 
120 | </body>
121 | 
122 | </html>


--------------------------------------------------------------------------------
/module-01/lesson-01.md:
--------------------------------------------------------------------------------
  1 | # Lesson 01. Drawing Data with Web Maps
  2 | 
  3 | To begin, clone or [download the course repository](https://github.com/rgdonohue/web-mapping-short-course) to your computer.
  4 | 
  5 | Clone or unzip the contents of the files in a known location (i.e., a directory in your Documents). Briefly, examine the contents of the directory named *module-01/*. You notice a directory named *leaflet-map-template/* that contains an HTML document named *index.html*.
  6 | 
  7 | ## Setting up a development environment
  8 | 
  9 | There are many [lessons and resources](http://maptime.io/lessons-resources/) available on the web for getting started with web mapping. But often, getting the development environment set up so you can write code and test your map is the first roadblock. Let's consider the principle components of a web development process. These are what you need to have available every time you begin web map design and development.
 10 | 
 11 | **A Web Browser**
 12 | 
 13 | Web Mapping is an unusual form of Cartography in that we primarily make the maps using the same medium with which we develop them. The web browser is a crucial component of our technology stack. Most web map developers use Chrome or Firefox, as should you. Make sure you have installed recent updates to your browser, and begin by opening your Web Browser.
 14 | 
 15 | **A Text Editor**
 16 | 
 17 | Developers build web maps by writing plain text. Text editors designed for web development facilitate this, particular by highlighting different parts of the code syntax. Install and open one of the following:
 18 | 
 19 | * [Brackets](http://brackets.io/)
 20 | * [Sublime](https://www.sublimetext.com/)
 21 | * [Atom](https://atom.io/)
 22 | 
 23 | Brackets is particularly handy if you don't have a local server running or don't know what that is. Its "Live Preview" functionality runs a local test server within your web browser, which allows you to see and test your rendered web application.
 24 | 
 25 | **Directories, Files, Data, and Media**
 26 | 
 27 | The user's web browser assembles and renders the web page and map application using specific files. Minimally this will include an HTML index file for the direction, typically named *index.html*. 
 28 | 
 29 | Using your text editor, open the *module-01/* directory so you can view the entire structure. A good text editor allows you view and modify the contents of the directory. Again examine the contents of this directory from within the editor.
 30 | 
 31 | ![Viewing the directory file structure and files in Brackets](lesson-images/file-structure-brackets.png)  
 32 | **Figure 01.** Viewing the directory file structure and files in Brackets.
 33 | 
 34 | 
 35 | **A Web Server**
 36 | 
 37 | While a web browser application interprets and renders the files that compose our web maps, it doesn't do this by itself. It requires a "server" to gather the files and deliver them to the browser correctly. A server is especially necessary when using JavaScript to make what are known as [asynchronous requests](http://rowanmanning.com/posts/javascript-for-beginners-async/) to load files and data into our web application after the web page initially loads.
 38 | 
 39 | We develop a web application "locally" on our computer, so it's best to use a local server, or a "local test server," to do this. There are a few options for getting a local test server running on your machine.
 40 | 
 41 | 1. [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/) module
 42 | 2. A [WAMP server](http://www.wampserver.com/en/) for Windows or a [Mac OS alternative](http://ampps.com/download)
 43 | 3. The use of [Brackets](http://brackets.io/) text editor (see above)
 44 | 
 45 | Once you get a local server running within your browser, open the *leaflet-map-template/index.html* file (or open this file from within Brackets using the Live Preview). Note that Brackets will launch a new instance of your default web browser application.
 46 | 
 47 | **Web Developer Tools**
 48 | 
 49 | Modern web browsers come installed with web developer tools. These tools come loaded with functionality allowing you to investigate how a web page or application is structured and performing within your browser. Read more about using the [Chrome DevTools](https://developer.chrome.com/devtools), and as always look for the shortcuts to open and close the toolbar in your browser (Cmd + i in Mac OS).
 50 | 
 51 | Open your web developer toolbar.
 52 | 
 53 | ![Opening Chrome's Web Developer Tools](lesson-images/open-developer-tools.png)  
 54 | **Figure 02.** Opening Chrome's Web Developer Tools.
 55 | 
 56 | You can use the Elements tab of the Developer tool to inspect the DOM as it is rendered within the browser. While this will largely mirror the HTML document itself, the rendered DOM will also contain elements dynamically produced with JavaScript when the page loads.
 57 | 
 58 | ![Exploring the DOM elements using Chrome's Web Developer Tools](lesson-images/dev-tools-elements.gif)  
 59 | **Figure 03.** Exploring the DOM elements using Chrome's Web Developer Tools.
 60 | 
 61 | One of the most useful features is the [Console](https://developer.mozilla.org/en-US/docs/Web/API/Console), which allows you to log JavaScript values within the browser. You can type directly into the Console, or log values from a JavaScript file loaded within the browser. We'll be doing both as we build and debug web maps.
 62 | 
 63 | 
 64 | ## Introducing the building blocks of a "hello world" web map template
 65 | 
 66 | Let's begin with a simple working template for making a web map. 
 67 | 
 68 | Open the *leaflet-map-template/index.html* file within your browser. Be sure to open your file using the Live Preview of Brackets or using another local server.
 69 | 
 70 | If the map loads correctly, you should see a light basemap centered on the Guggenheim Geography building within Boulder, CO. A marker is located at this location and a tooltip opens on the marker. There should also be no errors in the Developer Tool Console.
 71 | 
 72 | ![The Leaflet map templete loaded in the browser](lesson-images/leaflet-template.png)  
 73 | **Figure 04.** The Leaflet map templete loaded in the browser, with no errors in the Console.
 74 | 
 75 | How does the code contained within the *index.html* file work together to produce this map? Our web document is composed of 3 essential web technologies: HTML, CSS, and JavaScript. The web browser in turn creates a DOM or Document Object Module using this document.
 76 | 
 77 | 
 78 | ### HTML (structure)
 79 | 
 80 | The HTML structures and describes the content of our document. Some of its elements (`<style>` and `<script>` tags) load additional files such as CSS, JavaScript, or image files into the document upon page load.
 81 | 
 82 | Study this skeleton HTML template:
 83 | 
 84 | ```html
 85 | <!DOCTYPE html>
 86 | <html>
 87 | 
 88 | <head>
 89 |     <meta charset=utf-8 />
 90 |     <title>Leaflet Map Template</title>
 91 |     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 92 |     
 93 |     <!-- load additional CSS files here and this is an HTML comment -->
 94 | 
 95 |     <style>
 96 |     
 97 |         /* CSS rules go here and this is a CSS comment */
 98 |         
 99 |     </style>
100 | </head>
101 | 
102 | <body>
103 | 
104 |     <h1>This is the title to my awesome map.</h1>
105 | 
106 |     <!-- more HTML goes here -->
107 | 
108 |     <!-- load additional JS files here -->
109 |     <script>
110 |         
111 |         // JavaScript goes here and this is a JS comment
112 |         
113 |     </script>
114 | 
115 | </body>
116 | 
117 | </html>
118 | ```
119 | 
120 | Read more about [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML).
121 | 
122 | ### CSS (form)
123 | 
124 | If the HTML structures our content, the primarly role of CSS is to give that structure form. We apply CSS rules to the web page and elements we draw to the map to adjust the "look and feel" of the page and map.
125 | 
126 | ```css
127 | body {
128 |     margin: 0;
129 |     padding: 0;
130 |     background: "whitesmoke";
131 |     font-family: "Noto Sans", sans-serif;
132 |     color: #3d3d3d;
133 | }
134 | 
135 | h1 {
136 |     position: absolute;
137 |     margin-top: 0;
138 |     top: 10px;
139 |     left: 45px;
140 |     font-size: 2em;
141 |     font-family: "Lora", serif;
142 |     letter-spacing: .04em;
143 |     padding: 10px 15px;
144 |     background: rgba(256, 256, 256, .4);
145 |     border: 1px solid grey;
146 |     border-radius: 3px;
147 |     z-index: 800;
148 | }
149 | 
150 | #map {
151 |     position: absolute;
152 |     top: 0;
153 |     bottom: 0;
154 |     width: 100%;
155 | }
156 | 
157 | ```
158 | 
159 | Read more about [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).
160 | 
161 | ### JavaScript (behavior)
162 | 
163 | Finally, we use JavaScript to add event-driven and interaction behavior to our website; to make it dynamic! The following JavaScript creates the map within our page.
164 | 
165 | 
166 | ```javascript
167 | 
168 | // options to be used when creating the map
169 | var options = {
170 |     center: [40.00816, -105.27423],
171 |     zoom: 12
172 | }
173 | 
174 | // creation of the Leaflet map
175 | var map = L.map('map', options);
176 | 
177 | // request to load basemap slippy tiles
178 | var tiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
179 |     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
180 |     subdomains: 'abcd',
181 |     maxZoom: 19
182 | }).addTo(map);
183 | 
184 | // string content to be inserted into a tooltip
185 | var message = 'Guggenheim Geography!';
186 | 
187 | // create a Leaflet marker, centered on the map's center
188 | L.marker(map.getCenter())
189 |     .bindTooltip(message) // bind the tooltip and message to the marker
190 |     .addTo(map)  // add the marker to the map
191 |     .openTooltip();  // open the tooltip
192 | ```
193 | 
194 | Let's quickly review what the JavaScript above is doing:
195 | 
196 | 1. The statement assigning an object to the variable `options` is specifying some of [Leaflet's map object's options](http://leafletjs.com/reference-1.0.0.html#map-option), here centering the map on Guggenheim and setting a zoom level to 12.
197 | 
198 | 2. The next statement creates a [Leaflet map object](http://leafletjs.com/reference-1.0.0.html#map), inserts it into a DOM element with the `id` value of `map` (i.e., our `<div id='map'></div>` within our HTML, and applies the options we specified. 
199 | 
200 | 3. The statement assigning a value to the variable `tiles` is a fun one. Leaflet uses this one to request a set of basemap tiles from a remote server. There are lots of these, and you can have fun swapping them out for one another until you find one appropriate for your map. Check out the options at [Leaflet Providers](https://leaflet-extras.github.io/leaflet-providers/preview/).
201 | 
202 | 4. The final two statements assign a string value `'Guggenheim Geography!'` to the variable `message` and uses the Leaflet [L.Marker class](http://leafletjs.com/reference-1.0.0.html#marker) to place a marker at the center of the map, as well as the [Leaflet L.Tooltip class](http://leafletjs.com/reference-1.0.0.html#tooltip) to display our message on top of the map layers.
203 | 
204 | The [Leaflet API Reference](http://leafletjs.com/reference-1.0.0.html) is your source for understanding how the Leaflet JavaScript operates.
205 | 
206 | Read more about [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
207 | 
208 | Let's now use this template to create a basic thematic map.
209 | 
210 | ## Mapping scenario: mapping your route from home to campus
211 | 
212 | For this lesson, we're going to make a Leaflet map of your route to or from campus (pick one for now if they are different). The goal of the map is to allow the user to see your starting and ending points, the route between them, as well as a couple places of interest along the way. Maybe you stop at a cafe or your place of work on the way to class.  Perhaps you frequent a watering hole on the way home.
213 | 
214 | We want to capture this geography, convert it to an appropriate data format, and display it on a web and mobile-friendly map. Additionally, we will allow the user to retrieve specific information about these places through interacting with the map (in this case, hovering over the map or touching on a marker).
215 | 
216 | To begin, make a copy of the *leaflet-map-template/* directory and rename it to *app/*, within the *module-01/* directory.
217 | 
218 | ### Step 1: Data aquisition and conversion
219 | 
220 | To get our data and convert it to an appropriate format for web mapping, we're going to use a few web-based tools. 
221 | 
222 | Let's first use a fantastic (proprietary) mapping resource: [Google Maps](https://www.google.com/maps)!
223 | 
224 | 1. First, search for your primary campus building. For instance, I'll do a simple Google Map search for [Guggenheim Geography](https://www.google.com/maps/place/Guggenheim+Geography,+Boulder,+CO+80302/@40.0081521,-105.2764582,16.98z/data=!4m5!3m4!1s0x876bec31173b714d:0xfe71b5ee5f7fee43!8m2!3d40.0081661!4d-105.2742872).
225 | 
226 | 2. Then use the Directions functionality to determine the route from your home to your building. **BE CAREFUL:** This map is going to end up on the web. Do you want people knowing your exact address? Maybe not! Use an approximate address location instead. Also, be sure to select the mode of travel. Do you drive a car, ride a bus, walk, or ride your bike? If you fly a plane to get to campus, that's incredible!
227 | 
228 |     ![Using Google Maps to find a route and mode from home to Campus](lesson-images/google-maps-route.png)  
229 |     **Figure 05.** Using Google Maps to find a route and mode from home to Campus.
230 | 
231 |     Google Maps allows you to pick between alternative routes, as well as to drag the route to customize the route you really take. Feel free to adjust this a little bit, but don't worry too much about it. We'll be using another tool to do this later on.
232 | 
233 |     When you have highlighted your desired route in blue on the map, copy the entire URL from the address bar (highlight it, and select *Edit -> Copy* or *Cntr + C*).
234 | 
235 | 3. Next, go to a website named [Maps To GPX](https://mapstogpx.com/), a tool that, "accepts a link to pre-made Google Directions and converts them to a GPX file." This is perfect for us!
236 | 
237 |     Paste your URL from Google Maps into the form and hit "Let's Go." 
238 | 
239 |     ![Converting Google Maps Route to GPX](lesson-images/mapstogpx.png)  
240 |     **Figure 06.** Converting Google Maps Route to GPX.
241 | 
242 |     The site will make the necessary conversion and prompt the GPX file to download (with a name something like *mapstogpx20161026_000913.gpx*). Move this file into the *module-01/app/data/* directory.
243 | 
244 |     GPX (the GPS Exchange Format) is a text-based format derived from XML and often used to encode GPS data. You can open this file in your text editor to examine the contents. We're not too interested in particular file, but it looks like this:
245 | 
246 |     ```xml
247 |     <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
248 |     <gpx xmlns="http://www.topografix.com/GPX/1/1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3" xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" creator="mapstogpx.com" version="1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd">
249 |       <metadata>
250 |         <link href="http://www.mapstogpx.com">
251 |           <text>Sverrir Sigmundarson</text>
252 |         </link>
253 |         <!--desc>Map data ©2016 Google</desc-->
254 |         <!--url>https://www.google.co.uk/maps/dir/40.035196,-105.2809662/40.008162,-105.27423/@40.0215947,-105.2933284,14z/data=!3m1!4b1!4m2!4m1!3e1?hl=en</url-->
255 |         <time>2016-10-23T15:57:30Z</time>
256 |       </metadata>
257 |       <wpt lat="40.035196" lon="-105.2809662">
258 |         <name>3315 13th Street</name>
259 |         <desc>3315 13th Street, Boulder, CO 80304, USA</desc>
260 |       </wpt>
261 |     ```
262 | 
263 |     If you happen to use the popular [Strava](https://www.strava.com/) service, you can also download all your routes in GPX format.
264 | 
265 | 4. Next, we want to convert our data to another format: [GeoJSON](http://geojson.org/). GeoJSON is to web mapping what the Shapefile is to GIS.
266 | 
267 |     Navigate your browser to a website called [geojson.io](http://geojson.io/). You'll want to bookmark this website, as it's an extremely useful online tool.
268 | 
269 |     Open your GPX file in the geojson.io web application. Study the code generated in the right-hand panel; it is a valid GeoJSON encoding of your route. Unlike Shapefiles, GeoJSON can encode multiple geometry types within a single Feature Collection. Note that  Features have both `properties` and `geometry` attributes. The `"LineString"` type contains all the points that make up the route, while the two `"Point"` type Features encode the endpoints of the route.
270 | 
271 |     Take some time to play around with the geojson.io website and your data.
272 | 
273 |     Note that our process has retained some data attributes from Google Maps that we don't need. We can remove these, and edit the existing data properties as we wish. The web application also allows us to add, remove, and edit geometries. For example, you could modify your route.
274 | 
275 |     ![Removing unneeded attribute properties in geojson.io](lesson-images/geojson-io-edit.gif)  
276 |     **Figure 07.** Removing unneeded attribute properties in geojson.io.
277 | 
278 |     Instead, let's add a couple more places of interest. Using the drawing tools, place a point of interest along your route. Add a property row to the marker, and be sure to use the word "name" as the name of the attribute (just like the other points). Geojson.io also adds some other properties to style the marker. We don't need these, and you can remove them in the editor.
279 | 
280 |     ![Adding a placemarker in geojson.io](lesson-images/geojson-io-add-point.gif)  
281 |     **Figure 08.** Adding a placemarker in geojson.io.
282 | 
283 |     Once you finish editing your data, choose **Save** and download as a GeoJSON (it will download with the file name *map.geojson*. Save or move this downloaded file into your *module-01/app/data/* directory.
284 | 
285 |     You can open this file in your text editor to see that it's the same as what geojson.io displayed.
286 | 
287 |     ```js
288 |     {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"Northbrook Drive to Guggenheim Geography"},"geometry":{"type":"LineString","coordinates":[[-105.2601844,40.0446618],[-105.26024,40.04472],[-105.2602362,40.0447162],[-105.26029,40.04469],[-105.26033,40.04466],[-105.26043,40.04458],[-105.26056,40.04451],[-105.26065,40.04448],[-105.2607,40.04447],[-105.26073,40.04447],[-105.26075,40.04446],[-105.26078,40.04443],[-105.2608,40.04439],[-105.26083,40.04438],[-105.26086,40.04437],[-105.26093,40.04436],[-105.2609275,40.0443637],[-105.26094,40.0444],[-105.26095,40.04446]
289 |     ```
290 | 
291 | This last step of modifying our data attributes, editing the geometries, and exporting to GeoJSON wraps up our data acquisition and conversion process. Next, let's get the data loaded into the web map.
292 | 
293 | ### Step 2: Loading external data into a web document.
294 | 
295 | There are various ways to load GeoJSON data into your web map. While the best (and more sophisticated) way is to make an [AJAX](https://en.wikipedia.org/wiki/Ajax) request, we'll begin with a more simple solution.
296 | 
297 | First, rename the *map.geojson* file to *route.js*. Then open the *route.js* file in your text editor and assign the entire GeoJSON structure to a variable named *data*:
298 | 
299 | ```js
300 | var data = {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"name":"Northbrook Drive to Guggenheim Geography"},"geometry":{"type":"LineString","coordinates":[[-105.2601844,40.0446618],[-105.26024,40.04472],[-105.2602362,40.0447162],[-105.26029,40.04469],[-105.26033,40.04466],[-105.26043,40.04458],[-105.26056,40.04451],[-105.26065,40.04448],[-105.2607,40.04447],[-105.26073,40.04447],[-105.26075,40.04446],[-105.26078,40.04443],[-105.2608,40.04439],[-105.26083,40.04438],[-105.26086,40.04437],[-105.26093,40.04436],[-105.2609275,40.0443637],[-105.26094,40.0444],[-105.26095,40.04446]
301 | ```
302 | 
303 | Save those changes to the file. GeoJSON is essentially a JavaScript object, and we've simply assigned it to a JavaScript variable. The variable `data` will now be available to us within our script. 
304 | 
305 | Next open the *index.html* file within our *module-01/app/* directory.
306 | 
307 | The script is currently loading the external using the `<script>` element, remote jQuery and Leaflet JavaScript files before our custom code executes. Let's load this JavaScript file into our document, in the same way, being careful to specify a relative path to our file contained within the *data* directory.
308 | 
309 | Add the line `<script src="data/route.js"></script>` to our *index.html* file, beneath where we load the external JavaScript files but (importantly) BEFORE the `<script></script>` tags enclosing our custom JavaScript.
310 | 
311 | ```javascript
312 | <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
313 | <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
314 | 
315 | <script src="data/route.js"></script> // OUR DATA LOADED HERE!
316 | 
317 | <script>
318 | 
319 |     var options = {
320 |         center: [40.00816, -105.27423],
321 |         zoom: 12
322 |     }
323 | ```
324 | 
325 | You can verify that the data is loaded and you have access to the JavaScript object we created, assigned to the variable named `data` by using a `console.log()` statement.
326 | 
327 | ```
328 | <script>
329 | var options = {
330 | 	center: [40.00816, -105.27423],
331 | 	zoom: 12
332 | }
333 | 
334 | console.log(data); // output will be our GeoJSON object
335 | 	
336 | ```
337 | 
338 | This step saved our GeoJSON file within a JavaScript file, assigned it to a variable, and modified the HTML to load the file on page load.
339 | 
340 | Now it's time to draw it to our map!
341 | 
342 | ### Step 3: Drawing GeoJSON to the map.
343 | 
344 | With our *route.js* file loaded into the document and the Leaflet JavaScript library available to us in our script, we're ready to draw the GeoJSON data to the map. Leaflet makes this very easy for us with its [L.GeoJSON](http://leafletjs.com/reference-1.0.0.html#geojson) method. You'll likely want to spend some time studying these options and methods.
345 | 
346 | First, comment out the following code from the template:
347 | 
348 | ```javascript
349 | //        var message = 'Guggenheim Geography!';
350 | //
351 | //        L.marker(map.getCenter())
352 | //            .bindTooltip(message)
353 | //            .addTo(map)
354 | //            .openTooltip();
355 | ```
356 | 
357 | Next, write or paste the following statements beneath that commented out code:
358 | 
359 | ```javascript
360 | var myRoute = L.geoJson(data).addTo(map);
361 | 
362 | map.fitBounds(myRoute.getBounds());
363 | 
364 | ```
365 | 
366 | Save your file, refresh your browser, and you can see that Leaflet has drawn your data to the map. As always, keep your developer tools open and check for any JavaScript errors in the Console. You may need to re-adust the pan and zoom level to see the extent of your data.
367 | 
368 | ![Drawing the GeoJSON data to the map using L.GeoJson](lesson-images/draw-geojson.gif)  
369 | **Figure 09.** Drawing the GeoJSON data to the map using L.GeoJson.
370 | 
371 | We've successfully drawn the the GeoJSON data to the Leaflet map using Leaflet's default styling options. Leaflet has rendered the LineString feature in the browser as an SVG path element within Leaflet's [overlayPane](http://leafletjs.com/reference-1.0.0.html#map-overlaypane) and the Point features on top of the line within Leaflet's [markerPane](http://leafletjs.com/reference-1.0.0.html#map-markerpane)
372 | 
373 | ![Inspecting the SVG and img elements within the DOM, as drawn by Leaflet](lesson-images/inspect-elements.gif)  
374 | **Figure 10.** Inspecting the SVG and img elements within the DOM, as drawn by Leaflet.
375 | 
376 | Next, let's do some simple adjustments to the styles applied to these features.
377 | 
378 | ### Step 4: Styling the features.
379 | 
380 | Since we want to style the line representing our route and the markers representing our pertinent places, it makes sense to separate these into different objects within our script. We're going to call the `L.geoJson()` method twice and filter the data based on its geometry type (recall that we have both LineString and Point features within this GeoJSON).
381 | 
382 | To do so, we'll use [L.GeoJson's filter method](http://leafletjs.com/reference-1.0.0.html#geojson-filter). 
383 | 
384 | Replace the line `var myRoute L.geoJson(data).addTo(map);` with the following code block:
385 | 
386 | ```javascript
387 | var myRoute = L.geoJson(data, {
388 | 
389 |     filter : function(feature) {
390 |         if(feature.geometry.type == "LineString") {
391 |             return feature;
392 |         }
393 |     },
394 |     style : function(feature) {
395 | 
396 |         return {
397 |             color: "#005DAA",
398 |             weight: 4,
399 |             opacity: .6,
400 |             dashArray: "5, 5"
401 |         }        
402 |     }
403 | 
404 | }).addTo(map);
405 | 
406 | var myStops = L.geoJson(data, {
407 | 
408 |     filter : function(feature) {
409 |         if(feature.geometry.type == "Point") {
410 |             return feature;
411 |         }
412 |     },
413 |     onEachFeature : function(feature, layer) {
414 | 
415 |         console.log(feature.properties)
416 |     }
417 | 
418 | }).addTo(map);
419 | ```
420 | 
421 | Save your file and refresh the browser. 
422 | 
423 | ![The map line feature styled with Leaflet Path options](lesson-images/geojson-styled.png)  
424 | **Figure 11.** The map line feature styled with Leaflet Path options.
425 | 
426 | 
427 | You'll see we've now drawn the line according to these rules: 
428 | 
429 | ```javascript
430 | color: "#005DAA",
431 | weight: 4,
432 | opacity: .6,
433 | dashArray: "5, 5"
434 | ```
435 | 
436 | These are Leaflet styling options inherited from the [L.Path](http://leafletjs.com/reference-1.0.0.html#path) class. Play around with these values to change the representation of the line.
437 | 
438 | We also see that we've logged some values to the Console, accessing these values through `feature.properties` as the L.GeoJson's `onEachFeature` method loops through our features. 
439 | 
440 | We can use L.GeoJSON's `onEachFeature` method not only to access information stored originally within our GeoJSON data but also to add some interactivity to our map.
441 | 
442 | ### Step 5: Adding user interaction.
443 | 
444 | Replace the `console.log()` statement with the following statement:
445 | 
446 | ```javascript
447 | layer.bindTooltip(feature.properties['name']);    
448 | ```
449 | 
450 | Now when you test in the browser, you'll verify that the user will be able to retrieve specific information about these features by mousing over (or touching on a touchscreen interface) a specific feature.
451 | 
452 | ![Inspecting the SVG and img elements drawn by Leaflet](lesson-images/ui-tooltip.gif)  
453 | **Figure 12.** Inspecting the SVG and img elements drawn by Leaflet.
454 | 
455 | ### Step 6: Making the map whole: titles, information, and metadata.
456 | 
457 | The last step of making many maps is refining the design and clarifying the message or experience. Adding information about the map through descriptive (or fun) titles and side columns helps guide your user's understanding of the map. Also, be sure to include the map author (you), as well as any useful links to your online portfolios or work.
458 | 
459 | 
460 | ## Further challenges and mapping scenarios
461 | 
462 | Consider honing your skills by completing one of the following mapping scenarios, based on the tools and practices demonstrated in this lesson.
463 | 
464 | 1. Create a map narrating one of your favorite hikes, rides, or backpacking trips. Download your data from Strava as a GPX route. You may wish to include more information about specific places along the way than the tooltip is designed to hold. Try implementing the Leaflet [L.Popup()](http://leafletjs.com/reference-1.0.0.html#popup) class, which can also display images within the HTML content.
465 | 2. Make a map of a suggested tour of Boulder for friends and family who visit. Identify various places of interest and provide a suggested bicycle or walking route. Rather than using the default blue marker, use an [icon set](https://www.mapbox.com/maki-icons/) and the the [Leaflet L.Icon()](http://leafletjs.com/reference-1.0.0.html#icon) class to place associative icons on the map.


--------------------------------------------------------------------------------
/module-01/lesson-images/data-drawn.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/data-drawn.png


--------------------------------------------------------------------------------
/module-01/lesson-images/dev-tools-elements.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/dev-tools-elements.gif


--------------------------------------------------------------------------------
/module-01/lesson-images/draw-geojson.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/draw-geojson.gif


--------------------------------------------------------------------------------
/module-01/lesson-images/file-structure-brackets.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/file-structure-brackets.png


--------------------------------------------------------------------------------
/module-01/lesson-images/geojson-io-add-point.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/geojson-io-add-point.gif


--------------------------------------------------------------------------------
/module-01/lesson-images/geojson-io-edit.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/geojson-io-edit.gif


--------------------------------------------------------------------------------
/module-01/lesson-images/geojson-styled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/geojson-styled.png


--------------------------------------------------------------------------------
/module-01/lesson-images/google-maps-route.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/google-maps-route.png


--------------------------------------------------------------------------------
/module-01/lesson-images/inspect-elements.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/inspect-elements.gif


--------------------------------------------------------------------------------
/module-01/lesson-images/leaflet-template.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/leaflet-template.png


--------------------------------------------------------------------------------
/module-01/lesson-images/mapstogpx.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/mapstogpx.png


--------------------------------------------------------------------------------
/module-01/lesson-images/open-developer-tools.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/open-developer-tools.png


--------------------------------------------------------------------------------
/module-01/lesson-images/ui-tooltip.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-01/lesson-images/ui-tooltip.gif


--------------------------------------------------------------------------------
/module-02/app/data/flight.xls:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/app/data/flight.xls


--------------------------------------------------------------------------------
/module-02/app/data/ghg-co-2015.csv:
--------------------------------------------------------------------------------
  1 | "NAME","GHGRP_ID","REPORTED ADDRESS","LATITUDE","LONGITUDE","CITY","COUNTY NAME","STATE","ZIP","GHG_QUANTITY"
  2 | "AMERICAN GYPSUM COMPANY",1007404,"740 Highway #6",39.66067,-106.939169,"GYPSUM","EAGLE","CO",81637,55647
  3 | "ANHEUSER BUSCH INCORPORATED FORT COLLINS BREWERY",1003352,"2351 BUSCH DRIVE",40.619722,-105.006111,"FORT COLLINS","LARIMER","CO",80524,51002
  4 | "AQUILA, INC. - AIRPORT INDUSTRIAL SITE",1007510,"475 WILLIAM M WHITE BLVD",38.2843,-104.533,"PUEBLO","PUEBLO","CO",81001,0
  5 | "AQUILA, INC. - PUEBLO POWER PLANT",1000579,"105 S VICTORIA AVE",38.26662,-104.61508,"PUEBLO","PUEBLO","CO",81003,0
  6 | "Arapahoe",1001460,"2601 S PLATTE RIVER DR",39.67,-105.0028,"DENVER","Denver","CO",80223,0
  7 | "Arapahoe Combustion Turbine Facility",1001360,"2601 SOUTH PLATTE RIVER ROAD",39.6692,-105.0018,"DENVER","Denver","CO",80223,58691
  8 | "Arkansas Loop & Simpson Treating Plants",1001760,,37.0532,-107.7855,"DURANGO","La Plata","CO",81303,275707
  9 | "Atmel Corporation",1009792,"1150 E. Cheyenne Mountain Boulevard",38.789076,-104.805626,"Colorado Springs","EL PASO","CO",80906,280576
 10 | "Avago Technologies",1008734,"4380 Ziegler Road",40.5236,-105.02021,"Fort Collins","LARIMER COUNTY","CO",80525,298566
 11 | "BARGATH, INC- HYRUP PROD FACILITY",1002944,,39.369139,-108.06329,"PARACHUTE","Garfield","CO",81635,16342
 12 | "BARGATH, INC.- PARACHUTE",1002943,,39.487297,-108.111356,"PARACHUTE, 3.4 MI NW OF","Garfield","CO",81635,381505
 13 | "BLACK HILLS ELECTRIC- W.N. CLARK STATION",1005974,"550 W US HIGHWAY 50",38.4347,-105.2507,"CANON CITY","FREMONT","CO",81212,0
 14 | "BOULDER LANDFILL",1006661,"1600 SOUTH 66TH STREET",39.95,-105.2,"BOULDER","BOULDER","CO",80303,8557
 15 | "BOWIE NO. 2 MINE",1007215,"43659 Bowie Road",38.93268,-107.54603,"PAONIA","DELTA COUNTY","CO",81428,514703
 16 | "BROADACRE LANDFILL - FOUNTAIN LANDFILL",1006464,"10000 SQUIRREL CREEK RD",38.679516,-104.628161,"FOUNTAIN","EL PASO","CO",80817,59601
 17 | "Bargath LLC - Crawford Trail CS",1002945,,39.503457,-108.184214,"Parachute","Garfield","CO",81635,28500
 18 | "Big Hole Compressor Station",1011077,"37607 County Road 7",40.768594,-107.763621,"Craig","MOFFAT COUNTY","CO",81625,3385
 19 | "Blue Spruce Energy Center",1000141,"1751 N POWHATON RD",39.7436,-104.68,"AURORA","Adams","CO",80019,266601
 20 | "Bondad Compressor Station",1001759,,37.0881,-107.8829,"DURANGO","La Plata","CO",81301,20305
 21 | "Broad Canyon Landfill",1007618,"30120 HH31 Road",38.410408,-108.280136,"Naturita","MONTROSE","CO",81422,0
 22 | "Brush Power Projects",1001224,"1500 S CLAYTON",40.2415,-103.631,"BRUSH","Morgan","CO",80723,22693
 23 | "CARESTREAM HEALTH INC.",1007717,"2000 HOWARD SMITH AVE WEST",40.4584,-104.87399,"WINDSOR","WELD COUNTY","CO",80550,30998
 24 | "CARGILL MEAT SOLUTIONS CORPORATION",1000357,"1505 EAST BURLINGTON AVENUE",40.2469,-103.7756,"FORT MORGAN","MORGAN COUNTY","CO",80701,23801
 25 | "CCI Paradox Upstream - Andy Mesa Gas Plant",1005325,,38.0455,-108.6377,"San Miguel County","San Miguel","CO",81422,0
 26 | "CCI Paradox Upstream - Hamilton Creek Compressor Station",1008574,,38.1113,-108.4695,"San Miguel County","San Miguel","CO",81431,0
 27 | "CEMEX CONSTRUCTION MATERIALS SOUTH LLC",1007877,"5134 UTE HIGHWAY",40.202236,-105.236697,"LYONS","BOULDER","CO",80540,211682
 28 | "CENTRAL WELD SANITARY LANDFILL",1003798,"6037 E 77TH AVE",40.35201,-104.80878,"GREELEY","WELD COUNTY","CO",80634,23479
 29 | "CF & I STEEL L P/ DBA ROCKY MOUNTAIN STEEL MILLS",1003902,"2100 SOUTH FREEWAY",38.232627,-104.607257,"PUEBLO","PUEBLO","CO",81004,302345
 30 | "CIG Station 5310 Kim, CO",1001992,"90100 Highway 160",37.292224,-103.451177,"Kim","LAS ANIMAS","CO",81049,0
 31 | "CIG Station 5320 Fort Lupton, CO",1010489,"15732 Weld County Road 16",40.130922,-104.758947,"Ft. Lupton","WELD","CO",80261,44977
 32 | "CIG Station 5560 Kit Carson, CO",1001994,"3073 US HIGHWAY 287",38.413345,-102.759485,"EADS","KIOWA","CO",81036,26740
 33 | "CIG Station 5610 Greasewood, CO",1008151,"5200 County Road 3",39.854648,-108.105434,"Rifle","GARFIELD","CO",81650,31947
 34 | "CIG Station 5850 Cheyenne, CO",1002127,"65657 Highway 85",40.908951,-104.892167,"CARR","WELD","CO",80612,55735
 35 | "CIG Station 5950 Watkins, CO",1002061,"24650 East Smith Road",39.745283,-104.698908,"AURORA","ADAMS","CO",80019,43702
 36 | "COLORADO STATE UNIVERSITY",1004581,"6030 Campus Delivery",40.57,-105.09,"FORT COLLINS","LARIMER","CO",80523,42745
 37 | "Callahan Compressor Station",1002873,,39.468423,-108.08675,"PARACHUTE","Garfield","CO",81635,26023
 38 | "Cameo",1001461,"4 MI E OF PALISADE ON I 70",39.1486,-108.3189,"PALISADE","Mesa","CO",81526,0
 39 | "Central Treating Facility",1004824,,39.8338,-108.2957,"Meeker","Rio Blanco","CO",81641,91315
 40 | "Cherokee",1007207,"6198 FRANKLIN ST",39.8078,-104.9648,"DENVER","Adams","CO",80216,3058002
 41 | "Clough Compressor Station",1003022,,39.51861,-107.889912,"RIFLE","Garfield","CO",81650,24411
 42 | "Colorado Energy Nations Company LLC (Golden Facility)",1003568,"1003 Vasquez Street",39.760555,-105.215,"GOLDEN","JEFFERSON","CO",80401,379088
 43 | "Colorado Natural Gas, Inc.",1005703,"7810 Shaffer Pkwy Suite 120",39.57476,-105.13261,"Littleton","JEFFERSON COUNTY","CO",80127,123663
 44 | "Colorado Springs Landfill",1008019,"1010 Blaney Road",38.847491,-104.572053,"Colorado Springs","EL PASO","CO",80929,173705
 45 | "Comanche (470)",1001462,"2005 LIME RD",38.2081,-104.5747,"PUEBLO","Pueblo","CO",81006,8424077
 46 | "Compressor Station 601",1002406,"37500 County Rd 78",40.994389,-102.855976,"Peetz","LOGAN","CO",80747,56844
 47 | "Conn Creek Compressor Station",1007414,,39.4819,-108.2479,"De Beque","Garfield","CO",81630,32910
 48 | "Cottonwood Point Compressor Station",1003011,,39.481874,-107.991952,"PARACHUTE","Garfield","CO",81635,30407
 49 | "Coyote Gulch Treating Plant",1001946,,37.0141,-108.0615,"DURANGO","La Plata","CO",81301,162810
 50 | "Craig",1001008,"2101 S RANNEY",40.4627,-107.5912,"CRAIG","Moffat","CO",81626,8213416
 51 | "DEBEQUE GAS PROCESSING FACILITY",1011635,,39.3269,-108.2431,"De Beque","Mesa","CO",81630,23540
 52 | "DENVER ARAPAHOE DISPOSAL SITE-A WASTE MANAGEMENT COMPANY",1007709,"3500 SOUTH GUN CLUB ROAD",39.64566,-104.70914,"AURORA","ARAPAHOE COUNTY","CO",80018,53689
 53 | "DENVER INTERNATIONAL AIRPORT",1004796,"8500 PENA BOULEVARD",39.83425,-104.70436,"DENVER","DENVER","CO",80249,27705
 54 | "DENVER REGIONAL LANDFILL",1005633,"1441 WELD COUNTY ROAD 6",40.024535,-105.027726,"ERIE","BOULDER","CO",80516,242127
 55 | "Denver Regional North Landfill",1007700,"1441 Weld County Rd 6",40.024535,-105.027726,"Erie","BOULDER","CO",80516,2973
 56 | "EAGLE COUNTY LANDFILL",1005844,"815 Ute Creek Road ",39.72233,-106.66336,"WOLCOTT","EAGLE","CO",81655,49864
 57 | "ENCANA OIL AND GAS USA - DRAGON TRAIL GAS PLANT - 08-103-00036",1003447,"3606 COUNTY ROAD 116",39.859473,-108.915996,"RANGELY","RIO BLANCO","CO",81648,36114
 58 | "ENCANA OIL AND GAS USA - FORT LUPTON GAS PLANT",1003421,"16157",40.145859,-104.749966,"Fort Lupton","WELD","CO",80621,0
 59 | "ENTERPRISE COMPRESSOR STATION",1002666,"10002 Weld County Road 59",40.191,-104.4877,"LaSalle","WELD","CO",80645,47367
 60 | "EPNG Station 6210 Bondad",1002116,"2227 County Road 318",37.096339,-107.769381,"Ignacio","LA PLATA","CO",81137,44464
 61 | "Eagle Valley Clean Energy",1011681,"10775 HWY 6",39.646803,-106.940343,"Gypsum","EAGLE COUNTY","CO",81637,27
 62 | "FOOTHILLS LANDFILL",1006758,"8900 93 HWY",39.850794,-105.227345,"GOLDEN","JEFFERSON","CO",80403,27993
 63 | "FORT CARSON USARMY",1007910,"1626 Evans Street, Bldg 1219",38.76408,-104.79509,"Fort Carson","EL PASO","CO",80913,55973
 64 | "FRONT RANGE ENERGY",1006942,"31375 GREAT WESTERN DRIVE",40.455978,-104.857553,"WINDSOR","WELD","CO",80550,36282
 65 | "FRONT RANGE LANDFILL",1003911,"1830 WELD COUNTY ROAD 5",40.026864,-105.018265,"ERIE","BOULDER","CO",80516,168471
 66 | "Florida River Gas Processing Facility",1003223,"2906 CR 307",37.15639,-107.77978,"Durango","LA PLATA","CO",81303,146526
 67 | "Fort Lupton Compressor Station",1001977,,40.1434,-104.7515,"Brighton","Weld","CO",80601,248622
 68 | "Fort St. Vrain",1001029,"16805 WELD CR 19 12",40.2461,-104.8742,"PLATTEVILLE","Weld","CO",80651,1496872
 69 | "Fountain Valley Power Plant",1007383,"18693 Boca Raton Heights",38.5569,-104.6875,"Fountain","El Paso","CO",80817,184633
 70 | "Frank Knutson Station",1000061,"13501 POWHATEN ROAD",39.9414,-104.6817,"COMMERCE CITY","Adams","CO",80022,4851
 71 | "Fredrick Compressor Station",1002206,,40.0573,-104.8852,"Brighton","Weld","CO",80601,52200
 72 | "Front Range Power Plant",1001400,"6615 GENERATION DRIVE",38.6281,-104.7069,"FOUNTAIN","El Paso","CO",80817,758910
 73 | "GCC RIO GRANDE INC",1003067,"3372 LIME ROAD",38.1507,-104.62595,"PUEBLO","PUEBLO","CO",81004,655224
 74 | "GREELEY GAS PLANT",1006310,"3009 WEST 49TH STREET",40.38812,-104.76003,"GREELEY","WELD COUNTY","CO",80634,40696
 75 | "GRG - EAST MAMM CREEK CS",1003630,,39.4894897,-107.7232517,"RIFLE, 2.0 MI SE OF","Garfield","CO",81650,28886
 76 | "GRG - HIGH MESA CS",1006331,,39.395581,-108.0590714,"PARACHUTE","Garfield","CO",81635,26475
 77 | "GRG - HUNTER MESA CS",1006001,,39.4686107,-107.7153515,"RIFLE, 3.3 MI SE OF","Garfield","CO",81650,33020
 78 | "GRG - MAMM CREEK CS",1006003,,39.4894897,-107.7232517,"RIFLE","Garfield","CO",81650,15198
 79 | "GRG - PUMBA CS",1006004,,39.4649163,-107.7564733,"RIFLE, 3.6 MI S OF","Garfield","CO",81650,30801
 80 | "HOLMES MESA CMP STN",1003252,,39.467984,-107.926867,"RULISON","Garfield","CO",81650,44973
 81 | "Hambert Compressor Station",1011533,"18450 Weld County Road 35",40.2696,-104.724297,"Gilcrest","WELD","CO",80623,31186
 82 | "Hayden",1001466,"12795 E YUTE",40.4856,-107.185,"HAYDEN","Routt","CO",81639,3088889
 83 | "Hayes Gulch Compressor Station",1003014,,39.466732,-108.051398,"PARACHUTE","Garfield","CO",81635,25845
 84 | "Heath Compressor Station",1002936,,39.497639,-107.884743,"RIFLE","Garfield","CO",81650,37520
 85 | "Holcim (US) Inc. - Portland Plant",1003008,"3500 Highway 120",38.386936,-105.039244,"Florence","FREMONT","CO",81226,1052030
 86 | "Hudson Compressor Station",1002062,,40.2235,-104.7196,"Brighton","Weld","CO",80601,72094
 87 | "IGNACIO GAS PLANT",1002532,"3746 CR 307",37.144682,-107.784839,"DURANGO","LA PLATA","CO",81301,431640
 88 | "J.M. Shafer Generating Station",1000559,"6811 Weld County Road #31",40.0979,-104.7745,"FORT LUPTON","Weld","CO",80621,339262
 89 | "JBS Swift Beef Company - Greeley Plant",1004022,"800 North 8th Avenue",40.44278,-104.69233,"Greeley","WELD COUNTY","CO",80632,55183
 90 | "Jackrabbit Compressor Station",1005036,"13064 Garden Gulch Rd.",39.485628,-108.095435,"Parachute","GARFIELD","CO",81635,22232
 91 | "Jaques CS",1006460,"NW SEC 26 T33N R7W",37.095279,-107.71625,"Ignacio","LA PLATA","CO",81137,0
 92 | "KMG Electronic Chemicals,Inc.",1005503,"250 William White Boulevard",38.276933,-104.523808,"Pueblo","PUEBLO","CO",81001,0
 93 | "Koch Meeker Gas Plant",1010030,"929 Penny Dr",39.977742,-107.763621,"Meeker","RIO BLANCO COUNTY","CO",81641,37574
 94 | "LA PLATA \A\ CMP STN",1005882,"3775 COUNTY ROAD 307",37.143579,-107.786771,"DURANGO","LA PLATA","CO",81301,34256
 95 | "LADDER CREEK HELIUM PLANT",1002352,"41707 COUNTY ROAD P",39.014999,-102.413156,"CHEYENNE WELLS","CHEYENNE","CO",80810,32980
 96 | "LARIMER COUNTY LANDFILL",1005928,"5887 SOUTH TAFT HILL ROAD",40.49803,-105.12032,"FORT COLLINS","LARIMER COUNTY","CO",80526,142368
 97 | "LINDE LLC CORTEZ PLANT",1007715,"14207  RD G",37.327457,-109.017397,"CORTEZ","MONTEZUMA","CO",81321,915
 98 | "LUCERNE GAS PLANT",1002355,"31495 COUNTY ROAD 43",40.457201,-104.664686,"GREELEY","WELD","CO",80631,112196
 99 | "Lamar",1000188,"100 N SECOND ST",38.0921,-102.6148,"LAMAR","Prowers","CO",81052,0
100 | "Leprino Foods, Greeley",1006479,"1302 1 st Avenue",40.416952,-104.675853,"Greeley","WELD","CO",80631,38254
101 | "Limon Generating Station",1000060,"48303 STATE ROAD 71",39.2038,-103.7005,"LIMON","Lincoln","CO",80828,20247
102 | "MARLA COMPRESSOR STATION",1006309,,40.2767,-104.5475,"KERSEY","Weld","CO",80644,29246
103 | "MESA COUNTY LANDFILL",1006977,"3071 COLO HWY 50",39.01261,-108.49194,"GRAND JUNCTION","MESA","CO",81503,80103
104 | "MEWBOURN GAS PLANT",1006131,"18455 WELD COUNTY RD 35",40.266583,-104.734944,"GILCREST","WELD","CO",80623,231256
105 | "MONTROSE COUNTY LANDFILL",1007592,"67999 LANDFILL RD.",38.52354,-107.82121,"MONTROSE","MONTROSE COUNTY","CO",81401,55670
106 | "MVS Compressor Station",1001716,"69861 Highway 330E",39.277176,-107.74001,"Collbran","MESA","CO",81624,15500
107 | "Manchief Generating Station",1001327,"14936 COUNTY ROAD 24",40.2201,-103.679,"BRUSH","Morgan","CO",80723,108886
108 | "Martin Drake",1001465,"700 S CONEJOS ST",38.8244,-104.8331,"COLORADO SPRINGS","El Paso","CO",80903,1650039
109 | "McClane Canyon Mining LLC",1008988,"3148 HWY 139",39.440006,-108.776274,"Loma","MESA","CO",81524,0
110 | "Mead Compressor Station",1011898,,40.18097,-104.871885,"Platteville","Weld","CO",80651,25692
111 | "Meeker Compressor Station",1002912,"26100 CR 5",39.891773,-108.290437,"Rifle","GARFIELD","CO",81650,25961
112 | "Meeker Gas Plant",1004822,"27991 County Rd 5",39.910727,-108.294316,"Rifle","GARFIELD","CO",81650,364213
113 | "Midway Landfill",1007863,"8925 Rancho Colorado Boulevard",38.547492,-104.661847,"Fountain","PUEBLO","CO",80817,116742
114 | "NORTH WELD SANITARY LANDFILL",1007880,"40000 WELD COUNTY RD 25",40.58156,-104.8318,"AULT","WELD","CO",80610,138303
115 | "Natural Soda",1010576,"3200 CR31",39.886477,-108.332665,"Rifle","RIO BLANCO COUNTY","CO",81650,50797
116 | "Nucla",1007676,"30739 DD 30 ROAD",38.2387,-108.5083,"NUCLA","Montrose","CO",81424,543775
117 | "O'Connor Gas Plant",1010119,,40.352206,-104.587772,"LaSalle","Weld","CO",80645,89507
118 | "OWENS-BROCKWAY GLASS CONTAINER INC PLANT 28",1001975,"11133 Eastman Park Drive",40.461452,-104.849165,"Windsor","WELD COUNTY","CO",80550,92157
119 | "Outlaw Compressor Station",1001947,,37.1745,-107.7786,"DURANGO","La Plata","CO",81303,8230
120 | "Oxbow Mining, LLC",1009623,"3737 Highway 133",38.926289,-107.470007,"Somerset","GUNNISON COUNTY","CO",81434,34758
121 | "PIONEER NAT RES - BURRO CANYON CS",1002533,,37.15515,-104.66506,"COKEDALE 2.3 MI. W OF","Las Animas","CO",81082,31704
122 | "PIONEER NAT RES - TAMBURELLI CS",1002535,,37.2532,-104.657,"COKEDALE, 7.7 MI N OF","Las Animas","CO",81082,36914
123 | "PIONEER NAT RESOURCES - COTTONTAIL PASS",1006559,,37.21847,-104.7824,"COKEDALE","Las Animas","CO",81082,43278
124 | "PIONEER NAT RESOURCES - WET CANYON CS",1002534,,37.1519,-104.85782,"COKEDALE","Las Animas","CO",81082,40768
125 | "PIONEER NATURAL RESOURCES, USA - RITA CA",1002536,"SEC 12 T34S R66W",37.09901,-104.729713,"COKEDALE, 6.5 MI SW OF","LAS ANIMAS","CO",81082,0
126 | "PLAINS END Generating Station",1003138,"8950 HIGHWAY 93",39.872093,-105.240616,"Arvada","JEFFERSON","CO",80007,23662
127 | "PLATTEVILLE GAS PLANT",1005678,"13675 WELD COUNTY ROAD 34",40.232045,-104.798221,"PLATTEVILLE","WELD","CO",80651,51075
128 | "PUBLIC SERVICE CO DENVER STEAM PLT",1002817,"1875 DELGANY STREET (19TH AND DELGANY)",39.75583,-104.99924,"DENVER","DENVER","CO",80202,61068
129 | "Pawnee",1001048,"14940 County Road 24",40.2217,-103.6803,"Brush","Morgan","CO",80723,4119009
130 | "Plateville Compressor Station",1006880,,40.2235,-104.7196,"Brighton","Weld","CO",80601,49462
131 | "Public Service Company of Colorado",1002895,"1800 Larimer Street",39.75125,-104.99457,"Denver","DENVER COUNTY","CO",80202,206534
132 | "Pueblo Airport Generating Station",1000558,"400 N 27th Lane",38.322,-104.533,"Pueblo","Pueblo","CO",81001,541700
133 | "Pump Canyon Compreesor Station",1011983,,37.045517,-107.679114,"Durango","La Plata","CO",81301,27506
134 | "RIFLE CMP STN",1006929,,39.531599,-107.829371,"RIFLE","Garfield","CO",81650,29885
135 | "ROCKY MOUNTAIN BOTTLE COMPANY",1003465,"10619 W 50TH AVE",39.78741,-105.11498,"WHEAT RIDGE","JEFFERSON COUNTY","CO",80033,86973
136 | "ROGGEN GAS PLANT",1002031,"35409 WELD COUNTY ROAD 18",40.117556,-104.387444,"ROGGEN","WELD","CO",80652,45028
137 | "Rabbit Brush Compressor Station",1002946,,39.478517,-108.021664,"Parachute","Garfield","CO",81635,24299
138 | "Rangely Gas Plant",1009244,"100 Chevron Road",40.1064831,-108.8670246,"Rangely",,"CO",81648,16343
139 | "Rawhide Energy Station",1001062,"2700 East County Road 82",40.8611,-105.0206,"Wellington","Larimer","CO",80549,1881593
140 | "Ray D Nixon",1001195,"6598 RAY NIXON RD",38.6306,-104.7056,"FOUNTAIN","El Paso","CO",80817,1555747
141 | "Rocky Mountain Energy Center",1000271,"6211 WELD COUNTY RD 51",40.0911,-104.5947,"KEENESBURG","Weld","CO",80643,827192
142 | "Rocky Turbine Compressor Station",1011877,,40.4639,-104.4039,"Kersey","Weld","CO",80624,26274
143 | "Ryan Gulch Compressor Station",1002941,,39.8981,-108.3347,"MEEKER, 23.3 MI W OF","Rio Blanco","CO",81641,33803
144 | "SAMSON RESOURCES SPRING CREEK CS",1001067,,37.092635,-107.576296,"IGNACIO","La Plata","CO",81137,35473
145 | "SOUTH IGNACIO CDP",1006519,,37.054116,-107.625701,"IGNACIO","La Plata","CO",81137,26657
146 | "SPINDLE GAS PROCESSING PLANT",1002415,"9101 WELD COUNTY RD 14",40.088944,-104.884194,"FT LUPTON","WELD","CO",80621,45312
147 | "STERLING ETHANOL, LLC",1006055,"450 ANGUS AVENUE",40.6375,-103.190556,"STERLING","LOGAN","CO",80751,53325
148 | "SUMMIT COUNTY LANDFILL",1005695,"639 LANDFILL RD",39.608712,-105.997922,"DILLON AREA","SUMMIT","CO",80435,32873
149 | "SUNCOR ENERGY (USA) COMMERCE CITY REFINERY",1007923,"5801 BRIGHTON BLVD",39.805556,-104.944444,"COMMERCE CITY","ADAMS","CO",80022,962525
150 | "Sage Creek Mine",1010512,"36600 Routt County Road 27",40.444999,-107.13779,"Hayden","ROUTT","CO",81639,0
151 | "Sambrito Compressor Station",1001763,,37.0445,-107.4935,"Durango","La Plata","CO",81301,42845
152 | "SourceGas, LLC - Arkansas",1006604,"600 12th Street; Suite 300",39.722098,-105.135202,"Golden","JEFFERSON","CO",80401,61305
153 | "SourceGas, LLC - Colorado",1004607,"600 12th Street; Suite 300",39.722098,-105.135202,"Golden","JEFFERSON","CO",80401,16043
154 | "SourceGas, LLC - Nebraska",1006605,"600 12th Street; Suite 300",39.722098,-105.135202,"Golden","JEFFERSON","CO",80401,21233
155 | "SourceGas, LLC - Wyoming",1006603,"600 12th Street; Suite 300",39.722098,-105.135202,"Golden","JEFFERSON","CO",80401,10277
156 | "Spindle Hill Energy Center",1000486,"6335 WELD COUNTY RD 19",40.0914,-104.8819,"Fort Lupton","Weld","CO",80621,109020
157 | "St. Vrain Compressor Station",1011904,,40.23199641,-104.88326806,"Platteville","Weld","CO",80651,27732
158 | "Sterling Energy Investments LLC Centennial Gas Plant",1011986,"47285 County Road 100",40.711642,-104.285426,"Briggsdale",,"CO",80611,36503
159 | "Story Gulch Compressor Station",1010414,"370 17th Street Suite 1700",39.74346,-104.98796,"Denver","DENVER COUNTY","CO",80202,65390
160 | "Summit Natural Gas of Maine",1011282,"7810 Shaffer Parkway",39.57476,-105.13261,"Littleton","JEFFERSON COUNTY","CO",80127,17905
161 | "Summit Natural Gas of Missouri",1009519,"7810 Shaffer Pkwy Suite 120",39.57476,-105.13261,"Littleton","JEFFERSON COUNTY","CO",80127,108273
162 | "TOWER LANDFILL INC",1006044,"8480 TOWER ROAD",39.853416,-104.767499,"COMMERCE CITY","DENVER","CO",80022,22930
163 | "Thermo Greeley",1005902,"846 North 6th Avenue",40.441466,-104.687297,"Greeley","WELD COUNTY","CO",80631,0
164 | "Thermo Power & Electric LLC",1003334,"510 18th Street",40.41011,-104.684424,"Greeley","WELD","CO",80631,0
165 | "Twentymile Mine",1001682,"29515 Route County Road #27",40.334417,-107.081476,"Oak Creek","ROUTT COUNTY","CO",80467,13802
166 | "Twin Landfill Corporation",1006834,"20650 County Road 205",40.474444,-107.04,"Milner","ROUTT COUNTY","CO",80487,46041
167 | "US Air Force Academy",1005492,"8120 Edgerton Drive",38.990611,-104.860572,"USAFA","EL PASO","CO",80840,29966
168 | "University of Colorado Boulder - Utility Services",1002459,,40.0076,-105.2693,"Boulder","Boulder","CO",80309,31527
169 | "Valmont",1001463,"1800 N 63RD ST",40.0195,-105.202,"BOULDER","Boulder","CO",80302,1110627
170 | "Valmont Combustion Turbine Facility",1001364,"1800 N 63RD ST",40.0197,-105.202,"BOULDER","Boulder","CO",80302,0
171 | "Vanguard - BAILEY COMPRESSOR STATION",1003047,,39.5075,-107.6464,"Silt","Garfield","CO",81652,52459
172 | "Vanguard - MAMM CREEK COMPRESSOR STATION",1003230,,39.4917,-107.7089,"Silt","Garfield","CO",81652,7756
173 | "Vollmar Compressor Station",1011910,,40.14429,-104.85966,"Fort Lupton","Weld","CO",80621,33731
174 | "WASTE MGMT OF CO INC County Line",1007907,"4200 E COUNTY LINE RD",39.5636,-104.9335,"LITTLETON","DOUGLAS","CO",80126,5647
175 | "WESTERN AGGREGATES INCORPORATED",1004379,"11728 HIGHWAY 93",39.90969,-105.2386,"BOULDER","JEFFERSON COUNTY","CO",80303,20284
176 | "WESTERN SUGAR COOP",1001823,"18317 HIGHWAY 144",40.26269,-103.80612,"FORT MORGAN","MORGAN","CO",80701,150686
177 | "WIC Station 7938 Snake River, CO",1008148,"18640 County Road 4",40.97969,-107.71353,"Craig","MOFFAT COUNTY","CO",81625,30332
178 | "WILGATH (FORMERLY ROC GAS) - SAGEBRUSH",1002937,,39.850311,-108.482382,"RANGELY 21.0 MI. SE OF","Rio Blanco","CO",81650,0
179 | "WILLOW CREEK GAS PLANT",1002319,"20219 County Road 5",39.977742,-107.763621,"Rifle","RIO BLANCO","CO",81650,342782
180 | "Wattenberg Gas Plant",1003254,"1909 Powhaton Road",39.746431,-104.681535,"Aurora","ADAMS","CO",80019,72468
181 | "West Elk Mine",1010310,"5174 Highway 133",38.92823,-107.44687,"Somerset","GUNNISON COUNTY","CO",81434,492398
182 | "XTO - HILL RANCH #1",1005401,,37.0588,-104.8765,"COKEDALE","Las Animas","CO",81091,24357
183 | "XTO - PICEANCE CREEK",1002673,,39.8933,-108.1947,"MEEKER","Rio Blanco","CO",81641,24283
184 | "YUMA ETHANOL, LLC",1002083,"38480 COUNTY ROAD H",40.13,-102.68,"YUMA","YUMA","CO",80759,49193
185 | "Zuni",1001464,"1335 ZUNI ST",39.7369,-105.0169,"DENVER","Denver","CO",80204,23648
186 | 


--------------------------------------------------------------------------------
/module-02/app/data/metadata.txt:
--------------------------------------------------------------------------------
1 | Data Extracted from EPA's FLIGHT Tool (http://ghgdata.epa.gov/ghgp)																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																															
2 | The data was reported to EPA by facilities as of 08/13/2016																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																															
3 | All emissions data is presented in units of metric tons of carbon dioxide equivalent using GWP's from IPCC's AR4																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																															
4 | Search Parameters: year=2015; state=CO; GHGs=ALL; data type=All Emitters; 																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																															
5 | 																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																																															
6 | 


--------------------------------------------------------------------------------
/module-02/app/index-solution.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset=utf-8 />
  6 |     <title>Green House Gas Emissions</title>
  7 |     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  8 | 
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css" />
 10 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
 11 |     <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
 12 |     <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
 13 | 
 14 |     <style>
 15 |         body {
 16 |             margin: 0;
 17 |             padding: 0;
 18 |             background: "whitesmoke";
 19 |             font-family: "Noto Sans", sans-serif;
 20 |             color: #3d3d3d;
 21 |         }
 22 | 
 23 |         h1 {
 24 |             position: absolute;
 25 |             margin-top: 0;
 26 |             top: 10px;
 27 |             left: 15px;
 28 |             font-size: 1.8em;
 29 |             font-family: "Lora", serif;
 30 |             letter-spacing: .04em;
 31 |             padding: 10px 15px;
 32 |             background: rgba(256, 256, 256, .8);
 33 |             border: 1px solid grey;
 34 |             border-radius: 3px;
 35 |             z-index: 800;
 36 |         }
 37 | 
 38 |         h2 {
 39 |             font-family: "Lora", serif;
 40 |             letter-spacing: .04em;
 41 |             font-size: 1.2em;
 42 |             line-height: 1.5em;
 43 |         }
 44 |         h3 {
 45 |             font-family: "Noto Sans", sans-serif;
 46 |             font-size: 1.1em;
 47 |             font-weight: normal;
 48 |             text-align: center;
 49 |             margin: 0;
 50 |         }
 51 | 
 52 |         #map {
 53 |             position: absolute;
 54 |             top: 0;
 55 |             bottom: 0;
 56 |             width: 100%;
 57 |         }
 58 | 
 59 |         #side-panel {
 60 |             position: absolute;
 61 |             bottom: 0;
 62 |             left: 15px;
 63 |             width: 280px;
 64 |             margin: 20px auto;
 65 |             padding: 0 15px;
 66 |             background: rgba(256, 256, 256, .8);
 67 |             border: 1px solid grey;
 68 |             border-radius: 3px;
 69 |             z-index: 800;
 70 |         }
 71 | 
 72 |         p {
 73 |             font-size: .9em;
 74 |             line-height: 1.5em;
 75 |         }
 76 | 
 77 |         a {
 78 |             color: #005daa;
 79 |             text-decoration: none;
 80 |         }
 81 | 
 82 |         a:hover {
 83 |             text-decoration: underline;
 84 |         }
 85 |         #legend {
 86 |             position: relative;
 87 |             margin: 20px 0;
 88 |         }
 89 |         #legend-large, #legend-small {
 90 |             border: 2px solid grey;
 91 |             border-radius: 50%;
 92 |             background: whitesmoke;
 93 |             position: absolute;
 94 |         }
 95 |         #legend-large-label, #legend-small-label {
 96 |             position: absolute;
 97 |         }
 98 |         #legend hr.small, #legend hr.large {
 99 |             width: 83px;
100 |             position: absolute;
101 |             top: -8px;
102 |             left: 66px;
103 |         }
104 | 
105 |     </style>
106 | </head>
107 | 
108 | <body>
109 | 
110 |     <h1>It's getting hot out west!</h1>
111 | 
112 |     <div id='map'></div>
113 | 
114 |     <section id="side-panel">
115 |         <h2>2015 Green House Gas Emissions in Colorado</h2>
116 | 
117 |         <p>This proportional symbol map shows the relative magnitude of green house gas emissions in 2015 by large facilites. Data are shown by <span style='color: #bd4932; font-weight: bold;'>fuel combustion</span> and <span style='color: #105b63; font-weight: bold;'> process emissions</span>.
118 | 
119 |         <h3>Metric tons of GHG</h3>
120 |         <div id='legend'>
121 |             <div id="legend-large"></div>
122 |             <div id="legend-small"></div>
123 |             <div id="legend-large-label"></div>
124 |             <div id="legend-small-label"></div>
125 |         </div>
126 |         <p>The data are reported to the EPA and available from their <a href="https://ghgdata.epa.gov/ghgp/main.do">FLIGHT</a> web applicaiton.</p>
127 |         <p>Map authored <a href="https://github.com/rgdonohue">Rich Donohue</a>.</p>
128 | 
129 |     </section>
130 | 
131 |     <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
132 |     <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
133 |     <script>
134 |         var options = {
135 |            center: [39.22, -106.72],
136 |             zoom: 7.2,
137 |             zoomSnap: .4,
138 |             zoomControl: false
139 |         }
140 | 
141 |         var map = L.map('map', options);
142 | 
143 |         L.control.zoom({ position: 'topright'}).addTo(map);
144 | 
145 |         var tiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
146 |             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
147 |             subdomains: 'abcd',
148 |             maxZoom: 19
149 |         }).addTo(map);
150 | 
151 | 
152 |         $.getJSON('data/ghg-emissions.json', function (data) {
153 | 
154 |             console.log(data);
155 | 
156 |             data.features.sort(function (a, b) {
157 |                 return b.properties.GHG_QUANTITY - a.properties.GHG_QUANTITY
158 |             });
159 | 
160 |             drawMap(data);
161 | 
162 |         });
163 | 
164 |         function drawMap(data) {
165 | 
166 |             var options = {
167 | 
168 |                 pointToLayer: pointToLayer,
169 |                 style: style,
170 |                 onEachFeature: onEachFeature
171 | 
172 |             }
173 | 
174 |             L.geoJson(data, options).addTo(map);
175 | 
176 |              drawLegend(data)
177 | 
178 |         }
179 | 
180 | 
181 |         function pointToLayer(feature, latlng) {
182 |             // function will take Point Feature geometry
183 |             // and convert to a Leaflet layer by returning
184 |             // a Leaflet marker or SVG such as circle or circleMarker
185 | 
186 |             return L.circleMarker(latlng, {
187 | 
188 |                 radius: calcRadius(feature.properties.GHG_QUANTITY)
189 | 
190 |             });
191 | 
192 |         }
193 | 
194 |         function style(feature) {
195 | 
196 |             var styleOptions = {
197 | 
198 |                 fillOpacity: .6,
199 |                 color: "whitesmoke",
200 |                 weight: 1
201 | 
202 |             }
203 | 
204 |             if (feature.properties.TYPE === 'fc') {
205 |                 styleOptions.fillColor = '#bd4932';
206 |             } else {
207 |                 styleOptions.fillColor = '#105b63';
208 |             }
209 | 
210 |             return styleOptions;
211 | 
212 |         }
213 | 
214 |         function onEachFeature(feature, layer) {
215 | 
216 |             layer.on({
217 |                 mouseover: function () {
218 | 
219 |                     layer.setStyle({
220 |                         color: "yellow",
221 |                         weight: 3
222 |                     });
223 | 
224 |                 },
225 |                 mouseout: function () {
226 | 
227 |                     layer.setStyle({
228 |                         color: "whitesmoke",
229 |                         weight: 1
230 |                     });
231 |                 }
232 |             });
233 | 
234 |             var typeCode = {
235 |                 'fc': "fuel combustion",
236 |                 'pe': "process emissions"
237 |             }
238 | 
239 |             var toolTipInfo = "Name: " + feature.properties.FACILITY_NAME + "<br>" +
240 |                 "C02: " + feature.properties.GHG_QUANTITY.toLocaleString() + "<br>" +
241 |                 "Type: " + typeCode[feature.properties.TYPE]
242 | 
243 | 
244 |             layer.bindTooltip(toolTipInfo, { sticky: true });
245 | 
246 |         }
247 | 
248 |         function calcRadius(val) {
249 | 
250 |             var radius = Math.sqrt(val / Math.PI);
251 |             return radius * .04;
252 | 
253 |         }
254 | 
255 |         function drawLegend(data) {
256 | 
257 |               var largeDiameter = calcRadius(data.features[0].properties.GHG_QUANTITY) * 2,
258 |                   smallDiameter = largeDiameter/2;
259 | 
260 |               $("#legend").css('height', largeDiameter.toFixed());
261 | 
262 |               $('#legend-large').css({
263 |                   'width': largeDiameter.toFixed(),
264 |                   'height': largeDiameter.toFixed()
265 |               })
266 | 
267 |               $("#legend-large-label").html(data.features[0].properties.GHG_QUANTITY.toLocaleString());
268 | 
269 |               $("#legend-large-label").css({
270 |                   'left': largeDiameter + 30,
271 |                   'top' : -8
272 |               });
273 | 
274 |               $('#legend-small').css({
275 |                   'width': smallDiameter.toFixed(),
276 |                   'height': smallDiameter.toFixed(),
277 |                   'top': largeDiameter - smallDiameter,
278 |                   'left': smallDiameter/2
279 |               })
280 | 
281 |               $("#legend-small-label").html((data.features[0].properties.GHG_QUANTITY/2).toLocaleString());
282 | 
283 |               $("#legend-small-label").css({
284 |                   'top': smallDiameter - 8,
285 |                   'left': largeDiameter + 30
286 |               });
287 | 
288 |               $("<hr class='large'>").insertBefore("#legend-large-label")
289 |               $("<hr class='small'>").insertBefore("#legend-small-label").css('top', largeDiameter - smallDiameter - 8);
290 | 
291 |         }
292 | 
293 | 
294 | 
295 |     </script>
296 | 
297 | </body>
298 | 
299 | </html>
300 | 


--------------------------------------------------------------------------------
/module-02/app/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset=utf-8 />
  6 |   <title>Green House Gas Emissions</title>
  7 |   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  8 | 
  9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css" />
 10 |   <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
 11 |   <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
 12 |   <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
 13 | 
 14 |   <style>
 15 |     body {
 16 |       margin: 0;
 17 |       padding: 0;
 18 |       background: "whitesmoke";
 19 |       font-family: "Noto Sans", sans-serif;
 20 |       color: #3d3d3d;
 21 |     }
 22 | 
 23 |     h1 {
 24 |       position: absolute;
 25 |       margin-top: 0;
 26 |       top: 10px;
 27 |       left: 15px;
 28 |       font-size: 1.8em;
 29 |       font-family: "Lora", serif;
 30 |       letter-spacing: .04em;
 31 |       padding: 10px 15px;
 32 |       background: rgba(256, 256, 256, .8);
 33 |       border: 1px solid grey;
 34 |       border-radius: 3px;
 35 |       z-index: 800;
 36 |     }
 37 | 
 38 |     h2 {
 39 |       font-family: "Lora", serif;
 40 |       letter-spacing: .04em;
 41 |       font-size: 1.2em;
 42 |       line-height: 1.5em;
 43 |     }
 44 | 
 45 |     h3 {
 46 |       font-family: "Noto Sans", sans-serif;
 47 |       font-size: 1.1em;
 48 |       font-weight: normal;
 49 |       text-align: center;
 50 |       margin: 0;
 51 |     }
 52 | 
 53 |     #map {
 54 |       position: absolute;
 55 |       top: 0;
 56 |       bottom: 0;
 57 |       width: 100%;
 58 |     }
 59 | 
 60 |     #side-panel {
 61 |       position: absolute;
 62 |       bottom: 0;
 63 |       left: 15px;
 64 |       width: 280px;
 65 |       margin: 20px auto;
 66 |       padding: 0 15px;
 67 |       background: rgba(256, 256, 256, .8);
 68 |       border: 1px solid grey;
 69 |       border-radius: 3px;
 70 |       z-index: 800;
 71 |     }
 72 | 
 73 |     p {
 74 |       font-size: .9em;
 75 |       line-height: 1.5em;
 76 |     }
 77 | 
 78 |     a {
 79 |       color: #005daa;
 80 |       text-decoration: none;
 81 |     }
 82 | 
 83 |     a:hover {
 84 |       text-decoration: underline;
 85 |     }
 86 | 
 87 |     #legend {
 88 |       position: relative;
 89 |       margin: 20px 0;
 90 |     }
 91 | 
 92 |     #legend-large,
 93 |     #legend-small {
 94 |       border: 2px solid grey;
 95 |       border-radius: 50%;
 96 |       background: whitesmoke;
 97 |       position: absolute;
 98 |     }
 99 | 
100 |     #legend-large-label,
101 |     #legend-small-label {
102 |       position: absolute;
103 |     }
104 | 
105 |     #legend hr.small,
106 |     #legend hr.large {
107 |       width: 83px;
108 |       position: absolute;
109 |       top: -8px;
110 |       left: 66px;
111 |     }
112 |   </style>
113 | </head>
114 | 
115 | <body>
116 | 
117 |   <h1>It's getting hot out west!</h1>
118 | 
119 |   <div id='map'></div>
120 | 
121 |   <section id="side-panel">
122 |     <h2>2015 Green House Gas Emissions in Colorado</h2>
123 | 
124 |     <p>This proportional symbol map shows the relative magnitude of green house gas emissions in 2015 by large facilites. Data
125 |       are shown by
126 |       <span style='color: #bd4932; font-weight: bold;'>fuel combustion</span> and
127 |       <span style='color: #105b63; font-weight: bold;'> process emissions</span>.
128 | 
129 |       <h3>Metric tons of GHG</h3>
130 |       <div id='legend'>
131 |         <div id="legend-large"></div>
132 |         <div id="legend-small"></div>
133 |         <div id="legend-large-label"></div>
134 |         <div id="legend-small-label"></div>
135 |       </div>
136 |       <p>The data are reported to the EPA and available from their
137 |         <a href="https://ghgdata.epa.gov/ghgp/main.do">FLIGHT</a> web applicaiton.</p>
138 |       <p>Map authored
139 |         <a href="https://github.com/rgdonohue">Rich Donohue</a>.</p>
140 | 
141 |   </section>
142 | 
143 |   <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
144 |   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
145 |   <script>
146 |     var options = {
147 |       center: [39.22, -106.72],
148 |       zoom: 7.2,
149 |       zoomSnap: .4,
150 |       zoomControl: false
151 |     }
152 | 
153 |     var map = L.map('map', options);
154 | 
155 |     L.control.zoom({
156 |       position: 'topright'
157 |     }).addTo(map);
158 | 
159 |     var tiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
160 |       attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
161 |       subdomains: 'abcd',
162 |       maxZoom: 19
163 |     }).addTo(map);
164 |   </script>
165 | 
166 | </body>
167 | 
168 | </html>


--------------------------------------------------------------------------------
/module-02/lesson-02.md:
--------------------------------------------------------------------------------
  1 | # Lesson 02. Thematic Web Mapping: Point Symbology
  2 | 
  3 | This lesson guides you through a process of creating a proportional symbol map. We're going to work with some greenhouse gas emissions data to make a map looking something like this: [http://situatedlaboratories.net/carbon-emissions-co/app/](http://situatedlaboratories.net/carbon-emissions-co/app/).
  4 | 
  5 | Proportional symbol maps are a useful alternative to the common choropleth map. We can use them to map total or ratio data and unlike choropleth maps we don't need to standardize the data. We can use precise point data to make a proportional symbol map (such as the location of a coal plant), or conceptual point data (i.e., a wind farm covers a large area, but we can still represent it as a point). Proportional symbol maps are also good at showing relative magnitudes (i.e., "I can tell that this one is larger than that one"). We can make proportional symbol maps with any shape, though circles are the most common.
  6 | 
  7 | To begin, clone or [download the course repository](https://github.com/rgdonohue/web-mapping-short-course) to your computer.
  8 | 
  9 | Clone or unzip the contents of the files in a known location (i.e., a directory in your Documents). Examine the contents of the directory named *module-02/*. You notice a directory named *app/* that contains an HTML document named *index.html*.
 10 | 
 11 | Before proceeding, verify you have correctly set up your development environment with the necessary components. Refer to [Lesson 01: Setting up a development environment](https://github.com/rgdonohue/web-mapping-short-course/blob/master/module-01/lesson-01.md#setting-up-a-development-environment) for help.
 12 | 
 13 | 
 14 | ## Step 01: Data wrangling and conversion
 15 | 
 16 | First, let's get some data!. We're first going to download some tabular data from the web and manipulate it using a spreadsheet program. We'll then save it as a CSV file format before converting it to GeoJSON.
 17 | 
 18 | ### Getting the data
 19 | 
 20 | 
 21 | Navigate to the EPA's [Facility Level Information on GreenHouse Gasses Tool (FLIGHT)](https://ghgdata.epa.gov/ghgp/main.do). The tool offers you several filtering options. 
 22 | 
 23 | ![EPA's FLIGHT app filtered for 2015 data in Colorado](lesson-images/flight.png)  
 24 | **Figure 01.** EPA's FLIGHT app filtered for 2015 data in Colorado.
 25 | 
 26 | Narrow your search to a specific US state (e.g., Colorado) for 2015 data, and leave the rest of the options as default. When ready, click **Export Data** to download the data file. Note that we download it as a Microsoft Xcel file named *flight.xls*. Save or move this file into the *data/* directory within the *module-02/app/* directory.
 27 | 
 28 | ### Cleaning the data and converting to CSV
 29 | 
 30 | Next, open this file within a spreadsheet program. You can do this using Microsoft Xcel, but note the word of caution below regarding character encoding. We need to be very careful with these next steps. I'll be demonstrating this using OpenOffice.
 31 | 
 32 | Currently, the data are encoded within the *.xls* file format (which OpenOffice and LibreOffice can read). Our next step is to clean this data up a bit and convert it to a CSV file. Because we're working with point-level data where each feature has a latitude and longitude value, the CSV will be the most efficient flat-file format in which to store the data.
 33 | 
 34 | ![The flight.xls file opened in OpenOffice](lesson-images/file-openoffice.png)  
 35 | **Figure 02.** The flight.xls file opened in OpenOffice.
 36 | 
 37 | We first note that there are metadata stored within the first few rows of the file. You may want to copy this information and paste it into a *metadata.txt* file within your *data/* directory. Then delete the first five rows from the sheet.
 38 | 
 39 | Next, we can examine the data and remove any columns we don't need. Remember that when serving maps over the web we want to keep file sizes as small as we can. Even though the broadband internet is fast, we're also designing our maps to work on mobile devices and a broader global audience with potentially limited bandwidth.
 40 | 
 41 | Remove the columns with headings "REPORTING YEAR", "PARENT COMPANIES", and "SUBPARTS".
 42 | 
 43 | Next, we want to further prepare the data for use within a scripting environment. **Spaces can be problematic in the names of files, directories, and data attributes. DON'T USE SPACES!!!** I had to yell that one because it is important and perpetually violated.
 44 | 
 45 | Let's run through the column headings (i.e., our data attributes) and edit them to remove spaces and make them more useful for our script later on.
 46 | 
 47 | Make the following changes:
 48 | 
 49 | * Change "FACILITY NAME" to "NAME"
 50 | * Change "GHGRP ID" to "GHGRP_ID" (note how I use an underscore here)
 51 | * Change "REPORTED ADDRESS" to "ADDRESS"
 52 | * Change "CITY NAME" to "CITY"
 53 | * Change "COUNTY NAME NAME" to "COUNTY"
 54 | * Change "ZIP CODE" to "ZIP"
 55 | * Change "GHG QUANTITY (METRIC TONS CO2e)" to "GHG_QUANTITY"
 56 | 
 57 | Save the changes to the *.xls* file.
 58 | 
 59 | ![The flight.xls file cleaned up in OpenOffice](lesson-images/file-cleaned.png)  
 60 | **Figure 03.** The flight.xls file cleaned up in OpenOffice.
 61 | 
 62 | Next, we want to convert this file to a CSV format. While this should be a simple "Save As .." we need to be careful with this step. Different programs use different character encodings to save a CSV file, as well as different line break characters. This can cause problems later on when we load and parse the data using JavaScript in the browser.
 63 | 
 64 | When choosing **File -> Save As ...** in OpenOffice, I can choose the File type to be "Text CSV (.csv). I can also rename the file to something useful like *ghg-co-2015.csv*.
 65 | 
 66 | ![Saving the file as a CSV in OpenOffice](lesson-images/save-csv.png)  
 67 | **Figure 04.** Saving the file as a CSV in OpenOffice.
 68 | 
 69 | Importantly, open office gives us an additional dialog box with **Export Text File** options. Ensure that the "Character set" is "Unicode (UTF-8)", the field delimiter is a comma, and that you've checked the box to "Quote all text cells."
 70 | 
 71 | ![Export Text File options in OpenOffice](lesson-images/csv-export-options.png)  
 72 | **Figure 05.** Export Text File options in OpenOffice.
 73 | 
 74 | Click OK to export the CSV file, saving it again within the *module-02/app/data/* directory.
 75 | 
 76 | **Protip:** The open source text editor [Text Wrangler](http://www.barebones.com/products/TextWrangler/) is a great tool to have in your arsenal (NotePad++ is functionally equivalent for PCs). While not the developer's editor of choice, Text Wrangler handles large files well, is good for doing quick Find and Replace operations, and is helpful in ensuring your CSV file is saved with the correct character encoding, as well as how the line breaks are encoded (Legacy Mac OS (CR), Unix (LF), or Windows (CRLF)). LF or CR usually cause the least amount of problems.
 77 | 
 78 | ### Converting the CSV data to GeoJSON
 79 | 
 80 | There are many ways to convert a CSV file to GeoJSON. One of the easiest (surprise, surprise!) is to use the web-based tool [geojson.io](http://geojson.io/).
 81 | 
 82 | Open the file in the web interface. Note that geojson.io has converted the attribute column headings and values within the CSV to key/value pairs within a `properties` object for each point feature in our data.
 83 | 
 84 | ![The CSV file converted to GeoJSON in geojson.io](lesson-images/csv-geojson-io.png)  
 85 | **Figure 06.** The CSV file converted to GeoJSON in geojson.io.
 86 | 
 87 | Save this file to your local machine as a GeoJSON, and rename the file from *map.geojson* to *ghg-co-2015.json*.
 88 | 
 89 | Note how in this example, the original .xls file heading "Name" was edited to contain a space before the "N" ... " NAME". This is not a trivial error in coding and may cause problems later when trying to programmatically access the value of each feature's NAME attribute. Also, unlike the CSV in which that one heading entry can easily be edited, when we convert it to GeoJSON that mistake is replicated within the properties of each feature. However, a find and replace in a powerful text editor can quickly rectify the problem.
 90 | 
 91 | 
 92 | ## Step 02: Loading data into the script
 93 | 
 94 | Begin by opening the *module-02/app/index.html* in your text editor and load the page in your browser using a local server (see [Lesson 01](https://github.com/rgdonohue/web-mapping-short-course/blob/master/module-01/lesson-01.md)).
 95 | 
 96 | We can see that a basic Leaflet map template has loaded within the page (using CARTO's light basemap tiles). With the developer tools open, we see there is also a 404 (Not Found) error generated within the script.
 97 | 
 98 | ![Basic Leaflet map template loaded with 404 error](lesson-images/error-404.png)   
 99 | **Figure 07.** Basic Leaflet map template loaded with 404 error.
100 | 
101 | Within the toolbar, we can drill down into what's known as the "call stack" or "stack trace" to further diagnose the error and where it occurs within our script. We see that within our *index.html* file the error is thrown on line 129.
102 | 
103 | ![Examining the call stack error](lesson-images/stack-trace.png)   
104 | **Figure 08.** Examining the call stack error.
105 | 
106 | The error is thrown within the JavaScript that is attempting to use an asynchronous request to load an external file.
107 | 
108 | ```javascript
109 | $.getJSON('data/data.json', function (data) {
110 | 
111 |     console.log(data);
112 | 
113 | });
114 | ```
115 | 
116 | The problem here is that JQuery's `.getJSON()` method is looking for a data file that doesn't exist. We don't currently have a file at this location: `'data/data.json'`.
117 | 
118 | Edit the JavaScript to look for our file named ghg-co-2015.json, save the changes and refresh the browser. Provided there were no errors in the CSV encoding or any additional errors in the JavaScript, you should see our point data drawn as the default Leaflet markers on the map.
119 | 
120 | ![GeoJSON data drawn as point markers](lesson-images/points-as-markers.png)   
121 | **Figure 09.** GeoJSON data drawn as point markers.
122 | 
123 | Note that we are logging to Console the variable `data`, which refers to our GeoJSON data we've loaded into the script. You can "drill down" to explore the structure of the data within the Console. It's the same structure that geojson.io helped us produce.
124 | 
125 | ![Exploring the data logged to the Console](lesson-images/exploring-data-structure.gif)   
126 | **Figure 10.** Exploring the data logged to the Console.
127 | 
128 | The `index.html` starter file has quite a bit of JavaScript already written for us, with several key statements commented out. Let's take a moment to get the big picture of how this script is structured before exploring some of the details of how we turn these markers into proportional symbols.
129 | 
130 | You'll note that the script is broken down into many functions. Once our data is loaded, we call a function named `drawMap` and send our `data` variable as an argument. Within the `drawMap` function we currently use the Leaflet [L.GeoJson() method](http://leafletjs.com/reference-1.0.0.html#geojson) to convert this to a Leaflet object and add it to our map.
131 | 
132 | ```javascript
133 | function drawMap(data) {
134 | 
135 |     var options = {
136 | 
137 |         pointToLayer: pointToLayer,
138 |         style: style,
139 |         onEachFeature: onEachFeature
140 | 
141 |     }
142 | 
143 |     L.geoJson(data).addTo(map);
144 | 
145 | //  L.geoJson(data, options).addTo(map);
146 | 
147 | //  drawLegend(data)
148 | 
149 | }
150 | ```
151 | 
152 | Before we do anything else, note the `options` object within this function:
153 | 
154 | ```javascript
155 | var options = {
156 | 
157 |     pointToLayer: pointToLayer,
158 |     style: style,
159 |     onEachFeature: onEachFeature
160 | 
161 | }
162 | ```
163 | 
164 | These are options we can use when creating a Leaflet L.geoJson object, and the [API reference](http://leafletjs.com/reference-1.0.0.html#geojson) documents what they do and how to use them.
165 | 
166 | ![The Leaflet API Reference options for L.GeoJson](lesson-images/leaflet-geojson-api.png)   
167 | **Figure 11.** The Leaflet API Reference options for L.GeoJson.
168 | 
169 | The key on the left is associated with a function on the right of each, as you scan the code below, you'll see that there are three respective functions for each of these options (here I've named the functions the same as the key, but these functions could be named anything).
170 | 
171 | When we pass this `options` object to the method that creates the Leaflet L.GeoJson() object, these functions will eventually do the following:
172 | 
173 | * The `pointToLayer` function will convert our point-level feature data to a Leaflet "layer" such as a vector layer. Specifically, we're going to convert them into [Leaflet's CircleMarker](http://leafletjs.com/reference-1.0.0.html#circlemarker) vector layer. Features become "layers" in Leaflet.
174 | * The `style` function will return a style object used to change the visual appearance of the vector layers Leaflet draws to the map. All vector layers inherit the options available to the [L.Path class](http://leafletjs.com/reference-1.0.0.html#path) (see Figure 12 below). You can edit, add, and remove these options.
175 | * The `onEachFeature` function will iterate over all our features as they are converted to vector layers. This function allows us to do things like attach event handlers, such as a `'mouseover'` event to trigger a visual affordance or a tooltip.
176 | 
177 | ![The Leaflet API Reference for Path options](lesson-images/path-options.png)   
178 | **Figure 12.** The Leaflet API Reference for Path options.
179 | 
180 | These functions are all called when the `options` object used when creating the Leaflet GeoJson layergroup (note in the API Reference that there are other methods to update the layers after creation.
181 | 
182 | 
183 | ## Step 03: Drawing the point data as styled circles
184 | 
185 | Within the `drawMap` function body, comment out the line that is drawing our data to the map as markers, and uncomment the line that is passing the `options` object to the L.geoJson() method.
186 | 
187 | ```javascript
188 | //  L.geoJson(data).addTo(map);
189 | 
190 |     L.geoJson(data, options).addTo(map);
191 | ```
192 | 
193 | Save these changes and refresh the browser. You'll now see our markers have been replaced by circleMarkers, styled with the options we're currently designating with the `style` function.
194 | 
195 | ![The Leaflet circleMarkers](lesson-images/styled-circles.png)   
196 | **Figure 13.** The Leaflet circleMarkers.
197 | 
198 | Let's first fiddle with some of the code within two of the functions being called, the `pointToLayer` function and the `style` function.
199 | 
200 | Within the `pointToLayer` function we're returning a Leaflet circleMarker object, and passing one styling rule within this, setting the radius to 10 pixels.
201 | 
202 | Try changing this numeric value to something like 40. Saving and refreshing reveal how we can programmatically adjust the radius size of the circles.
203 | 
204 | ```javascript
205 | function pointToLayer(feature, latlng) {
206 | 
207 | //    console.log(feature.properties);
208 | 
209 |     return L.circleMarker(latlng, {
210 | 
211 |         radius: 40
212 | 
213 |     });
214 | 
215 | }
216 | ```
217 | 
218 | ![The Leaflet circleMarkers styled with a radius of 40](lesson-images/radius-40.png)   
219 | **Figure 14.** The Leaflet circleMarkers styled with a radius of 40.
220 | 
221 | Next, try adjusting some of the style options within the `style` function. For instance, we could make the stroke width larger (the `weight` property) and change its color value from `'whitesmoke'` to a hexadecimal value:
222 | 
223 | 
224 | ```javascript
225 | function style(feature) {
226 | 
227 |     var styleOptions = {
228 | 
229 |         fillColor: '#bd4932',
230 |         fillOpacity: 1,
231 |         color: "#105b63",
232 |         weight: 6
233 | 
234 |     }
235 | 
236 |     return styleOptions;
237 | 
238 | }
239 | 
240 | ```
241 | 
242 | The result is again apparent in on the map.
243 | 
244 | ![The Leaflet circleMarkers styled with different stroke color and heavier stroke weight](lesson-images/styled-circles2.png)   
245 | **Figure 15.** The Leaflet circleMarkers styled with different stroke color and heavier stroke weight.
246 | 
247 | Now that we have a basic handle on styling let's return to the radius of our circles and figure out how to not size them uniformly, but given a quantitative value.
248 | 
249 | 
250 | ## Step 04: Scaling the circles to a known quantity
251 | 
252 | If we think back to our data, we remember that we encoded the amount of greenhouse gasses emitted by different facilities with an attribute of `GHG_QUANTITY` (we can also look in our GeoJSON data file for reference).
253 | 
254 | Within the `pointToLayer` function, first, uncomment the line logging `feature.properties` to the Console.
255 | 
256 | 
257 | ```javascript
258 | function pointToLayer(feature, latlng) {
259 | 
260 |     console.log(feature.properties);
261 | 
262 |     return L.circleMarker(latlng, {
263 | 
264 |         radius: 40
265 | 
266 |     });
267 | 
268 | }
269 | ```
270 | 
271 | Saving and refreshing in the browser allow you to see each feature's properties logged to the Console.
272 | 
273 | ![Inspecting the properites of each feature logged to Console](lesson-images/log-feature-properties.gif)   
274 | **Figure 16.** Inspecting the properites of each feature logged to Console.
275 | 
276 | This last example is a really important aspect of web map development. Within the script, we need to know how to access the data (in this case the `properties` of each GeoJSON point feature) associated or bound to features.
277 | 
278 | Modify the statement to include the `GHG_QUANTITY` property name: `console.log(feature.properties.GHG_QUANTITY);`.
279 | 
280 | We can now see how we can access the specific value we're interested in as the code loops through all the features in our data.
281 | 
282 | ![Logging a specific properity value of each feature to Console](lesson-images/ghg-quantities-logged.png)   
283 | **Figure 17.** Logging a specific properity value of each feature to Console.
284 | 
285 | Now we can simply replace the hard-coded value for our radius with the code accessing the value of each.
286 | 
287 | ```javascript
288 | function pointToLayer(feature, latlng) {
289 | 
290 | 
291 |     return L.circleMarker(latlng, {
292 | 
293 |         radius: feature.properties.GHG_QUANTITY
294 | 
295 |     });
296 | 
297 | }
298 | ```
299 | 
300 | However, there are currently two problems with this. 1.) These numbers are quite large, and our circles are drawn with diameters exceeding the extent of the map. 2.) We've used the data values to directly scale the symbol's radii. However, when making visual comparisons as it is currently coded, our eye-brain systems don't compare the radii; rather we compare the areas of these circles. Thus, a plant producing 20 times more emissions than another doesn't appear to have 20 times the area here, but an area much higher than that (20 squared times pi!).
301 | 
302 | To make the map work with human brains and eyes, we calculate radii to create these areas and use these to draw the circles.
303 | 
304 | To implement this in our code, instead of directly assigning a value to the radius of each CircleMarker, let's assign the return value of a function, which will scale and calculate the radius for us. This is as simple as calling a function and passing our data value to it: `radius: feature.properties.GHG_QUANTITY`. 
305 | 
306 | Below in the script we see I've already written a function to do the circle area calculation and scaling. This function accepts a value we send to it, does the calculation, and returns a value. Note that you may need to fiddle with the value of the `scaleFactor` a bit given a particular dataset.
307 | 
308 | ```javascript
309 | function calcRadius(val) {
310 | 
311 |     var radius = Math.sqrt(val / Math.PI),
312 |         scaleFactor = .04;
313 | 
314 |     return radius * scaleFactor;
315 | 
316 | }
317 | ```
318 | 
319 | Once we made these modifications to our script, we should have a proportionally-scaled set of circles representing the relative magnitudes of gas emissions.
320 | 
321 | There may be one little problem, however, often associated with proportional symbol maps. The large circles may overlap or completely cover smaller circles. Fortunately, we can add make two modifications to our current script to help solve this problem.
322 | 
323 | First, we can apply a sorting method to our data before we draw our circles, sorting the features with the largest quantities of greenhouse gas first and therefore drawing them first. The smaller ones will be stacked on top. Add this code within the function loading our data, before we call the function `drawMap`:
324 | 
325 | ```javascript
326 | data.features.sort(function (a, b) {
327 |     return b.properties.GHG_QUANTITY - a.properties.GHG_QUANTITY
328 | });
329 | ```
330 | 
331 | Next, adjust the `fillOpacity` property of the circles (within our `style` function) to something like `.6`.
332 | 
333 | ## Step 05: Adding user interaction affordances and retrieving information
334 | 
335 | Next, we want to add some interactivity for the user. To do so, we'll make use of the `onEachFeature` function, which like the others will iterate over all our data features when they are drawn to the map. We want to achieve two things: 1.) give the user a visual affordance that they've hovered over the symbol, and 2.) allow the user to retrieve some specific info about the plant, displayed in a Leaflet tooltip.
336 | 
337 | Within the `onEachFeature` function, we're attaching what's known as an "event listener" to each layer. We're actually attaching two listeners, one for when the user mouses over a layer and another for when the user mouses off a layer. First, uncomment the statement within the function. Like the statement above, this will log to console the feature properties of the target layer when the user mouses over it.
338 | 
339 | ```javascript
340 | function onEachFeature(feature, layer) {
341 | 
342 |     layer.on({
343 |         mouseover: function () {
344 | 
345 |             console.log(feature.properties);
346 | 
347 |         },
348 |         mouseout: function () {
349 | 
350 | 
351 |         }
352 |     })  
353 | 
354 | }
355 | ```
356 | 
357 | We can inspect the output in the developer toolbar.
358 | 
359 | ![Logging a specific properity value of each feature to Console on hover](lesson-images/log-features-hover.gif)   
360 | **Figure 18.** Logging a specific properity value of each feature to Console on hover.
361 | 
362 | Next, modify the code within the `onEachFeature` function to change the stroke color of the target layer. Note that we have access to both the original GeoJSON feature data here, as well as the vector layer being created. We want to modify the style rules of the vector layer.
363 | 
364 | ```javascript
365 | layer.on({
366 |     mouseover: function () {
367 | 
368 |         layer.setStyle({
369 |             color: "yellow",
370 |             weight: 3
371 |         });
372 | 
373 |     },
374 |     mouseout: function () {
375 | 
376 |         layer.setStyle({
377 |             color: "#105b63",
378 |             weight: 1
379 |         });
380 |     }
381 | });
382 | ```
383 | 
384 | This code is using a Leaflet `setStyle` method to change the values of two style properties, the stroke color, and width. On the mouseout event, we want to set them back to their original look.
385 | 
386 | ![Offering the user a visual affordance on mouseover](lesson-images/hover-affordance.gif)   
387 | **Figure 19.** Offering the user a visual affordance on mouseover.
388 | 
389 | Finally, we want the user to retrieve some specific information about each feature on mouseover. While we could build a more sophisticated info window or display this information in a side panel, for now, a simple tooltip will work for us.
390 | 
391 | Add the following code to the `onEachFeature` function:
392 | 
393 | ```javascript
394 | function onEachFeature(feature, layer) {
395 | 
396 |     layer.on({
397 |         mouseover: function () {
398 | 
399 |             layer.setStyle({
400 |                 color: "yellow",
401 |                 weight: 3
402 |             });
403 | 
404 |         },
405 |         mouseout: function () {
406 | 
407 |             layer.setStyle({
408 |                 color: "#105b63",
409 |                 weight: 1
410 |             });
411 |         }
412 |     });
413 | 
414 | 
415 |     var toolTipInfo = "Name: " + feature.properties.NAME + "<br>" +
416 |         "C02: " + feature.properties.GHG_QUANTITY.toLocaleString() + "metric tons"
417 | 
418 | 
419 |     layer.bindTooltip(toolTipInfo, { sticky: true });
420 | 
421 | }
422 | ```
423 | 
424 | Note that we're again accessing specific information from each feature using the `feature.properties` syntax. We're also using a convenient JavaScript method `toLocaleString()` to format the number nicely with commas in the tooltip.
425 | 
426 | ## Making the map whole
427 | 
428 | So far we've coded a fairly slick web map. But it's currently lacking some crucical elements that make the map more useful for the user. For one, maps should have a catchy if not informative title. You can also display supplementary information in a sidebar or overlay. Crucially, however, most thematic maps need a legend. We want the user to easily know what they're looking at, without having to deduce it or poke around too much.
429 | 
430 | Drawing dynamic legends in web mapping can be tricky business, however. One solution is to use HTML and CSS to draw the basic form of the legend, and then let the JavaScript update and position the legend elements appropriately. See the example in this [bi-variate map of facilities emissions](https://github.com/rgdonohue/carbon-emissions-co/blob/master/app/index.html).
431 | 
432 | 


--------------------------------------------------------------------------------
/module-02/lesson-images/csv-export-options.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/csv-export-options.png


--------------------------------------------------------------------------------
/module-02/lesson-images/csv-geojson-io.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/csv-geojson-io.png


--------------------------------------------------------------------------------
/module-02/lesson-images/error-404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/error-404.png


--------------------------------------------------------------------------------
/module-02/lesson-images/exploring-data-structure.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/exploring-data-structure.gif


--------------------------------------------------------------------------------
/module-02/lesson-images/file-cleaned.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/file-cleaned.png


--------------------------------------------------------------------------------
/module-02/lesson-images/file-openoffice.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/file-openoffice.png


--------------------------------------------------------------------------------
/module-02/lesson-images/flight.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/flight.png


--------------------------------------------------------------------------------
/module-02/lesson-images/ghg-quantities-logged.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/ghg-quantities-logged.png


--------------------------------------------------------------------------------
/module-02/lesson-images/hover-affordance.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/hover-affordance.gif


--------------------------------------------------------------------------------
/module-02/lesson-images/leaflet-geojson-api.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/leaflet-geojson-api.png


--------------------------------------------------------------------------------
/module-02/lesson-images/log-feature-properties.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/log-feature-properties.gif


--------------------------------------------------------------------------------
/module-02/lesson-images/log-features-hover.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/log-features-hover.gif


--------------------------------------------------------------------------------
/module-02/lesson-images/path-options.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/path-options.png


--------------------------------------------------------------------------------
/module-02/lesson-images/points-as-markers.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/points-as-markers.png


--------------------------------------------------------------------------------
/module-02/lesson-images/radius-40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/radius-40.png


--------------------------------------------------------------------------------
/module-02/lesson-images/save-csv.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/save-csv.png


--------------------------------------------------------------------------------
/module-02/lesson-images/stack-trace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/stack-trace.png


--------------------------------------------------------------------------------
/module-02/lesson-images/styled-circles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/styled-circles.png


--------------------------------------------------------------------------------
/module-02/lesson-images/styled-circles2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rgdonohue/web-mapping-short-course/0ce336497e89518e8690df7f227dbe4b50951195/module-02/lesson-images/styled-circles2.png


--------------------------------------------------------------------------------
/module-03/app/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset=utf-8 />
  6 |     <title>US County Health Rankings</title>
  7 |     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  8 | 
  9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css" />
 10 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
 11 |     <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
 12 |     <link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
 13 | 
 14 |     <style>
 15 |         body {
 16 |             margin: 0;
 17 |             padding: 0;
 18 |             background: "whitesmoke";
 19 |             font-family: "Noto Sans", sans-serif;
 20 |             color: #3d3d3d;
 21 |         }
 22 | 
 23 |         h1 {
 24 |             position: absolute;
 25 |             margin-top: 0;
 26 |             top: 10px;
 27 |             left: 15px;
 28 |             font-size: 1.8em;
 29 |             font-family: "Lora", serif;
 30 |             letter-spacing: .04em;
 31 |             padding: 10px 15px;
 32 |             background: rgba(256, 256, 256, .8);
 33 |             border: 1px solid grey;
 34 |             border-radius: 3px;
 35 |             z-index: 800;
 36 |         }
 37 | 
 38 |         h2 {
 39 |             font-family: "Lora", serif;
 40 |             letter-spacing: .04em;
 41 |             font-size: 1.2em;
 42 |             line-height: 1.5em;
 43 |         }
 44 | 
 45 |         h3 {
 46 |             font-family: "Noto Sans", sans-serif;
 47 |             font-size: 1.1em;
 48 |             font-weight: normal;
 49 |             text-align: center;
 50 |             margin: 0;
 51 |         }
 52 | 
 53 |         #map {
 54 |             position: absolute;
 55 |             top: 0;
 56 |             bottom: 0;
 57 |             width: 100%;
 58 |         }
 59 | 
 60 |         p {
 61 |             font-size: .9em;
 62 |             line-height: 1.5em;
 63 |         }
 64 | 
 65 |         a {
 66 |             color: #005daa;
 67 |             text-decoration: none;
 68 |         }
 69 | 
 70 |         a:hover {
 71 |             text-decoration: underline;
 72 |         }
 73 | 
 74 |         .legend {
 75 |             padding: 6px 8px;
 76 |             font-size: 1em;
 77 |             padding: 10px 15px;
 78 |             background: rgba(256, 256, 256, .8);
 79 |             border: 1px solid grey;
 80 |             border-radius: 3px;
 81 |         }
 82 | 
 83 |         .legend h3 {
 84 |             font-size: 1.4em;
 85 |             font-weight: bold;
 86 |             line-height: 1em;
 87 |             color: #3d3d3d;
 88 |             margin: 10px 10px 10px auto;
 89 |             text-align: left;
 90 |         }
 91 | 
 92 |         .legend span {
 93 |             width: 30px;
 94 |             height: 20px;
 95 |             float: left;
 96 |             margin: 0 10px 4px 0;
 97 |         }
 98 | 
 99 |         .legend label {
100 |             font-size: 1.1em;
101 |         }
102 | 
103 |         .legend label:after {
104 |             content: '';
105 |             display: block;
106 |             clear: both;
107 |         }
108 | 
109 |         .ui {
110 |             padding: 6px 8px;
111 |             font-size: 1em;
112 |             padding: 10px 15px;
113 |             background: rgba(256, 256, 256, .8);
114 |             border: 1px solid grey;
115 |             border-radius: 3px;
116 |         }
117 | 
118 |         .ui label {
119 |             margin: 6px 15px;
120 |         }
121 |     </style>
122 | </head>
123 | 
124 | <body>
125 | 
126 |     <h1>US County Health Rankings</h1>
127 | 
128 |     <div id='map'></div>
129 | 
130 |     <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
131 |     <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
132 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
133 |     <script src="https://unpkg.com/simple-statistics@2.2.0/dist/simple-statistics.min.js"></script>
134 |     <script>
135 |         var options = {
136 |             center: [38, -97],
137 |             zoom: 4,
138 |             zoomSnap: .4,
139 |             zoomControl: false
140 |         }
141 | 
142 |         var map = L.map('map', options);
143 | 
144 |         L.control.zoom({
145 |             position: 'topright'
146 |         }).addTo(map);
147 | 
148 |         var tiles = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
149 |             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
150 |             subdomains: 'abcd',
151 |             maxZoom: 19
152 |         }).addTo(map);
153 | 
154 |         var countiesLayer,
155 |             currentAttribute = 'Frequent_Physical_Distress';
156 | 
157 |         $.getJSON('data/counties.json', function(counties) {
158 | 
159 |             Papa.parse('data/2016CountyHealthRankings.csv', {
160 |                 download: true,
161 |                 header: true,
162 |                 complete: function(data) {
163 | 
164 |                     // console.log(counties, data);
165 | 
166 |                     processData(counties, data);
167 |                 }
168 |             });
169 |         });
170 | 
171 |         function processData(counties, data) {
172 | 
173 | 
174 |             for (var county in counties.features) {
175 | 
176 |                 var props = counties.features[county].properties;
177 | 
178 |                 for (var d in data.data) {
179 | 
180 |                     if (props.GEOID === data.data[d].FIPS) {
181 | 
182 |                         counties.features[county].properties = data.data[d];
183 |                         break;
184 |                     }
185 |                 }
186 | 
187 |             }
188 | 
189 |             console.log(counties)
190 | 
191 | 
192 |             drawLegend();
193 |             makeMap(counties);
194 |             buildUI(data);
195 | 
196 |         }
197 | 
198 |         function makeMap(counties) {
199 | 
200 | 
201 |             countiesLayer = L.geoJson(counties, {
202 | 
203 |                 style: function(feature) {
204 |                     return {
205 |                         color: "whitesmoke",
206 |                         weight: '.4',
207 |                         fillColor: "blue",
208 |                         fillOpacity: 1
209 |                     }
210 |                 },
211 |                 onEachFeature: function(feature, layer) {
212 | 
213 |                     // layer.bindTooltip(currentAttribute + ": " + feature.properties[currentAttribute]);
214 | 
215 |                 }
216 | 
217 | 
218 |             }).addTo(map);
219 | 
220 |             styleMap();
221 | 
222 |         }
223 | 
224 |         function styleMap() {
225 | 
226 |             var breaks = getClassBreaks();
227 | 
228 |             countiesLayer.eachLayer(function(layer) {
229 | 
230 |                 //  console.log(layer.feature);
231 | 
232 |                 var props = layer.feature.properties;
233 | 
234 |                 // console.log(props)
235 | 
236 |                 layer.setStyle({
237 |                     // fillColor: 'yellow',
238 |                     // fillColor: getColor(props[currentAttribute])
239 |                     fillColor: getColor(props[currentAttribute], breaks)
240 |                 })
241 | 
242 |                 layer.bindTooltip(currentAttribute + ": " + layer.feature.properties[currentAttribute] + "%");
243 | 
244 |             });
245 | 
246 |             updateLegend(breaks);
247 | 
248 |         }
249 | 
250 |         function getClassBreaks() {
251 | 
252 |             var values = [];
253 | 
254 |             countiesLayer.eachLayer(function(layer) {
255 | 
256 |                 var value = layer.feature.properties[currentAttribute];
257 | 
258 |                 if (value) {
259 |                     values.push(Number(value));
260 |                 }
261 | 
262 |             });
263 | 
264 |             console.log(values);
265 | 
266 |             var breaks = ss.equalIntervalBreaks(values, 5);
267 | 
268 |             console.log(breaks);
269 | 
270 |             return breaks;
271 | 
272 |         }
273 | 
274 |         // function getColor(val) {
275 |         //
276 |         //     if (!val) return 'grey' // no data
277 |         //
278 |         //     if (val <= 20) {
279 |         //         return '#fef0d9';
280 |         //     } else if (val <= 40) {
281 |         //         return '#fdcc8a';
282 |         //     } else if (val <= 60) {
283 |         //         return '#fc8d59';
284 |         //     } else if (val <= 80) {
285 |         //         return '#e34a33';
286 |         //     } else if (val <= 100) {
287 |         //         return '#b30000';
288 |         //     }
289 |         // }
290 | 
291 |         function getColor(val, breaks) {
292 | 
293 |             if (!val) return 'grey' // no data
294 | 
295 |             if (val <= breaks[1]) {
296 |                 return '#fef0d9';
297 |             } else if (val <= breaks[2]) {
298 |                 return '#fdcc8a';
299 |             } else if (val <= breaks[3]) {
300 |                 return '#fc8d59';
301 |             } else if (val <= breaks[4]) {
302 |                 return '#e34a33';
303 |             } else if (val <= breaks[5]) {
304 |                 return '#b30000';
305 |             }
306 |         }
307 | 
308 |         function drawLegend() {
309 | 
310 |             var legend = L.control({
311 |                 position: 'bottomleft'
312 |             });
313 | 
314 |             legend.onAdd = function(map) {
315 | 
316 |                 return L.DomUtil.create('div', 'legend');
317 | 
318 |             };
319 | 
320 |             legend.addTo(map);
321 | 
322 |         }
323 | 
324 |         function updateLegend(breaks) {
325 | 
326 |             // select the legend, add a title
327 |             var legend = $('.legend').html("<h3>Percent<br>" + currentAttribute + "</h3>");
328 | 
329 |             // loop through the Array of classification break values
330 |             for (var i = 1; i <= breaks.length - 1; i++) {
331 | 
332 |                 // get a color for the current class break
333 |                 var color = getColor(breaks[i], breaks);
334 | 
335 |                 $('.legend').append(
336 |                     '<span style="background:' + color + '"></span> ' +
337 |                     '<label>' + (breaks[i - 1]).toLocaleString() + ' &mdash; ' +
338 |                     (breaks[i]).toLocaleString() + ' %</label>');
339 |             }
340 |         }
341 | 
342 |         function buildUI(data) {
343 | 
344 |             var uiControl = L.control({
345 |                 position: 'bottomright'
346 |             });
347 | 
348 |             uiControl.onAdd = function(map) {
349 | 
350 |                 var div = L.DomUtil.create('form', 'ui');
351 | 
352 |                 return div;
353 | 
354 |             };
355 | 
356 |             uiControl.addTo(map);
357 | 
358 |             var ui = $('.ui');
359 | 
360 |             var props = data.data[0];
361 | 
362 |             for (var prop in props) {
363 |                 if (prop != 'FIPS' && prop != "State" && prop != "County") {
364 |                     ui.append("<input type='radio' name='attribute' id='" + prop + "' value='" + prop + "'>");
365 |                     ui.append("<label for='" + prop + "'>" + prop + "</label><br>");
366 |                 }
367 |             }
368 | 
369 |             $('#Frequent_Physical_Distress').attr('checked', 'checked');
370 | 
371 |             ui.on('change', function(e) {
372 | 
373 |                 currentAttribute = e.target.value;
374 | 
375 |                 styleMap();
376 |             })
377 |         }
378 |     </script>
379 | 
380 | </body>
381 | 
382 | </html>
383 | 


--------------------------------------------------------------------------------
/module-03/lesson-03.md:
--------------------------------------------------------------------------------
 1 | # Lesson 02. Thematic Web Mapping: Choropleth Mapping
 2 | 
 3 | This lesson guides you through a process of creating a choropleth map. Choropleth maps are another common type of thematic map that use enumeration units such as states or counties to show how much of a particular phenomenon each contains by proportional shading. These are among the most familiar of thematic map types to the general public, especially for making election maps.
 4 | 
 5 | Choropleth maps are best used to map continuous areal (or area-based) phenomena and represent a statistical surface for enumeration units (i.e., polygons). The map symbology applies a sequence of shaded values (often using color schemes) to symbolize the density or ratio for each enumeration unit on the map. The intensity of the color indicates how much of some phenomenon is within a given area (greater intensity or darker color generally means more of something).
 6 | 
 7 | To make a choropleth map, we need to establish two more pieces of information. First, we need to know the entire range of the particular data value we're encoding. Second, we need to determine the precise values with which we will classify that data range into discrete chunks. We could do some of this analysis prior to creating our GeoJSON file, either through analyzing the data tables within a conventional spreadsheet application such as OpenOffice Calc or Microsoft Excel. We could also run scripts written in JavaScript, Ruby, Python, or R to process our data and create attribute values that are normalized. However, for this module, we are going to do this analysis and determine the class breaks client-side at runtime using JavaScript.
 8 | 
 9 | ## Step 01: get the data
10 | 
11 | Note that within the *module-03/app/data/* directory there is a CSV file named *2016CountyHealthRankings.csv*. This data was downloaded from [County Health Rankings & Roadmaps](http://www.countyhealthrankings.org/rankings/data) and edited to preserve some of the data attribute columns already normalized as a rate or percentage. Within the data we see there are US county FIPS codes, but there is no geometry data included.
12 | 
13 | To get good polygons useful for mapping, go to[Cartographic Boundary Shapefiles - Counties] (https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html) and download the [cb_2015_us_county_20m.zip](cb_2015_us_county_20m.zip) Shapefile. Open these Shapefiles and explore on your machine.
14 | 
15 | Next, drag or upload the entire zipped shapefile package into the web interface of [MapShaper](http://mapshaper.org/). You can explore various options for simplifying the data and editing the data tables within this tool. For now, simply download your file as a GeoJSON file and save within your *data/* directory. Save it as *counties.json*.
16 | 
17 | ## Step 02: load the data
18 | 
19 | We can again use JQuery's getJSON method to load the data asynchronously. Load the data and verify that is correct.
20 | 
21 | ```JavaScript
22 | $.getJSON('data/counties.json', function(counties) {
23 |     console.log(counties)
24 | }
25 | ```
26 | 
27 | To be finished ....
28 | 


--------------------------------------------------------------------------------
/module-04/README.md:
--------------------------------------------------------------------------------
  1 | # Extending Web Maps with Plugins and Web Hosting
  2 | 
  3 | This module introduces you to some additional plugins for extending your thematic web maps. In particular, we'll investigate a couple techniques for dealing with too many point features on a web map.
  4 | 
  5 | Plugins extend an existing library, adding additional functionality to it. There are many designed for use with the [Leaflet library](http://leafletjs.com/plugins.html) and [Mapbox.js](https://www.mapbox.com/blog/extend-your-maps-mapboxjs-plugins/) (which wraps Leaflet.js itself and extends it)
  6 | 
  7 | Plugins explored in this module:
  8 | 
  9 | * [Leafet.markercluster GitHub repo](https://github.com/Leaflet/Leaflet.markercluster)
 10 | * [Turf.js](http://turfjs.org/)
 11 | * [Leaflet Omnivore](https://github.com/mapbox/leaflet-omnivore)
 12 | * [Chroma.js](https://github.com/gka/chroma.js/)
 13 | 
 14 | 
 15 | ## Leaflet.markercluster.js
 16 | 
 17 | Begin by editing the *index.html* file in the *marker-cluster/* directory. Take a moment to examine the *stations.geojson* data file within the *marker-cluster/data* directory. The data are locations of 13,000 electric vehicle refueling stations, drawn from [NREL's Developer Network API](https://developer.nrel.gov/).
 18 | 
 19 | First, let's begin by loading our data into our script using the now familiar technique of JQuery's *getJSON()* method:
 20 | 
 21 | ```javascript
 22 | // request geojson data
 23 | $.getJSON('data/stations.geojson', function(data) {
 24 | 
 25 |     console.log(data)
 26 | 
 27 | });
 28 | ```
 29 | 
 30 | We note that the data are loaded as 13,000 Point Features.
 31 | 
 32 | We could try drawing these as markers to the map (go ahead!), but we'll likely run into some rendering issues. There are too many points!
 33 | 
 34 | ```javascript
 35 | // request geojson data
 36 | $.getJSON('data/stations.geojson', function(data) {
 37 | 
 38 |     makeMap(data);
 39 | 
 40 | });
 41 | 
 42 | function makeMap(data) {
 43 | 
 44 |   // too many markers!
 45 |   L.geoJson(data).addTo(map);
 46 | 
 47 | }
 48 | ```
 49 | 
 50 | To solve this problem we'll use a technique known as "marker clustering." Go to the [Leafet.markercluster GitHub repo](https://github.com/Leaflet/Leaflet.markercluster) and examine the documentation.
 51 | 
 52 | We'll want to grab two CSS libraries and one JS lib. Copy the URLs to the CDNs for the CSS and place in the head of your document (along with Leaflet's CSS):
 53 | 
 54 | 
 55 | ```javascript
 56 | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
 57 | <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" />
 58 | <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" />
 59 | ```
 60 | 
 61 | Then do the same for the JavaScript (adding this to the existing JQuery and Leaflet JS) toward the bottom of our script.
 62 | 
 63 | ```javascript
 64 | <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 65 | <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
 66 | <script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>
 67 | ```
 68 | 
 69 | Now that we have the markercluster CSS and JS available to us, we'll first create an empty *markerClusterGroup*. If we dig into the API docs we'll discover that this object extends Leaflet's L.geoJson object.
 70 | 
 71 | ```javascript
 72 | // create new empty markers cluster group
 73 | var markers = L.markerClusterGroup();
 74 | ```
 75 | 
 76 | The markercluster requires Leaflet L.marker's added to it. So, we need to iterate through our data, create a new L.marker object for each Point feature, and add it to this new L.markerClusterGroup we've created.
 77 | 
 78 | To do so we can use the native JavaScript method *forEach()*:
 79 | 
 80 | ```javascript
 81 |     // for all our data features
 82 |     data.features.forEach(function(d, i) {
 83 | 
 84 |         // create a new Leaflet marker
 85 |         var marker = L.marker(L.latLng(d.geometry.coordinates[1], d.geometry.coordinates[0]));
 86 | 
 87 |         // add the marker to the markerClusterGroup
 88 |         markers.addLayer(marker);
 89 |     });
 90 | 
 91 |     // add the makerclusters to the map
 92 |     markers.addTo(map);
 93 | });
 94 | ```
 95 | 
 96 | Once this is complete, we simply add our L.markerClusterGroup to the map and wa-lah! We have a functioning markercluser map!
 97 | 
 98 | ```javascript
 99 | // add the makerclusters to the map
100 | markers.addTo(map);
101 | ```
102 | 
103 | We can include some additional information about each feature if we'd like, displayed in Leaflet's tooltip. Before we add each marker to the *markers* object, we can include code accessing each feature's properties:
104 | 
105 | ```javascript
106 | // create a new Leaflet marker
107 | var marker = L.marker(L.latLng(d.geometry.coordinates[1], d.geometry.coordinates[0]));
108 | 
109 | // create info for tooltip
110 | var props = d.properties;
111 | var popupTemplate =
112 |     '<b>station name</b>: ' + props.station_name + '<br>' +
113 |     '<b>city</b>: ' + props.city + '<br>' +
114 |     '<b>hours</b>: ' + props.access_days_time + '<br>' +
115 |     '<b>phone</b>: ' + props.station_phone + '<br>' +
116 |     '<b>address</b>: ' + props.street_address
117 | 
118 | // bind the tooltip to the marker
119 | marker.bindTooltip(popupTemplate);
120 | 
121 | // add the marker to the markerClusterGroup
122 | markers.addLayer(marker);
123 | ```
124 | 
125 | Throw a title on the map and ship it! Nice work.
126 | 
127 | ## Turf.js
128 | 
129 | Next we're going to explore a really fun library (not necessarily a plugin extention particular to Leaflet, but integrates nicely): [Turf.js](http://turfjs.org/). Think of Turf as GIS operations and geoprocessing in JavaScript.
130 | 
131 | Begin with the index in the *turf-hex/* directory.
132 | 
133 | Once again, we have some point data we'd like to map. This time, it's some traffic accident data in Denver from 2016, drawn from the [Denver Open Data Catalog](https://www.denvergov.org/opendata). The data are stored as CSV and contain 21,620 lat/lon values for accident locations. Obviously once again, these are too many to draw to the Leaflet map as markers.
134 | 
135 | As usual, our first step is to get the data into the application. For this, we'll make use of a plugin called [Leaflet Omnivore](https://github.com/mapbox/leaflet-omnivore). Take some time to explore the documentation and examples.
136 | 
137 | We'll need to load it into our script (there is no CSS for this plugin).
138 | 
139 | ```javascript
140 | <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
141 | ```
142 | 
143 | Onmivore will load our CSV data asynchronously and convert it directly into a Leaflet GeoJson object.
144 | 
145 | ```javascript
146 | // async request to load point data and convert to Leaflet GeoJSON layer
147 | var accidents = omnivore.csv('data/accidents.csv')
148 |   .on('ready', function(d) {
149 | 
150 |       // when data is loaded
151 |       makeMap(data)
152 |   })
153 |   .on('error', function(e) {
154 |       console.log('oh no something terrible has happened!')
155 |   })
156 | 
157 | function makeMap(accidents) {
158 |     // we have access to the Leaflet GeoJson here
159 |     console.log(accidents);
160 | }
161 | ```
162 | 
163 | Instead of using a marker cluster here, let's consider how we'd make a hexbin map. To do so, we'll use Turf.js. Load Turf.js into our script along with the other JS libs.
164 | 
165 | 
166 | ```javascript
167 | <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
168 | <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
169 | <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
170 | <script src='https://npmcdn.com/@turf/turf@3.5.1/turf.min.js'></script>
171 | ```
172 | 
173 | Looking at [Turf's API docs for hexGrid](http://turfjs.org/docs/#hexgrid) a bounding box to surround our point features.
174 | 
175 | ```javascript
176 | // get the sw/ne bounds of the accidents data layer
177 | var bounds = accidents.getBounds();
178 | 
179 | // convert bounds to string rep of bounding coords
180 | var bbox = bounds.toBBoxString();
181 | 
182 | // convert string to array of numbers for bounding coords
183 | var bbox = bbox.split(',').map(function(coord) {
184 |     return Number(coord)
185 | });
186 | 
187 | // designate dimension of cell width
188 | var cellWidth = 1;
189 | 
190 | // designate units for cell width calculation
191 | var units = 'miles';
192 | 
193 | // create a featurecollection of hex polygons
194 | var hexgrid = turf.hexGrid(bbox, cellWidth, units);
195 | ```
196 | 
197 | Next, we want to use [Turf's inside method](http://turfjs.org/docs/#inside) (which is essentially a point in polygon process). We need our point features converted back into GeoJSON for this (not Leaflet's GeoJson object).
198 | 
199 | ```javascript
200 | // convert the accidents Leaflet layer to GeoJSON
201 | var points = accidents.toGeoJSON();
202 | ```
203 | 
204 | Next we'll use regular JavaScript to loop through all of our polygon features and then all the point features to perform the "inside" test. If a point falls within a polygon, we'll add a count of 1 to that polygon's properties. When we're done, we should have a total count of all points within each polygon stored within its properties.
205 | 
206 | ```javascript
207 | // loop through all the hex polygons
208 | hexgrid.features.map(function(hex) {
209 | 
210 |     // create a property name for each of 'count'
211 |     if(!hex.properties.count) hex.properties.count = 0;
212 | 
213 |     // loop through all the points
214 |     points.features.map(function(point) {
215 | 
216 |       // if a point is inside a hex polygon
217 |       if(turf.inside(point,hex)) {
218 | 
219 |           // add one to the prop count
220 |           hex.properties.count++
221 |       }
222 | 
223 |     });
224 | });
225 | ```
226 | 
227 | Test the result with a `console.log()` statement.
228 | 
229 | Now we want to actually draw our Leaflet GeoJson object to the map using these data. While we're add it, we can style the hexbins minimally, filter out the ones that have no accident counts within them, and keep add the value of each to an array for later thematic drawing purposes:
230 | 
231 | ```javascript
232 | // empty array to store all our counts
233 | var counts = [];
234 | 
235 | // create a Leaflet GeoJson layer with newly
236 | // processed polygon data
237 | var hexLayer = L.geoJson(hexgrid, {
238 |     style: function(feature) {
239 |       return {
240 |         color: "white",
241 |         weight: .2,
242 |         fillOpacity: 1
243 |       }
244 |     },
245 |     filter: function(feature) {
246 |       // if the poly has data
247 |       if(feature.properties.count > 0) {
248 |         // push that count to the array
249 |         counts.push(feature.properties.count);
250 | 
251 |         // retain that feature for representation
252 |         return feature;
253 |       }
254 |     }
255 | 
256 | }).addTo(map);
257 | ```
258 | 
259 | Super! Now we want to make this a thematic map using a similar technique as Module 03's choropleth map. Rather than using Simple Statistics this time to calculate breaks, we'll use another awesome JS library to determine our breaks and create a color generator based on our data. First, load the [Chroma.js](https://github.com/gka/chroma.js/) into the browser.
260 | 
261 | ```javascript
262 | <script src='https://npmcdn.com/@turf/turf@3.5.1/turf.min.js'></script>
263 | <script src="https://unpkg.com/simple-statistics@2.2.0/dist/simple-statistics.min.js"></script>
264 | <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
265 | ```
266 | 
267 | We can use the `counts` Array we've built of all the counts totals to determine the breaks, using the fancy ckmeans method (5 classes here for now).
268 | 
269 | Then we'll build a color generator function we can then use to color our hexbins.
270 | 
271 | ```javascript
272 | // use chroma.js to determine class breaks
273 | // using ckmeans method
274 | var breaks = chroma.limits(counts, 'k', 5);
275 | 
276 | // create color generator
277 | var colorize = chroma.scale(chroma.brewer.OrRd).domain(breaks).mode('lab');
278 | ```
279 | 
280 | Next, let's iterate through our existing `hexLayer` (i.e., the Leaflet GeoJson we've drawn to the map as SVG) and update the fill color of each using our color generator.
281 | 
282 | ```javascript
283 | // iterate through the layers
284 | hexLayer.eachLayer(function(layer) {
285 | 
286 |   // color each one according to count #
287 |   layer.setStyle({
288 |     fillColor : colorize(layer.feature.properties.count)
289 |   });
290 | 
291 |   // bind tooltip to retrieve specific info
292 |   layer.bindTooltip(String(layer.feature.properties.count))
293 | 
294 | });
295 | ```
296 | 
297 | Awesome! We can borrow some code from Module 03 as well to toss a legend on the map. We'll call the function to draw a legend at the bottom of our `drawMap()` function body and pass both the `breaks` and the `colorize` function as arguments.
298 | 
299 | Then, we can write a drawLegend function:
300 | 
301 | ```javascript
302 | function drawLegend(breaks, colorize) {
303 |     // create Leaflet control for legend
304 |     var legend = L.control({
305 |         position: 'bottomleft'
306 |     });
307 | 
308 |     // create a div for legend and add it to the map
309 |     legend.onAdd = function(map) {
310 | 
311 |         return L.DomUtil.create('div', 'legend');
312 | 
313 |     };
314 | 
315 |     legend.addTo(map);
316 | 
317 |     // select the legend, add a title
318 |     var legend = $('.legend').html("<h3>Number of Traffic Accidents in 2016</h3>");
319 | 
320 |     // loop through the Array of classification break values
321 |     for (var i = 1; i < breaks.length; i++) {
322 | 
323 |         // get a color for the current class break
324 |         var color = colorize(breaks[i]);
325 | 
326 |         // build legend using breaks and color values
327 |         $('.legend').append(
328 |             '<span style="background:' + color + '"></span> ' +
329 |             '<label>' + (breaks[i - 1]).toLocaleString() + ' &mdash; ' +
330 |             (breaks[i]).toLocaleString() + ' </label>');
331 |     }
332 | 
333 | }
334 | ```
335 | 
336 | Whoomp there it is. Oh wait, probably need to add some CSS rules to the head of the document:
337 | 
338 | ```css
339 | .legend {
340 |     padding: 6px 8px;
341 |     font-size: 1em;
342 |     padding: 10px 15px;
343 |     background: rgba(256, 256, 256, .8);
344 |     border: 1px solid grey;
345 |     border-radius: 3px;
346 |     max-width: 220px;
347 | }
348 | .legend h3 {
349 |     font-size: 1.4em;
350 |     font-weight: bold;
351 |     line-height: 1em;
352 |     color: #3d3d3d;
353 |     margin: 10px 10px 10px auto;
354 |     text-align: left;
355 | }
356 | 
357 | .legend span {
358 |     width: 30px;
359 |     height: 20px;
360 |     float: left;
361 |     margin: 0 10px 4px 0;
362 | }
363 | 
364 | .legend label {
365 |     font-size: 1.1em;
366 | }
367 | 
368 | .legend label:after {
369 |     content: '';
370 |     display: block;
371 |     clear: both;
372 | }
373 | ```
374 | 
375 | 
376 | ## Serving your web map on GitHub
377 | 
378 | Web hosting is easy on GitHub. Follow these instructions: [GitHub Pages](https://pages.github.com/)
379 | 


--------------------------------------------------------------------------------
/module-04/marker-cluster/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset=utf-8 />
 6 |     <title></title>
 7 |     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
 8 | 
 9 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
10 |     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.css" />
11 |     <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.0/dist/MarkerCluster.Default.css" />
12 | 
13 | 
14 |     <style>
15 |         body {
16 |             margin: 0;
17 |             padding: 0;
18 |             font-family: sans-serif;
19 |         }
20 | 
21 |         #map {
22 |             position: absolute;
23 |             top: 0;
24 |             bottom: 0;
25 |             width: 100%;
26 |         }
27 |     </style>
28 | </head>
29 | 
30 | <body>
31 | 
32 |     <div id='map'></div>
33 | 
34 |     <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
35 |     <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
36 |     <script src="https://unpkg.com/leaflet.markercluster@1.0.0/dist/leaflet.markercluster.js"></script>
37 | 
38 | 
39 |     <script>
40 |         // instantiate our map
41 |         var map = L.map("map", {
42 |             center: [38, -110],
43 |             zoom: 4
44 |         });
45 | 
46 |         // load tiles
47 |         L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
48 |             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
49 |             subdomains: 'abcd',
50 |             maxZoom: 19
51 |         }).addTo(map);
52 | 
53 |         // request geojson data
54 |         $.getJSON('data/stations.geojson', function(data) {
55 | 
56 |             makeMap(data);
57 |         });
58 | 
59 |         function makeMap(data) {
60 | 
61 |           // L.geoJson(data).addTo(map);
62 | 
63 |           // create new empty markers cluster group
64 |           var markers = L.markerClusterGroup();
65 | 
66 |           // for all our data features
67 |           data.features.forEach(function(d, i) {
68 | 
69 |             // create a new Leaflet marker
70 |             var marker = L.marker(L.latLng(d.geometry.coordinates[1], d.geometry.coordinates[0]));
71 | 
72 |             var props = d.properties;
73 |             var popupTemplate =
74 |                 '<b>station name</b>: ' + props.station_name + '<br>' +
75 |                 '<b>city</b>: ' + props.city + '<br>' +
76 |                 '<b>hours</b>: ' + props.access_days_time + '<br>' +
77 |                 '<b>phone</b>: ' + props.station_phone + '<br>' +
78 |                 '<b>address</b>: ' + props.street_address
79 | 
80 |              // bind the tooltip to the marker
81 |              marker.bindTooltip(popupTemplate);
82 | 
83 |              // add the marker to the markerClusterGroup
84 |              markers.addLayer(marker);
85 |          });
86 | 
87 |           // add the makerclusters to the map
88 |           markers.addTo(map);
89 | 
90 |         }
91 | 
92 | 
93 |     </script>
94 | 
95 | </body>
96 | 
97 | </html>
98 | 


--------------------------------------------------------------------------------
/module-04/turf-hex/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | 
  4 | <head>
  5 |     <meta charset=utf-8 />
  6 |     <title></title>
  7 |     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  8 | 
  9 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
 10 |     <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
 11 | 
 12 |     <style>
 13 |         body {
 14 |             margin: 0;
 15 |             padding: 0;
 16 |             font-family: "Noto Sans", sans-serif;
 17 |         }
 18 |         #map {
 19 |             position: absolute;
 20 |             top: 0;
 21 |             bottom: 0;
 22 |             width: 100%;
 23 |         }
 24 |         h1 {
 25 |             position: absolute;
 26 |             margin-top: 0;
 27 |             top: 10px;
 28 |             left: 15px;
 29 |             font-size: 1.8em;
 30 |             font-family: "Lora", serif;
 31 |             letter-spacing: .04em;
 32 |             padding: 10px 15px;
 33 |             background: rgba(256, 256, 256, .8);
 34 |             border: 1px solid grey;
 35 |             border-radius: 3px;
 36 |             z-index: 800;
 37 |         }
 38 |         .legend {
 39 |             padding: 6px 8px;
 40 |             font-size: 1em;
 41 |             padding: 10px 15px;
 42 |             background: rgba(256, 256, 256, .8);
 43 |             border: 1px solid grey;
 44 |             border-radius: 3px;
 45 |             max-width: 220px;
 46 |         }
 47 |         .legend h3 {
 48 |             font-size: 1.4em;
 49 |             font-weight: bold;
 50 |             line-height: 1em;
 51 |             color: #3d3d3d;
 52 |             margin: 10px 10px 10px auto;
 53 |             text-align: left;
 54 |         }
 55 | 
 56 |         .legend span {
 57 |             width: 30px;
 58 |             height: 20px;
 59 |             float: left;
 60 |             margin: 0 10px 4px 0;
 61 |         }
 62 | 
 63 |         .legend label {
 64 |             font-size: 1.1em;
 65 |         }
 66 | 
 67 |         .legend label:after {
 68 |             content: '';
 69 |             display: block;
 70 |             clear: both;
 71 |         }
 72 | 
 73 |     </style>
 74 | </head>
 75 | 
 76 | <body>
 77 | 
 78 |     <div id='map'></div>
 79 | 
 80 |     <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 81 |     <script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
 82 |     <script src="https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js"></script>
 83 |     <script src='https://npmcdn.com/@turf/turf@3.5.1/turf.min.js'></script>
 84 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
 85 | 
 86 |     <script>
 87 |         // instantiate our map
 88 |         var map = L.map("map", {
 89 |             center: [39.7246, -105.0189],
 90 |             zoom: 10
 91 |         });
 92 | 
 93 |         // load some tiles
 94 |         L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', {
 95 |             attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
 96 |             subdomains: 'abcd',
 97 |             maxZoom: 19
 98 |         }).addTo(map);
 99 | 
100 | 
101 |         // async request to load point data and convert to Leaflet GeoJSON layer
102 |         var accidents = omnivore.csv('data/accidents.csv')
103 |           .on('ready', function(data) {
104 | 
105 |               // when data is loaded
106 |               makeMap(accidents)
107 |           })
108 |           .on('error', function(e) {
109 |               console.log('oh no something terrible has happened!')
110 |           })
111 | 
112 |         function makeMap(accidents) {
113 |             // we have access to the Leaflet GeoJson here
114 |             console.log(accidents);
115 | 
116 |             // get the sw/ne bounds of the accidents data layer
117 |             var bounds = accidents.getBounds();
118 |             console.log(bounds);
119 | 
120 |             // convert bounds to string rep of bounding coords
121 |             var bbox = bounds.toBBoxString();
122 |             console.log(bbox);
123 |             // convert string to array of numbers for bounding coords
124 |             var bbox = bbox.split(',').map(function(coord) {
125 |                 return Number(coord)
126 |             });
127 |             console.log(bbox);
128 |             // designate dimension of cell width
129 |             var cellWidth = 1;
130 | 
131 |             // designate units for cell width calculation
132 |             var units = 'miles';
133 | 
134 |             // create a featurecollection of hex polygons
135 |             var hexgrid = turf.hexGrid(bbox, cellWidth, units);
136 | 
137 |             console.log(hexgrid);
138 | 
139 |             var points = accidents.toGeoJSON();
140 | 
141 |             // loop through all the hex polygons
142 |             hexgrid.features.map(function(hex) {
143 | 
144 |                 // create a property name for each of 'count'
145 |                 if(!hex.properties.count) hex.properties.count = 0;
146 | 
147 |                 // loop through all the points
148 |                 points.features.map(function(point) {
149 | 
150 |                   // if a point is inside a hex polygon
151 |                   if(turf.inside(point,hex)) {
152 | 
153 |                       // add one to the prop count
154 |                       hex.properties.count++
155 |                   }
156 | 
157 |                 });
158 |             });
159 | 
160 |             // empty array to store all our counts
161 |             var counts = [];
162 | 
163 |             // create a Leaflet GeoJson layer with newly
164 |             // processed polygon data
165 |             var hexLayer = L.geoJson(hexgrid, {
166 |                 style: function(feature) {
167 |                   return {
168 |                     color: "white",
169 |                     weight: .2,
170 |                     fillOpacity: 1
171 |                   }
172 |                 },
173 |                 filter: function(feature) {
174 |                   // if the poly has data
175 |                   if(feature.properties.count > 0) {
176 |                     // push that count to the array
177 |                     counts.push(feature.properties.count);
178 | 
179 |                     // retain that feature for representation
180 |                     return feature;
181 |                   }
182 |                 }
183 | 
184 |             }).addTo(map);
185 | 
186 |             // use chroma.js to determine class breaks
187 |             // using ckmeans method
188 |             var breaks = chroma.limits(counts, 'k', 5);
189 | 
190 |             // create color generator
191 |             var colorize = chroma.scale(chroma.brewer.OrRd).domain(breaks).mode('lab');
192 | 
193 |             // iterate through the layers
194 |             hexLayer.eachLayer(function(layer) {
195 | 
196 |               // color each one according to count #
197 |               layer.setStyle({
198 |                 fillColor : colorize(layer.feature.properties.count)
199 |               });
200 | 
201 |               // bind tooltip to retrieve specific info
202 |               layer.bindTooltip(String(layer.feature.properties.count))
203 | 
204 |             });
205 | 
206 |               drawLegend(breaks, colorize);
207 | 
208 |         } // end makeMap
209 | 
210 |         function drawLegend(breaks, colorize) {
211 |               // create Leaflet control for legend
212 |               var legend = L.control({
213 |                   position: 'bottomleft'
214 |               });
215 | 
216 |               // create a div for legend and add it to the map
217 |               legend.onAdd = function(map) {
218 | 
219 |                   return L.DomUtil.create('div', 'legend');
220 | 
221 |               };
222 | 
223 |               legend.addTo(map);
224 | 
225 |               // select the legend, add a title
226 |               var legend = $('.legend').html("<h3>Number of Traffic Accidents in 2016</h3>");
227 | 
228 |               // loop through the Array of classification break values
229 |               for (var i = 1; i < breaks.length; i++) {
230 | 
231 |                   // get a color for the current class break
232 |                   var color = colorize(breaks[i]);
233 | 
234 |                   // build legend using breaks and color values
235 |                   $('.legend').append(
236 |                       '<span style="background:' + color + '"></span> ' +
237 |                       '<label>' + (breaks[i - 1]).toLocaleString() + ' &mdash; ' +
238 |                       (breaks[i]).toLocaleString() + ' </label>');
239 |               }
240 | 
241 |           }
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 |     </script>
249 | 
250 | </body>
251 | 
252 | </html>
253 | 


--------------------------------------------------------------------------------