AnsweredAssumed Answered

Implement Time Slider programmaticaly

Question asked by piterpaulppp on Nov 22, 2016
Latest reply on Nov 23, 2016 by piterpaulppp

Hi,

We are implementing Time slider programmaticaly (for the reasons we cannot customize the standard one according to requirements).

 

app.currentTimeSeriesLayer = initialised earlier and added to map// visible on the map

function MyTimeSliderRun()

{

var timeIntervalMilliSeconds = 5000;

var startYear = 1995;
var endYear = 2016;
var Years = endYear - startYear;
var increment = 0;
for (i = 0; i <= Years; i++) {
setTimeout(function () {
var layerDefinitionsTS = [];
app.currentTimeSeriesLayer.setLayerDefinitions(null, true);
var curYear = startYear + increment;
increment = increment + 1;
layerDefinitionsTS[app.currentTimeSeriesLayer.visibleLayers[0]] = "Year = " + curYear;
app.currentTimeSeriesLayer.setLayerDefinitions(layerDefinitionsTS, false);
}, timeIntervalMilliSeconds*i);
}

 

We cannot see the layer on the map, what is a possible reason?

 

Code in SandBox

<!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.18/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.18/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.18/"></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
});
//https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=time_sliderwithdynamiclayer

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", MyRunTimeSeries);

var currentTimeSeriesLayer = opLayer;
function MyRunTimeSeries()
{
var timeIntervalMilliSeconds = 10000;
var startYear = 1995;
var endYear = 2016;
var Years = endYear - startYear;
var increment = 0;
currentTimeSeriesLayer.setDisableClientCaching(true);
for (i = 0; i <= Years; i++) {
setTimeout(function () {
var layerDefinitionsTS = [];
currentTimeSeriesLayer.setLayerDefinitions(null, true);
var curYear = startYear + increment;
increment = increment + 1;
if (increment == 0)
{
layerDefinitionsTS[currentTimeSeriesLayer.visibleLayers[0]] = "COUNTY_COD = " + 7;
}
if (increment == 1)
{
layerDefinitionsTS[currentTimeSeriesLayer.visibleLayers[0]] = "COUNTY_COD = " + 9;
}
if (increment == 2)
{
layerDefinitionsTS[currentTimeSeriesLayer.visibleLayers[0]] = "COUNTY_COD = " + 125;
}
if (increment == 3)
{
layerDefinitionsTS[currentTimeSeriesLayer.visibleLayers[0]] = "COUNTY_COD = " + 135;
}
if (increment > 3)
{currentTimeSeriesLayer.setLayerDefinitions(null, false);}
else {
currentTimeSeriesLayer.setLayerDefinitions(layerDefinitionsTS, false);
}
currentTimeSeriesLayer.refresh();
console.log("increment: "+increment)
console.log("layerDefinitionsTS: "+layerDefinitionsTS);

console.log(currentTimeSeriesLayer.layerDefinitions);
console.log(map);
console.log(map.layerIDs);
}, timeIntervalMilliSeconds*i);
}
}
//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>

Outcomes