Hi everyone, I'm a bit of noob at this js stuff. I have a multi-dimensional mosaic dataset (netCDFs) with two dimensions: year and fma. * year spans from 2005 to 2100 * fma spans 1 to 11 (these correspond to different scenarios) What I would like to learn how to do is to make the Slider (aka rangeSlider) listen and change the data displayed when a user changes the slider value on the right (1-11). See my jsfiddle here Any help is massively appreciated.

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

How to make Slider listen to thumb-change

Gianna_BBSRC

Hi everyone,

I'm a bit of noob at this js stuff. I have a multi-dimensional mosaic dataset (netCDFs) with two dimensions: year and fma.

year spans from 2005 to 2100
fma spans 1 to 11 (these correspond to different scenarios)

What I would like to learn how to do is to make the Slider (aka rangeSlider) listen and change the data displayed when a user changes the slider value on the right (1-11).

See my jsfiddle here

Any help is massively appreciated.

Finde mehr Beiträge mit dem Tag

Accepted answers

AnneFitz

Hi Gianna - I still only see the topo basemap in both the link you sent and in the jsfiddle, and there's errors about the layer not loading in the console:

[esri.layers.ImageryLayer] #load() Failed to load layer (title: 'WdlndExp netcdf', id: '17119272bda-layer-0') ‍
   name: "request:server"
   message: "Failed to fetch"<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

But I think in your function you want to access the first object in the multidimensionalDefinition array, and set the value on that.

mosaicRuleClone.multidimensionalDefinition[0].values = [value];<SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

All comments

AnneFitz

Hi Gianna,

It looks like you're doing it right in your code, the issue is that the function you are trying to call when the slider thumb value changes (updateFMA(event.value)) is undefined.

Try this and see if you get the event value to print in the console.

slider<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">'thumb-change'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'thumb-drag'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
   console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>value<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>

Hope this helps!

Gianna_BBSRC

Hi Anne,

Thanks for that. Cool to see that something is happening. It does print the slider value to the console when I thumb-change/thumb-drag.
So now how do I make the data change when I change the slider?

Thanks for your help!

AnneFitz

Hi Gianna - your layer isn't loading correctly for me so I don't know what your data looks like, but I think you would need to create some sort of function that would update the mosaicRule on your ImageryLayer based on the fmaValue.

This sample might help you understand: ArcGIS API for JavaScript Sandbox - Image Coordinate System

On line 80 - whenever the select box value changes, a function is called that updates the mosaicRule on the ImageryLayer. I think you can implement something similar when the slider value changes in your code.

Gianna_BBSRC

Hi Anne,

I'm sorry my layer isn't loading - how frustrating. You may be able to see it if you go to Woodland Expansion. Please let me know if you do.

I feel as if I'm getting closer to solving my problem, though I'm still missing something. I tried adding a function to update the multidimensionalDefinition of my mosaicRule but there's still a disconnect somewhere. I feel daft...

I updated my jsfiddle

slider<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="string token">'thumb-change'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'thumb-drag'</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
     <SPAN class="token function">updateDimDef</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">.</SPAN>value<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="keyword token">function</SPAN> <SPAN class="token function">updateDimDef</SPAN><SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
     <SPAN class="keyword token">const</SPAN> mosaicRuleClone <SPAN class="operator token">=</SPAN> mosaicRule<SPAN class="punctuation token">.</SPAN><SPAN class="token function">clone</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// makes clone of mosaicRule</SPAN>
     mosaicRuleClone<SPAN class="punctuation token">.</SPAN>multidimensionalDefinition<SPAN class="punctuation token">.</SPAN>values <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// redefines multiDim value to slider value? </SPAN>
     layer<SPAN class="punctuation token">.</SPAN>mosaicRule <SPAN class="operator token">=</SPAN> mosaicRuleClone<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// assigns mosaicRule to layer again</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>

Thanks again for your help. Truly grateful!

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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