Skip to main content

Create a time slider

Additional Developer Resources

This example uses Map#setFilter and D3.js to create a range slider to visualize earthquakes in 2015 that were greater than 5.9 magnitude.

The Winkel Tripel projection ensures that all earthquakes are visible.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Create a time slider</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.1/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<style>
    .map-overlay {
        font:
            12px/20px 'Helvetica Neue',
            Arial,
            Helvetica,
            sans-serif;
        position: absolute;
        width: 25%;
        top: 0;
        left: 0;
        padding: 10px;
    }

    .map-overlay .map-overlay-inner {
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
    }

    .map-overlay h2 {
        line-height: 24px;
        display: block;
        margin: 0 0 10px;
    }

    .map-overlay .legend .bar {
        height: 10px;
        width: 100%;
        background: linear-gradient(to right, #fca107, #7f3121);
    }

    .map-overlay input {
        background-color: transparent;
        display: inline-block;
        width: 100%;
        position: relative;
        margin: 0;
        cursor: ew-resize;
    }
</style>

<div id="map"></div>

<div class="map-overlay top">
    <div class="map-overlay-inner">
        <h2>Significant earthquakes in 2015</h2>
        <label id="month"></label>
        <input id="slider" type="range" min="0" max="11" step="1" value="0">
    </div>
    <div class="map-overlay-inner">
        <div id="legend" class="legend">
            <div class="bar"></div>
            <div>Magnitude (m)</div>
        </div>
    </div>
</div>

<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/light-v11',
        projection: 'winkelTripel',
        center: [-45, 0],
        zoom: 0.25
    });

    const months = [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ];

    function filterBy(month) {
        const filters = ['==', 'month', month];
        map.setFilter('earthquake-circles', filters);
        map.setFilter('earthquake-labels', filters);

        // Set the label to the month
        document.getElementById('month').textContent = months[month];
    }

    map.on('load', () => {
        // Data courtesy of http://earthquake.usgs.gov/
        // Query for significant earthquakes in 2015 URL request looked like this:
        // http://earthquake.usgs.gov/fdsnws/event/1/query
        //    ?format=geojson
        //    &starttime=2015-01-01
        //    &endtime=2015-12-31
        //    &minmagnitude=6'
        //
        // Here we're using d3 to help us make the ajax request but you can use
        // Any request method (library or otherwise) you wish.
        d3.json(
            'https://docs.mapbox.com/mapbox-gl-js/assets/significant-earthquakes-2015.geojson',
            jsonCallback
        );
    });

    function jsonCallback(err, data) {
        if (err) {
            throw err;
        }

        // Create a month property value based on time
        // used to filter against.
        data.features = data.features.map((d) => {
            d.properties.month = new Date(d.properties.time).getMonth();
            return d;
        });

        map.addSource('earthquakes', {
            'type': 'geojson',
            data: data
        });

        map.addLayer({
            'id': 'earthquake-circles',
            'type': 'circle',
            'source': 'earthquakes',
            'paint': {
                'circle-color': [
                    'interpolate',
                    ['linear'],
                    ['get', 'mag'],
                    6,
                    '#FCA107',
                    8,
                    '#7F3121'
                ],
                'circle-opacity': 0.75,
                'circle-radius': [
                    'interpolate',
                    ['linear'],
                    ['get', 'mag'],
                    6,
                    20,
                    8,
                    40
                ]
            }
        });

        map.addLayer({
            'id': 'earthquake-labels',
            'type': 'symbol',
            'source': 'earthquakes',
            'layout': {
                'text-field': ['concat', ['to-string', ['get', 'mag']], 'm'],
                'text-font': ['Open Sans Bold', 'Arial Unicode MS Bold'],
                'text-size': 12
            },
            'paint': {
                'text-color': 'rgba(0,0,0,0.5)'
            }
        });

        // Set filter to first month of the year
        // 0 = January
        filterBy(0);

        document.getElementById('slider').addEventListener('input', (e) => {
            const month = parseInt(e.target.value, 10);
            filterBy(month);
        });
    }
</script>

</body>
</html>
This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.
Additional Developer Resources
Was this example helpful?