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

Buffer and Select

jaykapalczynski

I am looking for a down and dirty example of taking an XY coordinate from user and running a buffer (set distance), then selecting all the poly features that touch or are within the buffer.....

Any examples out there?

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

jaykapalczynski

Making great progress....will be posting my solution in the next day or so...Undral thank you for your guidance and thoughts....

weird transition from 3.x to 4.x

UndralBatsukh

Make the following change in your code:

featureLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
  geometry<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>center<SPAN class="punctuation token">,</SPAN>
  returnGeometry<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN>
  orderByFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"WMA_Name"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
  distance<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">500</SPAN><SPAN class="punctuation token">,</SPAN>
  units<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"miles"</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>

UndralBatsukh

Yes you should modify the query parameters to meet your needs. So LayerView.queryFeatures() returns features only available for drawing on the client side. If you must query all features in your service then you must use FeatureLayer.queryFeatures() method. This will issue a network request to your service. So you should change your code to use layer.queryFeatures instead of layerView.queryFeatures() method.

I want to point out the following query parameters will create a 10 mile buffer around the view extent. So you need to decide on within 500 miles of what? The view.extent? View center? User defined location? You as a developer need to be responsible for setting the geometry for your query.

layerView<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">queryFeatures</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN>
&nbsp;&nbsp;geometry<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> view<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>extent<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">, view.center? user defined location?</SPAN>
&nbsp;&nbsp;returnGeometry<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">true</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">, => Set to this to false if you do not need geometries</SPAN>
&nbsp;&nbsp;orderByFields<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">[</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">"WMA_Name"</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">],
</SPAN>&nbsp; distance: 10, 
&nbsp; units: "miles"
&nbsp;}<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">);</SPAN>

Also how many features do you have in your service? Querying features within 500 miles sounds like may put strain. When you query features do you need to get geometries? If not, then set your returnGeometry to false. Do you only need certain attributes? Then please specify outFields property on your query parameter.

Take a look at this sample to see how spatial queries work.

jaykapalczynski

instead of view.extent do I need to grab the center of the map or something.

jaykapalczynski

this is what I am doing right now....

When the app loads it is supposed to locate all the WMAs within 500 miles (ridiculous number for testing). BUT it seems to only return what is in the current map view.

THEN when you search an address (Toano, VA) it zooms there and then re-queries and returns the WMAs that are again within 500 miles...but AGAIN it seems to only return within the map view.

If I change the distance to 1 mile or 500 miles I dont get a different return

Trying to figure out what I am doing that is not applying the distance and units parameters...

Edit fiddle - JSFiddle - Code Playground

UndralBatsukh

In your first section, all you have to add is distance and units to your query parameter. FeatureLayer.queryFeatures() accepts query parameter. As I pointed above, you can specify distance and units on your query.

layerView<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN><SPAN class="" style="color: #d74444; border: 0px; font-weight: inherit;">queryFeatures</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">(</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN>
&nbsp;&nbsp;geometry<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> view<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">.</SPAN>extent<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN>
&nbsp;&nbsp;returnGeometry<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #0077aa; border: 0px; font-weight: inherit;">true</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">,</SPAN>
&nbsp;&nbsp;orderByFields<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">[</SPAN><SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">"WMA_Name"</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">],
</SPAN>  distance: 10, 
  units: "miles"
&nbsp;}<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">);</SPAN>

Is this what you are referring to?

jaykapalczynski

I am shuffling a couple different approaches here....and getting very confused....I thank you for your patience...

My problem is I cannot combine the two solutions. I have below....I want to use the first below but need a way to specify the distance....I cant figure that part out....combining the two solutions.

I do not want to drive this from a map click....

This example works well with the geocoder where I can type in an address and when the map zooms it queries the features in the maps extent. OR I can simply pan the map and it reruns the query...

This gives me a list of the features in the map that I can interact with....

If I can just set a parameter here I would be all set.

