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 ?

[IanMagero]

Hi Undral Batsukh‌

I have managed to come up with a codepen:

https://codepen.io/IanMagero/project/editor/XrywoY 

It clearly depicts how I have written my logic and clearly shows how the TimeSlider is rendered when the select option is changed:

Please note when a select option is selected the map(earthquake_depth) is executed and this function is what has the map logic:

$( document ).ready(function() {

$(document).on('change','#earthquake_depth select',function(){

var earthquake_depth = $(this).val();

map(earthquake_depth);

});

});

[IanMagero]

There is no error in the console

[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 · Accepted solution]

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‌