Utilize GeoJSON, Leaflet, JavaScript and HTML to create an interactive multiple-layer worldmap, displaying earthquake and tectonic plates data.
To illustrate the severity of the earthquakes in relation to the tectonic plates, make API calls to the earthquake and tectonic plate data using d3.json(), and then add the data as an overlay to the map using the L.geoJSON() layer. Add three map styles. All map styles must be added to the base layer so that the selection option show up on the map to allow the user to change which layers are visible.
Data source
Software
- Mapbox API, Leaflet, JavaScript, GeoJSON, d3.js, CSS, HTML
The final code and files are located in Earthquake_Challenge folder.
1. JavaScript
- Create street map layer according to Mapbox API documentation, and use map
street-v11. Set max zoom to 18. Follow the same method, create satelliteStreets layer using mapsatellite-streets-v11and create light layer using maplight-v10. - Set
baseMapsvariable and include all three map layers. This will allow the user to select the map style of his/her choice. - Create two new overlay variables for
earthquakesandtectonicplates. Include these two into the variableoverlays. User can choose whether to display the data or not. - Create the map object with center coordinate, zoom level and default layer as street.
- Pass our map layers into our layers control and add the layers control to the map.
L.control.layers(baseMaps, overlays).addTo(map);. - Get the GeoJSON api call urls (for earthquakes and tetonic plates) and assign an variable to each.
- Create the earthquake overlay
- Retrieve data from GeoJSON
- For each coordinate point with earthquake record, make a circle marker
- Style the circle marker
- The circle radius is proportionate with the earthquake magnitude
- The color of the circle indicates the earthquake magnitude
- For each marker, add a popup showing magnitude and location information
- Add this overlay to the map object
- Create a legent to show the relationship between circle color and magnitude
- Create the tectonic plates overlay
- Retrieve data from GeoJSON
- Style the polyline to make it standout in both dark and light map layer
- Add the tectonic plates overlay to the map object
2. HTML
- In the
<head />section- Make sure in link the leaflet stylesheet
- Add the d3.js and our own CSS style sheet
- In the
<body />section- Create a
<div />placeholder to link to the map. Assign id asmapidso our javascript file can refer to this placeholder - Add the leaflet javascript link
- Link to our javascript file
- Create a
3. CSS
- Style the
mapid <div />with 100% height and width - Style the legend with some padding and color specifications