Hi everybody, I've been working on displaying a multi-dimensional mosaic dataset in a web app with js (which wouldn't have been possible without this forum so far: thank you). I'm nearly done with everything, but there's one lingering problem: My dataset intends to show scenarios in five year increments starting at +5 years and going to +100 years (in the future starting from when the user is looking at the data [or intends to implement said scenario]). Currently, the date field is set in years and I have added 2000 to each of the scenarios so that TimeSlider would work. So my date slider looks like: After changing a few things in the CSS, namely: #timeSlider { position : absolute ; width : 33% ; left : 33% ; } .esri-time-slider__time-extent, .esri-time-slider__min, .esri-time-slider__max, .esri-slider__tick.minorTick { display : none !important ; } It looks like this: Just in case, here's the JS used to create TimeSlider: // create and add time slider to view const timeSlider = new TimeSlider ( { container : 'timeSlider' , mode : 'instant' , view : view } ) ; view . ui . add ( timeSlider , 'manual' ) ; // wait until the layer view is loaded let timeLayerView ; view . whenLayerView ( layer ) . then ( function ( layerView ) { timeLayerView = layerView ; const fullTimeExtent = layer . timeInfo . fullTimeExtent ; const start = fullTimeExtent . start ; // set up time slider properties timeSlider . fullTimeExtent = fullTimeExtent ; timeSlider . values = [ start ] ; timeSlider . stops = { interval : layer . timeInfo . interval } ; } ) ; What I would like is an *animated* slider with labels in 5 year increments starting at 5 and ending at 100. ------------------------------------------------------------------------------------------------------------------------------------------------------- So the way I see, there would be three ways to 'solve' this problem: * Somehow hack time-enabled layers and TimeSlider JS to accept values less than 100 as temporal * Allow TimeSlider to configure user-defined labels * Use CSS to define labels Are any of these even possible?

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

Working with TimeSlider outside of supported date range

Gianna_BBSRC

Hi everybody,

I've been working on displaying a multi-dimensional mosaic dataset in a web app with js (which wouldn't have been possible without this forum so far: thank you).

I'm nearly done with everything, but there's one lingering problem:

My dataset intends to show scenarios in five year increments starting at +5 years and going to +100 years (in the future starting from when the user is looking at the data [or intends to implement said scenario]).

Currently, the date field is set in years and I have added 2000 to each of the scenarios so that TimeSlider would work. So my date slider looks like:

After changing a few things in the CSS, namely:

<SPAN class="selector token">#timeSlider</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
    <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 33%<SPAN class="punctuation token">;</SPAN>
    <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 33%<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>

<SPAN class="selector token">.esri-time-slider__time-extent,
.esri-time-slider__min,
.esri-time-slider__max,
.esri-slider__tick.minorTick</SPAN> <SPAN class="punctuation token">{</SPAN>
    <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none <SPAN class="important token">!important</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>

It looks like this:

Just in case, here's the JS used to create TimeSlider:

<SPAN class="comment token">// create and add time slider to view</SPAN>
<SPAN class="keyword token">const</SPAN> timeSlider <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TimeSlider</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'timeSlider'</SPAN><SPAN class="punctuation token">,</SPAN>
    mode<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'instant'</SPAN><SPAN class="punctuation token">,</SPAN>
    view<SPAN class="punctuation token">:</SPAN> view
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>timeSlider<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'manual'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

<SPAN class="comment token">// wait until the layer view is loaded</SPAN>
<SPAN class="keyword token">let</SPAN> timeLayerView<SPAN class="punctuation token">;</SPAN>
view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>layer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
    timeLayerView <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">const</SPAN> fullTimeExtent <SPAN class="operator token">=</SPAN> layer<SPAN class="punctuation token">.</SPAN>timeInfo<SPAN class="punctuation token">.</SPAN>fullTimeExtent<SPAN class="punctuation token">;</SPAN>
    <SPAN class="keyword token">const</SPAN> start <SPAN class="operator token">=</SPAN> fullTimeExtent<SPAN class="punctuation token">.</SPAN>start<SPAN class="punctuation token">;</SPAN>
    <SPAN class="comment token">// set up time slider properties</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>values <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN>start<SPAN class="punctuation token">]</SPAN><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> layer<SPAN class="punctuation token">.</SPAN>timeInfo<SPAN class="punctuation token">.</SPAN>interval
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
<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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

What I would like is an *animated* slider with labels in 5 year increments starting at 5 and ending at 100.

-------------------------------------------------------------------------------------------------------------------------------------------------------

So the way I see, there would be three ways to 'solve' this problem:

Somehow hack time-enabled layers and TimeSlider JS to accept values less than 100 as temporal
Allow TimeSlider to configure user-defined labels
Use CSS to define labels

Are any of these even possible?

Find more posts tagged with

Accepted answers

RichieCarmichael

Hi Gianna,

Here is a copy of your app with the play button working correctly.

https://codepen.io/richiecarmichael/pen/eYNqzyv

The play button's html was incomplete. You were missing some inner components defined in the sample.

Also, because the time to refresh the display is significantly greater than the samples, I switched from requestAnimationFrame to setInterval/clearTimeout.

Hope this helps.

Cheers,

Richie

All comments

RichieCarmichael

Hi Gianna,

TimeSlider is designed to work with dates/times. Have you considered building your own custom slider from Slider?

Thanks,

Richie

Gianna_BBSRC

Hi Richie,

Thanks for the reply. Seeing as this might be the only way forward, I've built a custom slider to deal with my unconventional dates. However, I have a problem when trying to animate the slider.

I'm trying to replicate the two examples available (Animate color visual variables and Animate opacity visual variable) but havent quite gotten it yet.

Here's a codepen with my work so far.

(just a note that codepen does something funky with my layout and elements - so it's not exactly what it gonna look like)

(also another note that I have another slider which chooses scenarios which I do not want to animate)

Can you help me hooking up the playButton with yearSlider?

RichieCarmichael

Hi Gianna,

Here is a copy of your app with the play button working correctly.

https://codepen.io/richiecarmichael/pen/eYNqzyv

The play button's html was incomplete. You were missing some inner components defined in the sample.

Also, because the time to refresh the display is significantly greater than the samples, I switched from requestAnimationFrame to setInterval/clearTimeout.

Hope this helps.

Cheers,

Richie

Gianna_BBSRC

Hi Richie,

That's the ticket! Thank you so much for your help. I'm massively grateful.

Cheers,

Gianna

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.