Create a time slider

Present seismic activities using a slider that spans a specific time range. Utilizing the Map#setFilter function and the D3.js library, construct a timeline slider to visually represent earthquakes that occurred in the year 2015 and had a magnitude greater than 5.9. Use the slider bar to filter earthquakes by month.


npm install --save @maptiler/sdk d3

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import * as d3 from 'd3';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
    container: 'map',
    style: MapStyle.STREETS, 
    center: [31.4606, 20.7927],
    zoom: 0.5
});

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', function () {
    // 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.maptiler.com/sdk-js/assets/significant-earthquakes-2015.geojson',
        function (err, data) {
            if (err) throw err;

            // Create a month property value based on time
            // used to filter against.
            data.features = data.features.map(function (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', function (e) {
                    const month = parseInt(e.target.value, 10);
                    filterBy(month);
                });
        }
    );
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Create a time slider | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</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 type="module" src="./main.js"></script>
</body>
</html>

style.css

body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create a time slider</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    .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>
</head>

<body>
  <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>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map',
      style: maptilersdk.MapStyle.STREETS,
      center: [31.4606, 20.7927],
      zoom: 0.5
    });

    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', function () {
      // 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.maptiler.com/sdk-js/assets/significant-earthquakes-2015.geojson',
        function (err, data) {
          if (err) throw err;

          // Create a month property value based on time
          // used to filter against.
          data.features = data.features.map(function (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', function (e) {
              const month = parseInt(e.target.value, 10);
              filterBy(month);
            });
        }
      );
    });
  </script>
</body>

</html>