Time slider not showing up on web map

itsmichael

Hello everyone!

I am trying to make a web map with a time slider via HTML/CSS/JS. The time slider, however, is not showing up despite following the documentation.

Here is part of my code:

       <script src="http://js.arcgis.com/3.16/"></script>

    

       <script>

        var map;

        require([

        "esri/map", "esri/dijit/InfoWindowLite",

        "esri/InfoTemplate", "esri/layers/FeatureLayer", "esri/dijit/Legend", "esri/dijit/HomeButton",

        "esri/dijit/BasemapGallery", "esri/arcgis/utils", "dojo/_base/array", "dojo/parser",

        "esri/dijit/Scalebar", "esri/TimeExtent", "esri/dijit/TimeSlider", "dijit/layout/BorderContainer",

        "dijit/layout/ContentPane", "dijit/TitlePane", "dijit/layout/AccordionContainer",

        "dojo/dom-construct", "dojo/domReady!"

      ], function(

        Map, InfoWindowLite, InfoTemplate, FeatureLayer, Legend, HomeButton, BasemapGallery, arcgisUtils,

        arrayUtils, parser, Scalebar, TimeSlider, TimeExtent, BorderContainer, ContentPane, AccordionContainer,       domConstruct

      ) {

        parser.parse();

        map = new Map("map", {

          basemap: "gray",

          center: [-101.15, 37.604],
          zoom: 9

        });

       // Time Slider 

        map.on("load", 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/1966 UTC");

          timeExtent.endTime = new Date("12/31/2014 UTC");

          timeSlider.setThumbCount(1);

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

          timeSlider.setThumbMovingRate(2000);

          timeSlider.startup();

     

          // Add labels at start and end

          var labels = ['1966','2014'];

          timeSlider.setLabels(labels);

     

          timeSlider.on("time-extent-change", function(evt) {

            var startValString = evt.startTime.getUTCFullYear();

            var endValString = evt.endTime.getUTCFullYear();

            dom.byId("daterange").innerHTML = "<b>" + endValString  + "</b>";

          });

        }

I followed the example from ArcGIS documentation but it is not working on my end.

Thanks in advance!

RobertScheitlin__GISP

Michael,

  You have TimeExtent and TimeSlider reversed in your require parameters list.

      ], function(

        Map, InfoWindowLite, InfoTemplate, FeatureLayer, Legend, HomeButton, BasemapGallery, arcgisUtils,

        arrayUtils, parser, Scalebar, TimeSlider, TimeExtent, BorderContainer, ContentPane, AccordionContainer, domConstruct

      ) {

It should be:

      ], function(

        Map, InfoWindowLite, InfoTemplate, FeatureLayer, Legend, HomeButton, BasemapGallery, arcgisUtils,

        arrayUtils, parser, Scalebar, TimeExtent, TimeSlider, BorderContainer, ContentPane, AccordionContainer, domConstruct

      ) {