topic Re: ArcGis API for Javascript 4.12 - TimeSlider Widget in ArcGIS JavaScript Maps SDK Questions

ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Mon, 18 Nov 2019 07:15:33 GMT

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 ?

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

Noah-Sager — Mon, 18 Nov 2019 19:10:07 GMT

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

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

UndralBatsukh — Sat, 11 Dec 2021 22:31:14 GMT

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.

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Tue, 19 Nov 2019 06:14:51 GMT

There is no error in the console

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Tue, 19 Nov 2019 06:20:23 GMT

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%)"

};

});

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Tue, 19 Nov 2019 06:21:42 GMT

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

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

UndralBatsukh — Tue, 19 Nov 2019 15:37:39 GMT

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

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Wed, 20 Nov 2019 04:42:35 GMT

The select option is created and populated from serverside:

<?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>

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Wed, 20 Nov 2019 04:45:36 GMT

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

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

UndralBatsukh — Wed, 20 Nov 2019 15:50:13 GMT

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

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Thu, 21 Nov 2019 05:35:22 GMT

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.

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

UndralBatsukh — Thu, 21 Nov 2019 15:40:36 GMT

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

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Fri, 22 Nov 2019 06:22:42 GMT

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);

});

Re: ArcGis API for Javascript 4.12 - TimeSlider Widget

IanMagero — Mon, 09 Dec 2019 06:39:57 GMT

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‌