The slide to adjust the display of points by depth

1864
7
Jump to solution
03-23-2016 02:33 PM
Chang-HengYang
New Contributor III

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

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
SteveCole
Frequent Contributor

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

View solution in original post

0 Kudos
7 Replies
SteveCole
Frequent Contributor

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

Chang-HengYang
New Contributor III

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

0 Kudos
YueWu1
by Esri Regular Contributor
Esri Regular Contributor

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.                   

0 Kudos
BillDaigle
Occasional Contributor III

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();
Chang-HengYang
New Contributor III

Hi Bill,

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

Many Thanks,

Hank

0 Kudos
SteveCole
Frequent Contributor

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

0 Kudos
SteveCole
Frequent Contributor

Bill's example is cleaner.

0 Kudos