The objective of this project is to use Leaflet javascript api library to display earthquakes data on a map.
Link to this library in the head section of index.html
<link rel="stylesheet" href="" ... />
The earhquake data is formatted as geoJSON and comes from the following source:
current week earthquake data
current week major earthquake data with magnitude > 4.5

Use the following Mapbox Static Tiles API from mapplot to renders the base maps:
Street map
Satellite map
Dark map

Use the Leaflet tileLayer API to set up our base maps

let overlays = {"Earthquakes": allEarthquakes, "Tectonic Plates":tectonicPlates, "Major Earthquakes":majorEQ};

The layers are all specifed in the layer control and we display it on the map with addTo method L.control.layers(baseMaps, overlays).addTo(map);
To display data in the map we use the d3 javascript library, this is specified in the <head> section of `index.html’

<script src=""></script>

Display earthquake data in “Earthquakes” layer

Use the json method of d3 api to read earthquake data asynchronously

d3.json("").then(function(data) {
    // define various functions to the style and size markers are displayed
    function styleInfo(){...}; function getColor(){...}; function getRadius(){...};
    //use the Leaflet method to display in the desired overlay<br>
    `L.geoJson(data, {....}).addTo(allEarthquakes);`

Add “tectonic plates” and “major earthquakes” datasets by refactoring the snippet above

Display legend

To display legend we use the Leaflet control method to create a legend control object
specify where the legend should be displayed let legend = L.control({position: "bottomright"}); define the content of the legend legend.onAdd in a function that returns an html <div> element legend.onAdd = function() {

Finally add the legend to the map