Hide Table of Contents
View Time slider with dynamic map service layer sample in sandbox
Time slider with dynamic map service layer

Description

This sample shows how to configure the TimeSlider to filter tornadodata by date. The TimeSlider is configured to have two thumbs so only data occurring between the two thumb locations is displayed. The setThumbIndexes method determines the initial location of each thumb. In this case a thumb is added at the initial start time and another thumb is positioned one time step up.

timeSlider.setThumbCount(2);timeSlider.setThumbIndexes([0,1]);

There are several ways to define the number of time stops (ticks) displayed on the time slider:

  • setTimeStops - Manually define the stop locations by providing an array of dates.
  • createTimeStopsByCount - The specified number of stops are created between the start and end time.
  • createTimeStopsByInterval - A time stop is created for each specified interval, i.e. (week, month, day).

This sample creates a time stop on the slider for every 10 years between the layer's start time and end time.

timeSlider.createTimeStopsByTimeInterval(timeExtent, 10, "esriTimeUnitsYears");

Code

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Well completion dates for the Hugoton Gas Field Over Time</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <style>
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }

      #mapDiv {
        position: relative;
      }

      #bottomPanel {
        left: 50%;
        margin: 0 auto;
        margin-left: -500px;
        position: absolute;
        bottom: 2.5em;
      }

      #timeInfo{
        border-radius: 4px;
        border: solid 2px #ccc;
        background-color: #fff;
        display: block;
        padding: 5px;
        position: relative;
        text-align: center;
        width: 1000px;
        z-index: 99;
      }
    </style>

    <script src="https://js.arcgis.com/3.46/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/TimeExtent", "esri/dijit/TimeSlider",
        "dojo/_base/array", "dojo/dom", "dojo/domReady!"
      ], function(
        Map, ArcGISDynamicMapServiceLayer,
        TimeExtent, TimeSlider,
        arrayUtils, dom
      ) {
        map = new Map("mapDiv", {
          basemap: "streets-vector",
          center: [-101, 37],
          zoom: 4
        });

        var opLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/SpatioTemporalAggregation/Tornadoes_FeatureBinning/MapServer/");
        opLayer.setVisibleLayers([0]);

        //apply a definition expression so only some features are shown
        var layerDefinitions = [];
        layerDefinitions[0] = "mag>1";
        opLayer.setLayerDefinitions(layerDefinitions);

        //add the gas fields layer to the map
        map.addLayers([opLayer]);

        map.on("layers-add-result", initSlider);

        function initSlider() {
          var timeSlider = new TimeSlider({
            style: "width: 100%;"
          }, dom.byId("timeSliderDiv"));
          map.setTimeSlider(timeSlider);

          var timeExtent = new TimeExtent();
          timeExtent.startTime = new Date("1/1/1950 UTC");
          timeExtent.endTime = new Date("08/31/2018 UTC");
          timeSlider.setThumbCount(2);
          timeSlider.createTimeStopsByTimeInterval(timeExtent, 10, "esriTimeUnitsYears");
          timeSlider.setThumbIndexes([0,1]);
          timeSlider.setThumbMovingRate(2000);
          timeSlider.startup();

          //add labels for every other time stop
          var labels = arrayUtils.map(timeSlider.timeStops, function(timeStop, i) {
            if ( i % 2 === 0 ) {
              return timeStop.getUTCFullYear();
            } else {
              return "";
            }
          });

          timeSlider.setLabels(labels);

          timeSlider.on("time-extent-change", function(evt) {
            var startValString = evt.startTime.getUTCFullYear();
            var endValString = evt.endTime.getUTCFullYear();
            dom.byId("daterange").innerHTML = "<i>" + startValString + " and " + endValString  + "<\/i>";
          });
        }
      });
    </script>
  </head>
  <body class="claro">

    <div id="mapDiv">
      <div id="bottomPanel">
        <div id="timeInfo">
          <div>Now showing tornadoes from <span id="daterange"><i>1950 to 1960</i></span></div>
          <div id="timeSliderDiv"></div>
        </div>
      </div>
    </div>
  </body>
</html>
 
          
Show Modal