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>
Solved! Go to Solution.
You could do that or set the maps timeExtent and the dynamic layer will use the maps time extent.
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
Robert,
Thank you for your response.
Reasons:
1) we use ArcGISDynamicMapServiceLayer.
Should we use FeatureLayer?
You could do that or set the maps timeExtent and the dynamic layer will use the maps time extent.
Thank you Robert, it works!!
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
Thank you Kelly.
It is really makes sense.