ArcGis API for Javascript 4.12 - TimeSlider Widget

[IanMagero]

Hi,

I am using the timeslider widget but I am experiencing some challenge with it.

I am getting my data from a GeoJsonLayer which is filtered when a user selects an option from a dropdown.

The first time the dropdown is selected the time slider displays correctly:

However when a user selects another option from the dropdown the timeSlider appears as below:

I have tried to set the view to null to no avail.

What can the issue be which is making the timeSlider not render correctly ?

[Noah-Sager]

Any errors in the console? Can you share some code about how the new layer is added to the TimeSlider widget?

[UndralBatsukh]

Hi there, 

I am guessing you are setting up the TimeSlider widget to be used with different layers but to use one layer at a time. If this is not the case please let me know. 

In any case, in the function where you are changing the layer and setting the timeSlider, you should set the TimeSlider

fullTimeExtent, stops and values properties as shown below:

function setTimeSlider(timeLayer) {
   const fullTimeExtent = timeLayer.timeInfo.fullTimeExtent;

   timeSlider.fullTimeExtent = fullTimeExtent;
   timeSlider.stops = {
     interval: timeLayer.timeInfo.interval
   };

   var start = timeLayer.timeInfo.fullTimeExtent.start;
   var end = timeLayer.timeInfo.fullTimeExtent.end;
   // const end = new Date(start);
   // end.setDate(end.getFullYear() + timeLayer.timeInfo.interval.value);

   timeSlider.values = [start, end];
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

This simple test app shows how to set the timeSlider widget with one layer at a time at runtime.

[IanMagero]

I have tried your code but the error still persists.When I change the select option the timeslider appears twice

[UndralBatsukh]

Can you copy paste the logic for the select option? Maybe you are creating new instances of the time slider from the select option?

[IanMagero]

The select option is created and populated from serverside:

  <div class="col-sm-5">

        <?php $car_models = array( '' => ' -- All Cars Models-- ' ) + (array)$car_models ?>

        <?= Form::select('select_option', $car_models, null,

          array(  'id' => 'select_option',

            'class'     => 'form-control input-sm ',

            'autocomplete' => 'off',

          )

        )

        ?>

      </div>

[IanMagero]

Undral Batsukh‌ What I would suggest if it is possible you create a Pen which has a select option and Timeslider

[UndralBatsukh]

Hi there, 

I cannot really help you without a test case at this point. From what you are describing, seems like you are creating new timeslider from select options on change event. Please create a codepen app if you need more assistance. 

Thanks,

-Undral

[IanMagero]

Hi Undral Batsukh‌

Can we have a Skype call at your earliest convenience for about 30 minutes so that we can go through the code so that you will get a better understanding.

I am not able to create the Codepen since the data I am using is confidential.

I am in GMT+3 timezone.

Thanks.

Ian.

[UndralBatsukh]

Hi there, 

Unfortunately, I cannot do that. You should log an incident with Esri support services and work with a support analyst. 

You can create a codepen using a public geojson data. 

-Undral