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!
