Background Basil and Sadhana like how you created your earthquake map with two different maps and the earthquake overlay. Now, Basil and Sadhana would like to see the earthquake data in relation to...

Background

Basil and Sadhana like how you created your earthquake map with two different maps and the earthquake overlay. Now, Basil and Sadhana would like to see the earthquake data in relation to the tectonic plates’ location on the earth, and they would like to see all the earthquakes with a magnitude greater than 4.5 on the map, and they would like to see the data on a third map.

What You're Creating

This new assignment consists of three technical analysis deliverables. You will submit the following:

• Deliverable 1: Add Tectonic Plate Data


• Deliverable 2: Add Major Earthquake Data


• Deliverable 3: Add an Additional Map

Files

Use the following links to download the Challenge starter code.

Download the tectonic plate starter code.(Links to an external site.)

Download the major earthquake chart starter code.(Links to an external site.)

Deliverable 1: Add Tectonic Plate Data (35 points)

Deliverable 1 Instructions

Using your knowledge of JavaScript, Leaflet.js, and geoJSON data, you’ll add tectonic plate data usingd3.json(), add the data using thegeoJSON()layer, set the tectonic plateLineStringdata to stand out on the map, and add the tectonic plate data to the overlay object with the earthquake data.

REWIND

For this deliverable, you’ve already done the following in this module:

• 
  
  Lesson 13.5.5:
  Map GeoJSON LineStrings


• 
  
  Lesson 13.6.1:
  Add data to a Leaflet map


• 
  
  Lesson 13.6.2:
  Style data on a Leaflet map


• 
  
  Lesson 13.6.4:
  Add data as overlay


• 
  
  Lesson 13.6.4:
  Add data to a LayerGroup class

Follow the instructions below and the numbered comments in the starter code to complete Deliverable 1.

1. 
   

   Create a new folder on your Mapping_Earthquakes repository and name it "Earthquake_Challenge."

   
   


2. 
   

   Copy the folders and files from your Earthquakes_past7days branch and add them to the Earthquake_Challenge folder. The folder should have this structure:

   
   
   
   
   • Earthquake_Challenge folder
     
     
     • 
       index.html
       
     
     
     • static
       
       
       • css
         
         
         • 
           style.css
           
         
         
         
         
       
       
       • js
         
         
         • 
           config.js
           
         
         
         • 
           logic.js
           
         
         
         
         
       
       
       
       
     
     
     
     
   
   
   
   


3. 
   

   Download thetectonic_plate_starter_logic.jsfile, add it to your js folder, and rename itchallenge_logic.js.

   
   


4. 
   

   In Step 1, add a second layer group variable for the tectonic plate data.

   
   


5. 
   

   In Step 2, add a reference to the tectonic plate data to the overlay object.

   
   


6. 
   

   In Step 3, usingd3.json()callback method, make a call to the tectonic plate data using theGeoJSON/PB2002_boundaries.jsondata from thisGitHub repository(Links to an external site.)for the tectonic plate data. You’ll need to log into GitHub to access the GeoJSON data.

   
   


7. 
   

   Inside thed3.json()method do the following:

   
   
   
   
   • Pass the tectonic plate data to thegeoJSON()layer.
   
   
   • Style the lines with a color and weight that will make it stand out on all maps.
   
   
   • Add the tectonic layer group variable you created in Step 1 to the map, i.e.,.addTo(tectonicPlates)and close thegeoJSON()layer.
   
   
   • Next, add the tectonic layer group variable to the map, i.e,tectonicPlates.addTo(map).
   
   
   • Finally, close thed3.json()callback.
   
   
   
   


8. 
   

   Start your Python server and launch theindex.htmlfile and confirm that your map with the earthquake and tectonic plate data is similar to the following image.

   
   

Your final map should look similar to the following image:

Deliverable 1 Requirements

You will earn a perfect score for Deliverable 1 by completing all requirements below:

• The tectonic plate data is added as a second layer group(10 pt)
  


• The tectonic plate data is added to the overlay object(10 pt)
  


• Thed3.json()callback is working and does the following:(10 pt)
  
  
  
  • The tectonic plate data is passed to thegeoJSON()layer
  
  
  • ThegeoJSON()layer adds color and width to the tectonic plate lines
  
  
  • The tectonic layer group variable is added to the map
  
  
  
  


• The earthquake data and tectonic plate data displayed on the map when the page loads(5 pt)
  

Deliverable 2: Add Major Earthquake Data (50 points)

Deliverable 2 Instructions

Using your knowledge of JavaScript, Leaflet.js, and geoJSON data, you’ll add major earthquake data to the map usingd3.json(). You'll also add color and set the radius of the circle markers based on the magnitude of earthquake, and add a popup marker for each earthquake that displays the magnitude and location of the earthquake using the GeoJSON layer,geoJSON().

REWIND

