Hide Table of Contents
Analysis
Data Reviewer
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
Download as a zip file
Description
This sample shows how to configure the TimeSlider to filter petroleum well data 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 two years between the layer's start time and end time.
timeSlider.createTimeStopsByTimeInterval(results[1].layer.timeInfo.timeExtent,2,'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.29/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.29/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.29/"></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",
center: [-101.15, 37.604],
zoom: 9
});
var opLayer = new ArcGISDynamicMapServiceLayer("https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSWells/MapServer");
opLayer.setVisibleLayers([0]);
//apply a definition expression so only some features are shown
var layerDefinitions = [];
layerDefinitions[0] = "FIELD_KID=1000148164";
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/1921 UTC");
timeExtent.endTime = new Date("12/31/2009 UTC");
timeSlider.setThumbCount(2);
timeSlider.createTimeStopsByTimeInterval(timeExtent, 2, "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>Hugoton Gas Field Wells from <span id="daterange">1921 to 2009</span> (Completion date)</div>
<div id="timeSliderDiv"></div>
</div>
</div>
</div>
</body>
</html>