ISSUES: I need to specify the distance in miles. I cannot figure that out.

    view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<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>

        <SPAN class="comment token">// wait for the layer view to finish updating</SPAN>

        layerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                <SPAN class="comment token">// query all the features available for drawing.</SPAN>
                layerView
                    <SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                        geometry<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">,</SPAN>
                        returnGeometry<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                        orderByFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"WMA_Name"</SPAN><SPAN class="punctuation token">]</SPAN>
                    <SPAN class="punctuation token">}</SPAN><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>results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        graphics <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>
                        <SPAN class="keyword token">const</SPAN> fragment <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createDocumentFragment</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="keyword token">var</SPAN> nameArray <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">]</SPAN>
                        graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">,</SPAN> index<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                            <SPAN class="keyword token">const</SPAN> attributes <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">;</SPAN>
                            <SPAN class="keyword token">const</SPAN> name <SPAN class="operator token">=</SPAN> attributes<SPAN class="punctuation token">.</SPAN>WMA_NAME<SPAN class="punctuation token">;</SPAN>

                            nameArray<SPAN class="punctuation token">.</SPAN><SPAN class="token function">push</SPAN><SPAN class="punctuation token">(</SPAN>name<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                            <SPAN class="comment token">// Create a list zip codes in NY</SPAN>
                            <SPAN class="keyword token">const</SPAN> li <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"li"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                            li<SPAN class="punctuation token">.</SPAN>classList<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"panel-result"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                            li<SPAN class="punctuation token">.</SPAN>tabIndex <SPAN class="operator token">=</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
                            li<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setAttribute</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"data-result-id"</SPAN><SPAN class="punctuation token">,</SPAN> index<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                            li<SPAN class="punctuation token">.</SPAN>textContent <SPAN class="operator token">=</SPAN> name<SPAN class="punctuation token">;</SPAN>

                            fragment<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>li<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="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"WMAs: "</SPAN> <SPAN class="operator token">+</SPAN> nameArray<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="comment token">// Empty the current list</SPAN>
                        listNode<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN>
                        listNode<SPAN class="punctuation token">.</SPAN><SPAN class="token function">appendChild</SPAN><SPAN class="punctuation token">(</SPAN>fragment<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">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">error</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"query failed: "</SPAN><SPAN class="punctuation token">,</SPAN> error<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                        <SPAN class="comment token">//alert("query failed: ", error);</SPAN>
                    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

            <SPAN class="punctuation token">}</SPAN>  <SPAN class="comment token">// END OF VALUE ABOVE</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// END OF LAYER WATCH</SPAN>

        watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>val<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="comment token">// Query layer view statistics as the user clicks</SPAN>
            <SPAN class="comment token">// or drags the pointer across the view.</SPAN>
            <SPAN class="comment token">//view.on(["click", "drag"], function (event) {                    </SPAN>
            view<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">"click"</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="comment token">// disables navigation by pointer drag</SPAN>
                event<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><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="punctuation token">;</SPAN>  <SPAN class="comment token">// END OF VIEW ON CLICK</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>  <SPAN class="comment token">// END OF WATCH UTILS</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>‍</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><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>

2nd Solution

I can use a view Map Click as such and specify the distance like the below

        view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"click"</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="keyword token">var</SPAN> query <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
            query<SPAN class="punctuation token">.</SPAN>geometry <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">;</SPAN>  <SPAN class="comment token">// obtained from a view click event</SPAN>
            query<SPAN class="punctuation token">.</SPAN>distance <SPAN class="operator token">=</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">;</SPAN>
            query<SPAN class="punctuation token">.</SPAN>units <SPAN class="operator token">=</SPAN> <SPAN class="string token">"miles"</SPAN><SPAN class="punctuation token">;</SPAN>
            query<SPAN class="punctuation token">.</SPAN>spatialRelationship <SPAN class="operator token">=</SPAN> <SPAN class="string token">"intersects"</SPAN><SPAN class="punctuation token">;</SPAN>

            view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>featureLayer<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>
                watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenNotOnce</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"updating"</SPAN><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><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="keyword token">return</SPAN> layerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryObjectIds</SPAN><SPAN class="punctuation token">(</SPAN>query<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="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN>ids<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                        <SPAN class="comment token">//console.log(ids);  // prints the ids of the client-side </SPAN>
                        <SPAN class="token function">alert</SPAN><SPAN class="punctuation token">(</SPAN>ids<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="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="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>

UndralBatsukh

HI there,

Please take your time looking at the sample code and its description. Also the SDK documents.

FeatureLayerView | ArcGIS API for JavaScript 4.14

The sample I provided above does query features within one mile of cursor location as shown below. You can also adjust the function (queryStatsOnDrag) that is called from view's click event to be called whenever user searches for address.

 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>
            watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenFalseOnce</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>val<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="comment token">// Query layer view statistics as the user clicks</SPAN>
              <SPAN class="comment token">// or drags the pointer across the view.</SPAN>
              view<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">"click"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"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="comment token">// disables navigation by pointer drag</SPAN>
                event<SPAN class="punctuation token">.</SPAN><SPAN class="token function">stopPropagation</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
                <SPAN class="token function">queryStatsOnDrag</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">,</SPAN> event<SPAN class="punctuation token">)</SPAN>
                  <SPAN class="punctuation token">.</SPAN><SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN>updateCharts<SPAN class="punctuation token">)</SPAN>
                  <SPAN class="punctuation token">.</SPAN><SPAN class="keyword token">catch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN>error<SPAN class="punctuation token">.</SPAN>name <SPAN class="operator token">!==</SPAN> <SPAN class="string token">"AbortError"</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                      console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">error</SPAN><SPAN class="punctuation token">(</SPAN>error<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="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="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="comment token">// query set when user clicks on the view or drag </SPAN>
<SPAN class="keyword token">const</SPAN> query <SPAN class="operator token">=</SPAN> layerView<SPAN class="punctuation token">.</SPAN>layer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createQuery</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
query<SPAN class="punctuation token">.</SPAN>geometry <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">toMap</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// converts the screen point to a map point</SPAN>
query<SPAN class="punctuation token">.</SPAN>distance <SPAN class="operator token">=</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// queries all features within 1 mile of the point</SPAN>
query<SPAN class="punctuation token">.</SPAN>units <SPAN class="operator token">=</SPAN> <SPAN class="string token">"miles"</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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

jaykapalczynski

I am doing this....is there a way to set a parameter to query in miles and not the view extent\

Where can I find a list of the available parameters for the .queryFeatures?

          layerView<SPAN class="punctuation token">.</SPAN><SPAN class="token function">watch</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"updating"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
            <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>value<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
              <SPAN class="comment token">// query all the features available for drawing.</SPAN>
              layerView
                <SPAN class="punctuation token">.</SPAN><SPAN class="token function">queryFeatures</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
                  geometry<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">.</SPAN>extent<SPAN class="punctuation token">,</SPAN>
                  returnGeometry<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN><SPAN class="punctuation token">,</SPAN>
                  orderByFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"WMA_Name"</SPAN><SPAN class="punctuation token">]</SPAN>
                <SPAN class="punctuation token">}</SPAN><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>results<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                  graphics <SPAN class="operator token">=</SPAN> results<SPAN class="punctuation token">.</SPAN>features<SPAN class="punctuation token">;</SPAN>

                  <SPAN class="keyword token">const</SPAN> fragment <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createDocumentFragment</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

                  graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">forEach</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>result<SPAN class="punctuation token">,</SPAN> index<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
                    <SPAN class="keyword token">const</SPAN> attributes <SPAN class="operator token">=</SPAN> result<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">;</SPAN>
                    <SPAN class="keyword token">const</SPAN> name <SPAN class="operator token">=</SPAN> attributes<SPAN class="punctuation token">.</SPAN>WMA_NAME<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>

jaykapalczynski

This seems more logical BUT what I need is two fold...

I want to retain the map click

But I also want the user to type in an address, geocode it and use those XY coordinates

So they can click and it does its thing.

Or they can choose to type in an address and wuen they choose which one they want it automatically zooms to that location and uses that XY to fuel the query.

Thoughts on how to add that? Can I just push an XY location here?

query.geometry = view.toMap(event);

If so what would the syntax look like?

EDIT: Second question.... how do I remove the web map stuff....I want to use a straight feature layer RestEP

UndralBatsukh

Hi there,

You can achieve this by running a query by distance which does not involve geometryEngine which can be heavy to load.

Please take a look at the following SDK doc and samples how to query features by distance (in essence select features by buffer).

Query | ArcGIS API for JavaScript 4.14

Query statistics client-side by distance | ArcGIS API for JavaScript 4.14

-Undral

Noah Sager

Here are some useful samples:

GeometryEngine - geodesic buffers | ArcGIS API for JavaScript 4.14

FeatureLayerView - query statistics by geometry | ArcGIS API for JavaScript 4.14

Nimm an der Unterhaltung 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.