nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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 ?

Find more posts tagged with

Accepted answers

IanMagero

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‌

All comments

IanMagero

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‌

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

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

IanMagero

Below is the code:

const timeSlider = new TimeSlider({

container: "timeSlider",

playRate: 1000,

view: view

});

view.ui.add(timeSlider, "manual");

view.whenLayerView(geojsonLayer).then(function(lv) {

layerView = lv;

const start = geojsonLayer.timeInfo.fullTimeExtent.start;

timeSlider.fullTimeExtent = {

start: geojsonLayer.timeInfo.fullTimeExtent.start,

end: geojsonLayer.timeInfo.fullTimeExtent.end

};

const end = new Date(start);

var year = end.getFullYear();

var month = end.getMonth();

var day = end.getDate();

var next_yr = new Date(year + 1, month, day)

//end.setDate(end.getDate() + 1);

timeSlider.values = [start, next_yr];

timeSlider.createStopsByInterval(

timeSlider.fullTimeExtent,

{

value: 1,

unit: "years"

}

);

});

timeSlider.watch("timeExtent", function(event) {

geojsonLayer.definitionExpression = "time <='"+timeSlider.timeExtent.end.getTime()+"'AND select_option ='"+select_option_val+"'";

layerView.effect = {

filter: {

timeExtent: timeSlider.timeExtent,

geometry: view.extent

excludedEffect: "grayscale(20%) opacity(12%)"

};

});

IanMagero

There is no error in the console

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:

<SPAN class="keyword token">function</SPAN> <SPAN class="token function">setTimeSlider</SPAN><SPAN class="punctuation token">(</SPAN>timeLayer<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
   <SPAN class="keyword token">const</SPAN> fullTimeExtent <SPAN class="operator token">=</SPAN> timeLayer<SPAN class="punctuation token">.</SPAN>timeInfo<SPAN class="punctuation token">.</SPAN>fullTimeExtent<SPAN class="punctuation token">;</SPAN>

   timeSlider<SPAN class="punctuation token">.</SPAN>fullTimeExtent <SPAN class="operator token">=</SPAN> fullTimeExtent<SPAN class="punctuation token">;</SPAN>
   timeSlider<SPAN class="punctuation token">.</SPAN>stops <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
     interval<SPAN class="punctuation token">:</SPAN> timeLayer<SPAN class="punctuation token">.</SPAN>timeInfo<SPAN class="punctuation token">.</SPAN>interval
   <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

   <SPAN class="keyword token">var</SPAN> start <SPAN class="operator token">=</SPAN> timeLayer<SPAN class="punctuation token">.</SPAN>timeInfo<SPAN class="punctuation token">.</SPAN>fullTimeExtent<SPAN class="punctuation token">.</SPAN>start<SPAN class="punctuation token">;</SPAN>
   <SPAN class="keyword token">var</SPAN> end <SPAN class="operator token">=</SPAN> timeLayer<SPAN class="punctuation token">.</SPAN>timeInfo<SPAN class="punctuation token">.</SPAN>fullTimeExtent<SPAN class="punctuation token">.</SPAN>end<SPAN class="punctuation token">;</SPAN>
   <SPAN class="comment token">// const end = new Date(start);</SPAN>
   <SPAN class="comment token">// end.setDate(end.getFullYear() + timeLayer.timeInfo.interval.value);</SPAN>

   timeSlider<SPAN class="punctuation token">.</SPAN>values <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>start<SPAN class="punctuation token">,</SPAN> end<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Noah Sager

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.