Cannot have two TimeSliders on the page and TimeSlider cannot be created twice

PaulBelew · ‎07-08-2011

Hi!
We cannot have two TimeSliders on the page. Also we cannot create slider, destroy it and create again. Second TimeSlider.startup() returns error "Tried to register widget with id==ts but that id is already registered".
Our TimeSlider ids are not 'ts'.
Is here anybody who had two TimeSliders on the page?
Thanks!
The page source is here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>TimeSlider Error </title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css" />

<script type="text/javascript">
var djConfig = {
   parseOnLoad: true
};
</script>

<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3">
</script>

<script type="text/javascript" language="javascript">
dojo.require("esri.map");
dojo.require("esri.dijit.TimeSlider");

function init() {
   var timeSliderFire = new esri.dijit.TimeSlider({style: "width:100%;" }, dojo.byId("dTimeSliderFire"));
   timeSliderFire.setThumbCount(1);
   timeSliderFire.setThumbMovingRate(2000);
   timeSliderFire.loop = true;

   var fireDates = [new Date("2010-04-20"), new Date("2010-04-29"), new Date("2010-05-09"), new Date("2010-05-16"), new Date("2010-06-09")];
   timeSliderFire.setTimeStops(fireDates);
   timeSliderFire.startup();
   var labels = ["2010-04-20", "2010-06-09"];
   timeSliderFire.setLabels(labels);

   var timeSliderReg = new esri.dijit.TimeSlider({style: "width:100%;" }, dojo.byId("dTimeSliderReg"));
   timeSliderReg.setThumbCount(1);
   timeSliderReg.setThumbMovingRate(2000);
   timeSliderReg.loop = true;

   var fireRegs = [new Date("2010-04-20"), new Date("2010-04-29"), new Date("2010-05-09"), new Date("2010-05-16"), new Date("2010-06-09")];
   timeSliderReg.setTimeStops(fireRegs);
   timeSliderReg.startup();
   labels = ["2010-04-20", "2010-06-09"];
   timeSliderReg.setLabels(labels);
}

dojo.addOnLoad(init);
</script>

</head>
<body class="claro">
<div id="pnlFires" style="position:absolute; top: 150px; left: 300px; height: 150px; width: 800px;">
<div id="dTimeSliderFire"></div>
</div>
<div id="pnlReg" style="position:absolute; top: 350px; left: 300px; height: 150px; width: 800px;">
<div id="dTimeSliderReg"></div>
</div>
</body>
</html>

SaurabhGupta · ‎07-08-2011

Hi,

There is an enhancement logged for this.

NIM069354 Method to tie multiple TimeSliders to a Map.

StephenLead · ‎07-10-2011

We cannot have two TimeSliders on the page

As far as I understand, the timeSlider applies at the map level, meaning that it changes the timeExtent of the entire map. Any time-aware layer on the map will update according to the map's current timeExtent.

So in this scenario it wouldn't make sense to have multiple timesliders, since the map itself can only have one time.

Can you explain why you need two timesliders on the same map? This might help to come up with a workaround.

Cheers,
Steve

PaulBelew · ‎07-10-2011

Thanks for response.
I supposed that although map had no link to TimeSlider (map.setTimeSlider wasn't called). I tried to destroy control and create it again. Failed also.
I think there is some bug in this situation.
Now I have to manually create TimeSlider using dojo :((
I need only TimeSlider as a dijit, not map time extent. And I want to make queries for several date fields and manually filter objects.

StephenLead · ‎07-10-2011

Hi Paul,

I still don't think that you need to have 2 separate time sliders. It looks like you're trying to display the change in 2 layers (Fire and Reg) over time - a single timeslider will do this.

Your Fire and Reg layers need to be defined as Time-Aware.

See this Time Slider sample for the code to add a time slider to the map and configure it.

Then you simply add the time-aware layers to the map, and when you change the timeSlider they will automatically change.

This map is an example of the timeSlider in action. Drag the timeSlider, and note that it updates all of the layers (the blue dots and orange polygons) - these layers are time-aware, so they both update when the map's timeExtent changes.

Steve

StephenLead · ‎07-10-2011

I need only TimeSlider as a dijit, not map time extent. And I want to make queries for several date fields and manually filter objects.

Sorry I missed that in your previous post. In that case I'm not sure, sorry.

Good luck,
Steve

PaulBelew · ‎07-11-2011

Thanks Steve
May be you are right. And there is a way to manage with single slider.
By now I didn't understand how to manage with two different time scales. Your example have only one time scale. The TimeSlider must be able to tune itself from different layers. One layer lasted from 1950 to 2011. Other layer lasted from 2011 April to 2011 July. Is it possible?

StephenLead · ‎07-11-2011

By now I didn't understand how to manage with two different time scales. Your example have only one time scale. The TimeSlider must be able to tune itself from different layers. One layer lasted from 1950 to 2011. Other layer lasted from 2011 April to 2011 July. Is it possible?

In the example map, use the Change Map button to choose another History layer, and note that the time-slider updates to show the new time extent. Is this similar to what you're trying to do?

In this case, there is only ever one time-aware layer, and one timeSlider, on the map at any one time. When changing to a new time-aware layer, the old time-aware layer is removed, and the timeSlider is removed using:

map.timeSlider.pause();
map.timeSlider.destroy();

Then a new timeSlider object is created, with the new timeStops passed in.

In your original code sample above, you're trying to create and start-up two timeSlider objects on the same map. You may need to change the logic so that only one time-aware layer (fire OR reg) is shown at a time, with the timeSlider updated to suit that layer when it's loaded.

Hope this helps,
Steve

PaulBelew · ‎07-11-2011

Thanks Stephen.
It works.
But I have developed own dijit already. And having full control over this dijit.