Homework #5: Mapping Earthquakes
Due: 10-09
Description
In this assignment we will be using Leaflet to display the same USGS data from Homework #4. You should use the same service as before to access the data via the CORS-enabled proxy.
Assignment
Create a single Web page that, on demand, will:
- fetch the latest earthquakes in the last hour using the XMLHttpRequest object,
- display the resulting data on a map using markers,
- each marker must display the essential metadata (time and magnitude),
- and the map must be centered on the largest earthquake displayed.
You must clear the map markers each time you fetch new data.
You must use the Leaflet map library with the OpenStreetMap tiles.
You may use other libraries as you see fit.
Data
Note: this is the same as Homework #4.
All the various USGS pages are proxied for the complete path at
http://io.milowski.com/usgs/
. Thus, since the feed for the last hour is
http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson the
proxied version with CORS is http://io.milowski.com/usgs/earthquakes/feed/v1.0/summary/all_hour.geojson.
GeoJSON is fairly flat and the
features
property will give you a list of the features objects.
Keep in mind that the data you recieve must be parsed as JSON. You can do this by:
JSON.parse(request.responseText);
Finally, earthquakes happen all the time but if somehow you get an empty feature
collection, you can always switch to a different time period by changing the URI. The
last hour
feed was chosen simply because it contains limited amounts of data.
The data should all have the same properties.
Optional Enhancements
- Create a secondary navigation (e.g. the list of earthquakes) that centers the map on the correct marker for the selected earthquake.
- Add a circle for each earthquake whose diameter is relative to the magnitude of the earthquake.
- Color-code the circles according to magnitude.
- Link from the marker description to the USGS summary page for the earthquake.
What to Turn In
You must turn in your HTML document and all supporting JavaScript, CSS, and other resources necessary such that it runs for others.