ArcGis API for Javascript 4.12 - TimeSlider Widget

1226
13
Jump to solution
11-17-2019 11:15 PM
IanMagero
New Contributor III

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 ?

0 Kudos
1 Solution

Accepted Solutions
IanMagero
New Contributor III

Hi all,

I resolved this issue.

What I did is I rewritten the whole logic again and used feature layer instead of Geojson layer and the timeslider worked like charm.

Thanks for those who tried to assist me.

Thanks Undral Batsukh

View solution in original post

0 Kudos
13 Replies
Noah-Sager
Esri Regular Contributor

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

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
New Contributor III

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

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

0 Kudos
IanMagero
New Contributor III

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>
0 Kudos
IanMagero
New Contributor III

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

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

0 Kudos
IanMagero
New Contributor III

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.

0 Kudos
UndralBatsukh
Esri Regular Contributor

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

0 Kudos