The geoquakes-lite from alexpsu

geoquakes-lite's Introduction

GeoQuakes

In this lab we will be using live data from the USGS (United States Geological Survey), specifically a data set showing significant earthquakes (M4.0 or greater) from the past week.

Our goal is to:

List information about each quake.
Display a Google Map with a pin at the epicenter of each quake.

Part 1. Rendering Data

Take a moment to familiarize yourself with the dataset by opening it in your browser: http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_week.geojson.

What is the structure of the data?
- How many earthquakes does it list?
- How would you grab the first earthquake?
  - How would you grab it's title?
  - How would you grab it's geological coordinates:
    - latitude?
    - longitude?
  - When did it happen?
    - How many hours ago is that?

Now, take a moment to familiarize yourself with the layout in index.html.

Your short term goal is to render each title to the "info" section of the page (see the commented example in your HTML)
- Psuedo Code:
  - grab the data from the USGS endpoint.
  - loop over it
  - add each title to the page

Part 2. Add pins to your map

Once you're able to access earthquake data and have it populate to the info section of hte page, your next goal is to drop a single pin on San Francisco. This is a sanity check.

Next, can you add only the first earthquake to the map?
Can you add pins for all the earthquakes to the map?

Stretch:

Extend your template:

Calculate how long ago the quake occured and add it to the page. E.g. "28 hours ago".
Parse the title to only include the location, E.g. Instead of "M 4.2 - 1km ESE of Fontana, California", it should just say "Fontana, California"
Create a visual indicator of the magnitude of a quake. For instance, maybe a 4.0 is indicated by a "yellow" dot, a 5.0 by an "orange" dot, and anything larger is "red".

Recommend Projects