For this deliverable, you’ve already done the following in this module:

• 
  
  Lesson 13.5.3:
  Map multiple GeoJSON Points


• 
  
  Lesson 13.6.1:
  Add earthquake data to a Leaflet map


• 
  
  Lesson 13.6.2:
  Style data on a Leaflet map


• 
  
  Lesson 13.6.4:
  Add data as overlay


• 
  
  Lesson 13.6.4:
  Add data to a LayerGroup class

Download themajor_eq_starter_logic.jsfile and add it to your js folder. Look over the starter code and use it as a template to modify yourchallenge_logic.jsfile that you used to add the tectonic plate data in Deliverable 1.

Follow the instructions below that refer to the steps in themajor_eq_starter_logic.jsfile and make the changes to yourchallenge_logic.jsfile to complete Deliverable 2.

1. In Step 1, add a third layer group variable for the major earthquake data.


2. In Step 2, add a reference to the major earthquake data to the overlay object.


3. In Step 3, use thed3.json()callback method to make a call to the major earthquake data from the GeoJSON Summary Feed forM4.5+ Earthquakes(Links to an external site.)for the Past 7 Days.


4. In Step 4, use the same parameters in thestyleInfo()function that will make a call to thegetColor()andgetRadius()functions.


5. In Step 5, change thegetColor()function to use only three colors for the following magnitudes; magnitude less than 5, a magnitude greater than 5, and a magnitude greater than 6.


6. In Step 6, use the same parameters from the preceding step in thegetRadius()function.


7. In Step 7, pass the major earthquake data into the GeoJSON layer and do the following with thegeoJSON()layer:
   
   
   • Turn each feature into a circleMarker on the map
   
   
   • Style each circle withstyleInfo()function
   
   
   • Create a popup for the circle to display the magnitude and location of the earthquake
   
   
   • Add the major earthquake layer group variable you created in Step 1 to the map, i.e.,.addTo(majorEQ)and then close thegeoJSON()layer.
   
   
   
   


8. Then, add the major earthquake layer group variable to the map, i.e,majorEQ.addTo(map), and then close thed3.json()callback.


9. Start your Python server and launch theindex.htmlfile and confirm that your map with the two earthquake data sets and tectonic plate data is similar to the following image.

Deliverable 2 Requirements

You will earn a perfect score for Deliverable 2 by completing all requirements below:

• The major earthquake data is added as a third layer group(10 pt)
  


• The major earthquake data is added to the overlay object(10 pt)
  


• Thed3.json()callback is working and does the following:(25 pt)
  
  
  
  • Sets the color and diameter of each earthquake.
  
  
  • The major earthquake data is passed to thegeoJSON()layer.
  
  
  • The geoJSON() layer creates a circle for each major earthquake, and adds a popup for each circle to display the magnitude and location of the earthquake
  
  
  • The major earthquake layer group variable is added to the map
  
  
  
  


• All the earthquake data and tectonic plate data are displayed on the map when the page loads and the datasets can be toggled on or off(5 pt)
  

Deliverable 3: Add an Additional Map (15 points)

Deliverable 3 Instructions

Using your knowledge of JavaScript and Leaflet.js add a third map style to your earthquake map.

REWIND

For this deliverable, you’ve already done the following in this module:

• 
  
  Lesson 13.2.4:
  Add a map as a tile layer


• 
  
  Lesson 13.5.4:
  Add multiple maps and a base layer

Rubric

Follow the instructions to complete Deliverable 3.

1. Using the options from theMapbox styles(Links to an external site.), add a third map style as a tile layer object to thechallenge_logic.jsfile.


2. Add the map variable to the base layer object.


3. Start your Python server and launch theindex.htmlfile and confirm that your map is similar to the following image, where there are three map styles, and displays the two earthquake data sets and the tectonic plate data.

Deliverable 3 Requirements

You will earn a perfect score for Deliverable 3 by completing all requirements below:

• A third map tile layer is created(5 pt)
  


• The third map is added to the overlay object(5 pt)
  


• All the earthquake data and tectonic plate data are displayed on the all maps of the webpage(5 pt)
  

Submission

Once you’re ready to submit, make sure to check your work against the rubric to ensure you are meeting the requirements for this Challenge one final time. It’s easy to overlook items when you’re in the zone!

As a reminder, the deliverables for this Challenge are as follows:

• Deliverable 1: Add Tectonic Plate Data


• Deliverable 2: Add Major Earthquake Data


• Deliverable 3: Add an Additional Map

Upload the Earthquake_Challenge folder with the following folders and files to your Mapping_Earthquakes GitHub repository:

1. 
   

   The Earthquake_Challenge folder

   
   
   
   
   • 
     index.html
     
   
   
   • static
     
     
     • css
       
       
       • 
         style.css
         
       
       
       
       
     
     
     • js
       
       
       • 
         challenge_logic.js
         
       
       
       
       
     
     
     
     
   
   
   
   


