Skip to content

Latest commit

 

History

History
92 lines (70 loc) · 4.5 KB

README.md

File metadata and controls

92 lines (70 loc) · 4.5 KB

Mapping_Earthquakes

An interactive earthquake map with JavaScript and Leaflet

Note: Final documents are stored in Earthquake_Mapping folder/directory seen above. Please find the explanation of the files below. Code needs an API Key from Mapbox in order to run. The API key is not included here but safely secured in config files. Other files (i.e. Earthquakes_past7days, Simple_Map and json files) are included because of the detailed procedure and work with with Mapbox, Leaflet and GitHub branching practice.

Project Overview

Purpose

For this project I am creating an interactive map that shows the latest earthquake activity around the world. Maps allow us to explore, understand and make decisions about our world. Providing data-driven storytelling on disasters around the world and building insightful data visualization with interactive features is a valuable addition to the knowledge and awareness of planet Earth.

The map of earthquakes around the world contains:

  • Toggle on/off button for fault lines of tectonic plates.
  • Toggle on/off button for earthquakes of the past 7 days.
  • Toggle on/off button for major earthquakes of magnitude above 4.5.
  • Three different map styles:
    • Street view.
    • Satellite view.
    • Dark view.
  • A popup marker with information about the location and magnitude of the earthquake.
  • The diameter and the color of a marker reflect the strength of the earthquake (darker color with larger diameter represent earthquakes with a higher magnitude).
  • A color coded legend with the information/context for the map colors in lower right corner.

The Toggle Menu/Legend in the upper right corner looks like this:

The menu with on/off toggle buttons

When selected, these are the results and choices displayed:

An interactive world map of earthquakes - Streets View Style

An interactive world map of earthquakes - Satellite View Style

An interactive world map of earthquakes - Dark View Style

An interactive world map of earthquakes Pop up information displayed

Background

Creating interactive maps is supported by specifically developed tools. For this project I used the following:

  • Mapbox API, an open source mapping platform for custom designed maps.

  • Leaflet, a JavaScript library, designed to build the web mapping applications.

  • GeoJson files that are specifically design to host geographical information. GeoJson files are the industry standard for representing simple geographical features, such as points, linestrings and polygons and non-spatial attributes, such as magnitude of the earthquake, hurricane strength, hail size, elevation, etc.

Resources

Data Source:

Software:

  • Mapbox API static/js/challenge_logic.js
  • VS Code and Chrome Developer Tools

Languages:

  • JavaScript,
  • index.html (HTML) and static/css/style.css (CSS)

Libraries:

  • D3, Leaflet