Question about widget development

AyakoSUZUKI

I am trying to create a customized timeslider widget to visualize temporal data.

I was able to show the data on the map and the data changes by the timeslider.

However, the tick does not move when I use setTimeout() to show animated visualization.

The data includes fields which indicate temporal, so I filter features using layer.definitionExpression.

Timeslider is created by using input element. When I move the tick in the element, change event fires and features are filtered.

I also add animation by using setTimeout. I was able to show animation, but when I use animation, the tick deos not move. And this is the issue I am facing to.

I attached source code (I deleted some codes, which refer the service I use).

I am new to TypeScript and widget development.

So I could miss something basic, but it would be greate if I can get any infromation about the issue.

app.zip

AyakoSUZUKI

Hi Munachiso,

Yes, I increment this.currInterval, because value attribute in input element refers to this.currInterval.

I was able to move the tick when I directly access to the DOM to change the value.

The snippet below is what I did.

this.domNode.childNodes[0].value = this.currInterval;‍

However, I don't think this is a correct way to change input.value since it uses JSX.

I believe that changing input.value should be done via referred variable (this.currInterval in this situation).

In fact, I found the solution.

It seems that the issue is render method is not called by changing this.currInterval.

And it is necessary to add @renderable() to make property renderable.

So what I need is adding the decorator to the property like this;

@property()
@renderable()
currInterval: number = 0;‍‍‍

You can check about information in the documentation for widget development.

Widget development | ArcGIS API for JavaScript 4.6