Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Time slider with dynamic map service layer
Explore in the sandbox
Open in CodePen
View live sample
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>