JavaScript Maps SDK

Create a time slider

Visualize earthquakes with a range slider. 


<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Visualize earthquakes with a range slider.</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.css" />
    <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.3.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 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" for="slider"></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>
      TrimbleMaps.setAPIKey('YOUR_API_KEY_HERE');
  const map = new TrimbleMaps.Map({
        container: 'map',
        style: TrimbleMaps.Common.Style.TRANSPORTATION,
        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', () => {
        // Data courtesy of https://www.usgs.gov/programs/earthquake-hazards
        // Query for significant earthquakes in 2015 URL request looked like this:
        // https://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://developer.trimblemaps.com/maps-sdk/assets/significant-earthquakes-2015.geojson',
          (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,
            });

            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 Regular', 'Noto Sans Regular'],
                '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>
Last updated June 26, 2025.