2. 
   

   A README.md that describes the purpose of the repository. Although there is no graded written analysis for this challenge, it is encouraged and good practice to add a brief description of your project.

   
   

IMPORTANT

Do not include yourconfig.jsfile in your submission.

To submit your challenge assignment in Canvas, click Submit, then provide the URL of your Mapping_Earthquakes GitHub repository for grading. Comments are disabled for graded submissions in BootCampSpot. If you have questions about your feedback, please notify your instructional staff or the Student Success Manager. If you would like to resubmit your work for an improved grade, you can use theRe-Submit Assignmentbutton to upload new links. You may resubmit up to 3 times for a total of 4 submissions.

IMPORTANT

Once you receive feedback on your Challenge, make any suggested updates or adjustments to your work. Then, add this week’s Challenge to your professional portfolio.

NOTE

You are allowed to miss up to two Challenge assignments and still earn your certificate. If you complete all Challenge assignments, your lowest two grades will be dropped. If you wish to skip this assignment, click Next, and move on to the next Module.

Rubric

Module-13 RubricModule-13 Rubric

Criteria	Ratings	Pts
This criterion is linked to a learning outcomeDeliverable 1: Add Tectonic Plate Data	35to >33.0PtsDemonstrating Proficiency✓The tectonic plate data is added to the layer group. ✓The tectonic plate data is added to the overlay object. ✓The tectonic plate data is added to the map, and the fault lines are styled. ✓The earthquake data and tectonic plate data are displayed when the page loads. 33to >31.0PtsApproaching Proficiency✓The tectonic plate data is added to the layer group. ✓The tectonic plate data IS NOT added to the overlay object. ✓The tectonic plate data is added to the map, and the fault lines are styled. ✓The earthquake data and tectonic plate data are displayed when the page loads. 31to >29.0PtsDeveloping Proficiency✓The tectonic plate data is added to the layer group. ✓The tectonic plate data IS NOT added to the overlay object. ✓Code is written in the d3.json() callback, and the tectonic plate data is added to the map but not styled. ✓The earthquake data and tectonic plate data are displayed when the page loads. 29to >0.0PtsEmerging✓The tectonic plate data is added to the layer group. ✓The tectonic plate data is added to the overlay object. ✓Code is written in the d3.json() callback, but the tectonic plate data is not added to the map. ✓Only the earthquake data is displayed when the page loads. 0PtsNo Marks	35pts
This criterion is linked to a learning outcomeDeliverable 2: Add Major Earthquake Data	50to >44.0PtsDemonstrating Proficiency✓The major earthquake data is added as a third layer group. ✓The tectonic plate data is added to the overlay object. ✓The major earthquake data is added to the map and styled, but there are no popup markers. ✓ALL the earthquake data and tectonic plate data are displayed when the page loads. 44to >40.0PtsApproaching Proficiency✓The major earthquake data is added as a third layer group. ✓The major earthquake data IS NOT added to the overlay object. ✓The major earthquake data is added to the map and styled, but there are no popup markers. ✓ALL the earthquake data and tectonic plate data are displayed when the page loads. 40to >35.0PtsDeveloping Proficiency✓The major earthquake data is added as a third layer group. ✓The major earthquake data IS NOT added to the overlay object. ✓The major earthquake data is added to the map, but the data is not styled and there are no popup markers. ✓ALL the earthquake data and tectonic plate data are displayed when the page loads. 35to >0.0PtsEmerging✓The major earthquake data is added as a third layer group. ✓The major earthquake data is added to the overlay object. ✓Code is written in the d3.json() callback, but the major earthquake data is not added to the map. ✓Only the earthquake and tectonic plate data is displayed when the page loads. 0PtsNo Marks	50pts
This criterion is linked to a learning outcomeDeliverable 3: Add an Additional Map	15to >13.0PtsDemonstrating Proficiency✓A third map tile layer is created. ✓The third map is added to the overlay object. ✓ALL the earthquake data and tectonic plate data are displayed on all maps on the webpage. 13to >9.0PtsApproaching Proficiency✓A third map tile layer is created. ✓The third map is added to the overlay object. ✓ALL the earthquake data and tectonic plate data are displayed, but the third map is not available. 9to >6.0PtsDeveloping Proficiency✓A third map tile layer is created. ✓Only the earthquake and tectonic plate data is displayed when the page loads. 6to >0.0PtsEmerging✓A third map tile layer is created, but it is not working. ✓Only the earthquake and tectonic plate data is displayed when the page loads. 0PtsNo Marks	15pts
Total points:100

13.6.6: Merge the Earthquake Branch with the main Branch" style="float: left;">Previous
Module 13 Career Connection" style="float: right;">Next© 2020 - 2022 Trilogy Education Services, a 2U, Inc. brand. All Rights Reserved.