Data-driven styling for live earthquake tracking

By Peter Liu on June 08 2016

Using USGS earthquake data feed and Mapbox GL JS data-driven styling, we built a live earthquake tracker of global tremors as detected by monitoring stations worldwide.

Check out the tight clusters of minor earthquakes in Alaska and California, and sparser but far more powerful shocks on the Ring of Fire’s western edge. Hover over each marker to inspect the quake, and click to zoom in and view satellite imagery of the surrounding area:

To build your own earthquake tracker or data-driven map, here’s a basic implementation to get you started:

var feed = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson';

mapboxgl.util.getJSON(feed, function(err, data) {
    // Add response data as source.
    map.addSource('earthquakes', {
        type: 'geojson',
        data: data
    });

    // Add response data as source.
    map.addLayer({
        "id": "earthquake-layer",
        "type": "circle",
        "source": "earthquakes",
        "paint": {
            "circle-color": "#f00",
            "circle-radius": {
                "property": "mag",
                "base": 1.8,
                "stops": [
                    [{zoom: 0,  value: 2}, 1],
                    [{zoom: 0,  value: 8}, 40],
                    [{zoom: 11, value: 2}, 10],
                    [{zoom: 11, value: 8}, 2400],
                    [{zoom: 20, value: 2}, 20],
                    [{zoom: 20, value: 8}, 6000]
                ]
            }
        }
    });
});

Build your own!

We would love to see your data-driven maps. If you have something to share, tweet us at @Mapbox.