Implement Time Slider programmaticaly

PitersonPaulgek — Wed, 23 Nov 2016 04:03:36 GMT

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>

//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);

<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>

Re: Implement Time Slider programmaticaly

RobertScheitlin__GISP — Wed, 23 Nov 2016 14:17:44 GMT

Piterson,

You say you are trying to build a time slider. So why are you not using setTimeDefinition instead of setLayerDefinitions?

FeatureLayer | API Reference | ArcGIS API for JavaScript 3.18 | setTimeDefinition

Re: Implement Time Slider programmaticaly

PitersonPaulgek — Wed, 23 Nov 2016 16:08:02 GMT

Robert,

Thank you for your response.

Reasons:

1) we use ArcGISDynamicMapServiceLayer.

Should we use FeatureLayer?

Re: Implement Time Slider programmaticaly

RobertScheitlin__GISP — Wed, 23 Nov 2016 16:15:06 GMT

You could do that or set the maps timeExtent and the dynamic layer will use the maps time extent.

Re: Implement Time Slider programmaticaly

KellyHutchins — Thu, 24 Nov 2016 00:38:30 GMT

Another option is to create the Time Slider widget in your app and use its capabilities(play, pause, time-extent-change) without displaying it on the map. Here is a very rough example showing how we can show time on the map without displaying the slider widget itself.

Demo showing using the time slider widget without displaying the widget in the app

JS Bin - Collaborative JavaScript Debugging

Its also possible to get a fairly wide range of looks using the default time slider and some custom css. For example the following apps use the Time Slider widget and modify its appearance with css.

http://www.arcgis.com/apps/TimeAware/index.html?appid=51168c8c1ba449e4a966a67234ee064b

http://www.maps.arcgis.com/apps/TimeAware/index.html?appid=62bc7c527d10450eb0b08a33d7f1aea8

Re: Implement Time Slider programmaticaly

PitersonPaulgek — Thu, 24 Nov 2016 01:36:34 GMT

Thank you Kelly.

It is really makes sense.

Re: Implement Time Slider programmaticaly

PitersonPaulgek — Thu, 24 Nov 2016 01:38:23 GMT

Thank you Robert, it works!!

topic Re: Implement Time Slider programmaticaly in ArcGIS JavaScript Maps SDK Questions

Implement Time Slider programmaticaly

Re: Implement Time Slider programmaticaly

Re: Implement Time Slider programmaticaly

Re: Implement Time Slider programmaticaly

Re: Implement Time Slider programmaticaly

Re: Implement Time Slider programmaticaly

Re: Implement Time Slider programmaticaly