topic The slide to adjust the display of points by depth in ArcGIS JavaScript Maps SDK Questions

The slide to adjust the display of points by depth

Chang-HengYang — Wed, 23 Mar 2016 21:33:59 GMT

Hi all,

Thank you for your time in advance. I am wondering if I could create a slider to adjust the value in the column "WellDepth" (Please see the attached file) and control the display of point features. I found there is a time slider widget to work on the time-enabled layers. However, I am not sure if it is possible to have a slider to control the display of points by the WellDepth. Could anyone share your valuable opinions?

Thanks,

Hank

Re: The slide to adjust the display of points by depth

SteveCole — Wed, 23 Mar 2016 22:01:52 GMT

So you want to use it to filter values? Something like "show only values with a depth greater/less than X depth"?

You should be able to accomplish this using one of the Dojo Slider widgets (dijit/form/HorizontalSlider) At page load, you could query your point layer to determine the min/max value range is and then adjust the slider's min/max values accordingly.

After that's done, simply tie into the slider's onChange event to retrieve the slider's value and then apply a definition query to the layer based on that (i.e. depth < 200).

Steve

Re: The slide to adjust the display of points by depth

Chang-HengYang — Wed, 23 Mar 2016 22:16:36 GMT

Hi Steve,

Thank you for the valuable opinions. I will follow your instructions to make the codes. I am also wondering if you have found any sample; Therefore, I could follow the codes in the sample.

Many thanks,

Hank

Re: The slide to adjust the display of points by depth

YueWu1 — Wed, 23 Mar 2016 22:28:11 GMT

Hi Yang,

You can take look about this sample Raster layer slider | ArcGIS API for JavaScript

This slider interact with an ImageServiceLayer, however you could take this sample as a reference to give you an idea how to interact with MapServiceLayer or featureLayer

Hope this can help.

Re: The slide to adjust the display of points by depth

BillDaigle — Sat, 11 Dec 2021 07:56:20 GMT

You should be able to something along these lines:

var slider = new HorizontalSlider({
    name: "slider",
    value: 5,
    minimum: 0,
    maximum: 2000,
    intermediateChanges: true,
    style: "width:300px;",
    onChange: function(value){
      var layerDefinitions = [];
      layerDefinitions[0] = "WellDepth > "+value;
      yourMapLayer.setLayerDefinitions(layerDefinitions, false);
    }
}, "slider").startup();

Re: The slide to adjust the display of points by depth

SteveCole — Sat, 11 Dec 2021 07:56:24 GMT

No, unfortunately, it's rare to find a sample that does EXACTLY what you want/need. Usually you need to piece together components of several different things (well, that's my experience).

The way I'd attack this would be to incorporate a Dojo slider widget into your application first. This is a tutorial page on the Dojo site about using the slider. Unless you want to just give the slider a min/max value range upfront, you'll have to figure that out somehow. If you need to do this, use a queryTask on your layer, You might be able to use the statisticDefinition parameter of a QueryTask to help you do this.

Knowing what your new min/max values should be, you alter the value using the attr method of the slider:

theSlider.attr('minimun', theNewMin);
theSlider.attr('maximum', theNewMax);

where theNewMin is your min value and theNewMax is your max value for the slider.

The final piece is to actually filter the data once your user uses the slider. I've done something similar in one of my apps. I have a filteringSelect (combobox) full of date values. Once the user selects a date, a definition query is applied to a layer based on the date selected.

        select.on('change', function(evt) {
                //Need to take into account the GMT time offset
                var theDefExp = "eventDate = Date '" + new Date(evt + 28800000).toLocaleDateString("en-US") + "'";
                repairLayer.setDefinitionExpression(theDefExp);
        });

In the above, my filteringSelect widget's variable is "select" and I'm just tying into the change event of the widget. My featureLayer in this example is repairLayer.

Hope that makes sense.

Steve

Re: The slide to adjust the display of points by depth

SteveCole — Wed, 23 Mar 2016 22:46:24 GMT

Bill's example is cleaner.

Re: The slide to adjust the display of points by depth

Chang-HengYang — Thu, 24 Mar 2016 17:25:38 GMT

Hi Bill,

HooRay!! I wish I could talk to you in the future if I have the questions.

Many Thanks,

Hank