USGS Earthquake feed browser

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        * { box-sizing: border-box; }
        html, body, #container { height: 100%; }
        body { 
            margin:0; 
            padding:0; 
            font-family: helvetica, arial, sans-serif;
        }
        #container .feed-heading {
            height: 60px;
            padding: 1em 0 0 1em;
            margin: 0;
        }
        #map { 
            width:70%; 
            float: right;
            height: 100%;
            position: fixed;
            right: 0;
            top: 0;
        }
        #feedColumn {
            width: 30%;
            float: left;
            padding: 1em;
        }

#feedSelector {
            top: 1em;
            left: 1em;
            background-color: #fff;
        }
        .child-prop, .feed-name, .feed-date {
            text-transform: capitalize;
        }
        .feed-date {
            width: 50%;
            border-bottom: 1px solid #999;
            margin: 2em 0em 1em 0em;
            padding-bottom: 0.2em;
            font-weight: bold;
        }
        .feed-name {
            padding: 0.5em;
            margin: 0 0.5em 0 0;
            background-color: #777;
            color: #fff;
            border-radius: 0.3em;
            cursor: pointer;
            transition: all linear 0.2s;
            border: none;
            outline: none;
            font-size: 1em;
        }
        .feed-name:hover {
            background-color: #555;
        }
        .child-prop {
            display: inline-block;
            margin: 0 0 0.5em 0;
        }
    </style>
</head>
<body>

<div id='container'>
    <h3 class="feed-heading">USGS Earthquakes</h3>
    <div id="feedColumn">
        <p>Explore the <a href="https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php">USGS earthquake feed</a> using Mapbox GL JS. Zoom in to click on individual quakes.</p>
        <div id="feedSelector"></div>
    </div>
    <div id='map'></div>
</div>

function makeChildProps(obj, currentProp) {
    var childProps = '';

for (var prop in quakeFeeds[currentProp]) {
        var el = "<div class='child-prop'><button class='feed-name' data-feedurl='" + quakeFeeds[currentProp][prop] + "'>" + prop + "</button></div>";
        childProps += el;
    }
    
    return childProps;
}

for (var prop in quakeFeeds) {
    if (!quakeFeeds.hasOwnProperty(prop)) {
        continue;
    }

$('#feedSelector').append("<div class='feed-date'>" + prop + "</div>" + makeChildProps(quakeFeeds, prop));
    console.log(makeChildProps(quakeFeeds, prop));
}

$('.feed-name').click(function(e){
    var source = map.getSource('earthquakes');
    $.ajax({
        url: $(e.target).data('feedurl'),
        complete: function(data) {
            source.setData(data.responseJSON);
            console.log(data.responseJSON);
        }
    });
});

mapboxgl.accessToken = 'pk.eyJ1IjoiZGFuc3dpY2siLCJhIjoieUZiWmwtVSJ9.0cPQywdbPVmvHiHJ6NwdXA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/dark-v8',
    center: [-103.59179687498357, 40.66995747013945],
    zoom: 3,
});

var usgsEarthquakes = $.ajax({
    url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_month.geojson"
}).done(function(data){

map.on('load', function(){

// Add a new source from our GeoJSON data and set the
        // 'cluster' option to true.
        map.addSource("earthquakes", {
            type: "geojson",
            data: data,
            cluster: true,
            clusterMaxZoom: 14, // Max zoom to cluster points on
            clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
        });

// Use the earthquakes source to create five layers:
        // One for non-clustered markers, three for each cluster category,
        // and one for cluster labels.
        map.addLayer({
            "id": "non-cluster-markers",
            "type": "circle",
            "source": "earthquakes",
            "paint": {
                "circle-radius": 17,
                "circle-color": "#000",
                "circle-opacity": 0.7,
                "circle-blur": 0.2

}
        });
        map.addLayer({
            "id": "non-cluster-label",
            "type": "symbol",
            "source": "earthquakes",
            "layout": {
                "text-field": "{mag}",
                "text-font": [
                        "DIN Offc Pro Medium",
                        "Arial Unicode MS Bold"
                    ],
                "text-size": 12
            },
            "paint": {
                "text-color": "#eee"
            }
        });

// Display the earthquake data in three layers, each filtered to a range of
        // count values. Each range gets a different fill color.
        var layers = [
            [100, '#f28cb1'],
            [20, '#f1f075'],
            [0, '#51bbd6']
        ];

layers.forEach(function (layer, i) {
            map.addLayer({
                "id": "cluster-" + i,
                "type": "circle",
                "source": "earthquakes",
                "paint": {
                    "circle-color": layer[1],
                    "circle-radius": 18
                },
                "filter": i == 0 ?
                    [">=", "point_count", layer[0]] :
                    ["all",
                        [">=", "point_count", layer[0]],
                        ["<", "point_count", layers[i - 1][0]]]
            });
        });

// Add a layer for the clusters' count labels
        map.addLayer({
            "id": "cluster-count",
            "type": "symbol",
            "source": "earthquakes",
            "layout": {
                "text-field": "{point_count}",
                "text-font": [
                        "DIN Offc Pro Medium",
                        "Arial Unicode MS Bold"
                    ],
                "text-size": 12
            }
        });

map.on('mousemove', function (e) {
            var features = map.queryRenderedFeatures(e.point, { layers: ['non-cluster-markers'] });
            map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
        });
        map.on('click', function (e) {
            var features = map.queryRenderedFeatures(e.point, { layers: ['non-cluster-markers'] });

if (!features.length) {
                return;
            }

var feature = features[0];

// Populate the popup and set its coordinates
            // based on the feature found.
            var popupContent = "<h3>" + feature.properties.title + "</h3><p><a href='" + feature.properties.url + "'>Link</a></p>";

var popup = new mapboxgl.Popup()
                .setLngLat(feature.geometry.coordinates)
                .setHTML(popupContent)
                .addTo(map);
        });
    });
});
</script>

</body>
</html>

https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js

https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.js