AnsweredAssumed Answered

Design Question - Feature Layer Queries on Client-Side?

Question asked by djrpascu on Mar 16, 2017
Latest reply on Mar 17, 2017 by djrpascu

Like • Show 0 Likes0
Comment • 9

I've been using a feature service URL off ArcGIS Online and have a Feature Layer based on that endpoint in my JSAPI 4.2 web application.

I see that anytime I update the definition expression or create a query object it makes a network call to the service.

I wanted to minimize server calls and work with the data on the client so I created a FeatureLayer based on graphics imported from a geojson file (based on one of the examples). Then I learned that query objects off a feature layer does not support where, out fields, etc. Per documentation, only the geometry, objectIDs, and spatialreference should be defined. Similar to using a FeatureLayerView.

I'd like to do things like filtering the features, running queries to produce popups, running statistic queries, etc. on the client, and prevent the server-side call. My question then is, does the API support client-side queries? Am I using the wrong layer, should I be using a GraphicsLayer or some other layer? Or do I need to write my own methods for doing the filtering/querying on client?

Much Thanks!

TSolow-esristaff

Mar 17, 2017 7:41 AM

Correct Answer

You're right, it looks like where is not supported for layerView.queryFeatures.

If you want to query for attributes, one option would be something like:

function queryByAttr(lv: layerView, key: string, value: any):Array<Graphic>{

return layerView.featuresView.graphics.filter(graphic => graphic.attributes && graphic.attributes[key] === value).toArray();

}

There may be an easier way to do this, but that should work. Use layerView.loadedGraphics (instead of featuresView.graphcis) for 3D.

See the reply in context

No one else had this question

Outcomes

rscheitlin

Mar 16, 2017 7:50 PM

Daniel,

Starting a 4.3 the onDemand mode was created. You should try 4.3

Actions

djrpascu @ rscheitlin on Mar 17, 2017 11:10 AM

What is onDemand? I tried searching the 4.3 JavaScript API reference and nothing comes up under "onDemand" or "demand". Also tried searching the FeatureLayer page for both terms, and nothing comes up.

Actions

rscheitlin

@ djrpascu on Mar 17, 2017 11:54 AM

Daniel,

Sorry the onDemand is something that is happening under the hood of the JS API. In 3.x you could set the mode manually but in 4.x this is automatically decided for you based on the data. The more I think about it it has little to do with your question though, so disregard.

Actions

TSolow-esristaff

Mar 17, 2017 6:23 AM

The queryFeatures method might be what you're looking for: FeatureLayer | API Reference | ArcGIS API for JavaScript 4.3

For client-side queries, you would call this on the layerView rather than on the layer itself. To get ahold of the layerView, you can do something like: view.whenLayerView(layer).then(layerView => ...). You could also search the view.layerViews collection for the item whose .layer property matches the layer you're looking for.

In general, you can think of the layerView as the visual representation of the layer in question. Each layer, once added to the map, has a corresponding layerView on the view.

Last time I checked, layerView.queryFeatures is fairly limited in what kinds of spatial queries it supports. I think it only supports extent geometries and the "intersects" spatial relationship. You should be able to query by attributes though.

If you prefer to write your own spatial queries, you have some options. To access a list of all graphics loaded inside a layerView on the client, you can look in: layerView.featuresView.graphics (2D) or layerView.loadedGraphics (3D). These will be collections (Collection | API Reference | ArcGIS API for JavaScript 4.3) which are basically evented arrays (you can convert them to arrays with collection.toArray()). To do the actual spatial queries, the geometryEngine has a lot of helpful methods: geometryEngine | API Reference | ArcGIS API for JavaScript 4.3.

As far as GraphicsLayer vs. FeatureLayer, I would consider using a GraphicsLayer if you want your layer to have features with different geometries and you're not concerned about persisting the layer on a back-end.

2 people found this helpful

Actions

thejus.kambi @ TSolow-esristaff on Mar 17, 2017 7:29 AM

Hello Thomas,

You have mentioned that "You should be able to query by attributes though", how can this be achieved when you cannot use the Query.where?

Actions

TSolow-esristaff

@ thejus.kambi on Mar 17, 2017 7:41 AM

You're right, it looks like where is not supported for layerView.queryFeatures.

If you want to query for attributes, one option would be something like:

function queryByAttr(lv: layerView, key: string, value: any):Array<Graphic>{

return layerView.featuresView.graphics.filter(graphic => graphic.attributes && graphic.attributes[key] === value).toArray();

}

There may be an easier way to do this, but that should work. Use layerView.loadedGraphics (instead of featuresView.graphcis) for 3D.

2 people found this helpful

Actions

djrpascu Mar 17, 2017 12:51 PM

Thanks! This works! Got any insight on how to get this to filter symbols on the map? I tried setting the visible property of the graphic to false, but symbols still show on map. I suspect because the featureLayer is setup.

I need to jump on the Typescript wagon, but here's the JS version for the lazy who have to support IE 11 still.

function queryByAttr(lyrView, key, value) {

return lyrView.featuresView.graphics.filter(function (graphic) { return graphic.attributes && graphic.attributes[key] === value});

}

Thanks again!

Actions

TSolow-esristaff

@ djrpascu on Mar 17, 2017 1:08 PM

It looks like setting graphic.visible works in 3D but not in 2D (4.3).

For 2D, you should try deleting the graphic manually from the featuresView.graphics collection. You can do this with featuresView.graphics.remove(graphic) or featuresView.graphics.removeMany([graphic1, graphic2,..]).

If you plan on re-adding these later, you'll have to store them somewhere and re-add them to the layerView graphics collection later (use collection.add and .addMany).

With this kind of functionality you're getting into GraphicsLayer-type stuff, so you might want to think about using a GraphicsLayer instead, as you initially mentioned. I would say the main advantages of a FeatureLayer is that it has some built-in querying and has some nice methods to help you persist the layer on a back-end. If you're not using these, then a GraphicsLayer may be better.

1 person found this helpful

Actions

djrpascu @ TSolow-esristaff on Mar 17, 2017 1:14 PM

Thanks so much for being so helpful!

Actions

9 Replies

rscheitlin Mar 16, 2017 7:50 PM
Mark Correct
Correct Answer
Daniel,

Starting a 4.3 the onDemand mode was created. You should try 4.3
Like • Show 0 Likes0
Actions
- djrpascu @ rscheitlin on Mar 17, 2017 11:10 AM
  Mark Correct
  Correct Answer
  What is onDemand? I tried searching the 4.3 JavaScript API reference and nothing comes up under "onDemand" or "demand". Also tried searching the FeatureLayer page for both terms, and nothing comes up.
  Like • Show 0 Likes0
  Actions
  - rscheitlin @ djrpascu on Mar 17, 2017 11:54 AM
    Mark Correct
    Correct Answer
    Daniel,
    
    Sorry the onDemand is something that is happening under the hood of the JS API. In 3.x you could set the mode manually but in 4.x this is automatically decided for you based on the data. The more I think about it it has little to do with your question though, so disregard.
    Like • Show 0 Likes0
    Actions
TSolow-esristaff Mar 17, 2017 6:23 AM
Mark Correct
Correct Answer
The queryFeatures method might be what you're looking for: FeatureLayer | API Reference | ArcGIS API for JavaScript 4.3

For client-side queries, you would call this on the layerView rather than on the layer itself. To get ahold of the layerView, you can do something like: view.whenLayerView(layer).then(layerView => ...). You could also search the view.layerViews collection for the item whose .layer property matches the layer you're looking for.

In general, you can think of the layerView as the visual representation of the layer in question. Each layer, once added to the map, has a corresponding layerView on the view.

Last time I checked, layerView.queryFeatures is fairly limited in what kinds of spatial queries it supports. I think it only supports extent geometries and the "intersects" spatial relationship. You should be able to query by attributes though.

If you prefer to write your own spatial queries, you have some options. To access a list of all graphics loaded inside a layerView on the client, you can look in: layerView.featuresView.graphics (2D) or layerView.loadedGraphics (3D). These will be collections (Collection | API Reference | ArcGIS API for JavaScript 4.3) which are basically evented arrays (you can convert them to arrays with collection.toArray()). To do the actual spatial queries, the geometryEngine has a lot of helpful methods: geometryEngine | API Reference | ArcGIS API for JavaScript 4.3.

As far as GraphicsLayer vs. FeatureLayer, I would consider using a GraphicsLayer if you want your layer to have features with different geometries and you're not concerned about persisting the layer on a back-end.
2 people found this helpful
Like • Show 1 Like1
Actions
- thejus.kambi @ TSolow-esristaff on Mar 17, 2017 7:29 AM
  Mark Correct
  Correct Answer
  Hello Thomas,
  
  You have mentioned that "You should be able to query by attributes though", how can this be achieved when you cannot use the Query.where?
  Like • Show 0 Likes0
  Actions
  - TSolow-esristaff @ thejus.kambi on Mar 17, 2017 7:41 AM
    Unmark Correct
    Correct Answer
    You're right, it looks like where is not supported for layerView.queryFeatures.
    
    If you want to query for attributes, one option would be something like:
    
    function queryByAttr(lv: layerView, key: string, value: any):Array<Graphic>{
    return layerView.featuresView.graphics.filter(graphic => graphic.attributes && graphic.attributes[key] === value).toArray();
    }
    
    There may be an easier way to do this, but that should work. Use layerView.loadedGraphics (instead of featuresView.graphcis) for 3D.
    2 people found this helpful
    Like • Show 1 Like1
    Actions
djrpascu Mar 17, 2017 12:51 PM
Mark Correct
Correct Answer
Thanks! This works! Got any insight on how to get this to filter symbols on the map? I tried setting the visible property of the graphic to false, but symbols still show on map. I suspect because the featureLayer is setup.

I need to jump on the Typescript wagon, but here's the JS version for the lazy who have to support IE 11 still.

function queryByAttr(lyrView, key, value) {
return lyrView.featuresView.graphics.filter(function (graphic) { return graphic.attributes && graphic.attributes[key] === value});
}

Thanks again!
Like • Show 0 Likes0
Actions
- TSolow-esristaff @ djrpascu on Mar 17, 2017 1:08 PM
  Mark Correct
  Correct Answer
  It looks like setting graphic.visible works in 3D but not in 2D (4.3).
  
  For 2D, you should try deleting the graphic manually from the featuresView.graphics collection. You can do this with featuresView.graphics.remove(graphic) or featuresView.graphics.removeMany([graphic1, graphic2,..]).
  
  If you plan on re-adding these later, you'll have to store them somewhere and re-add them to the layerView graphics collection later (use collection.add and .addMany).
  
  With this kind of functionality you're getting into GraphicsLayer-type stuff, so you might want to think about using a GraphicsLayer instead, as you initially mentioned. I would say the main advantages of a FeatureLayer is that it has some built-in querying and has some nice methods to help you persist the layer on a back-end. If you're not using these, then a GraphicsLayer may be better.
  1 person found this helpful
  Like • Show 1 Like1
  Actions
  - djrpascu @ TSolow-esristaff on Mar 17, 2017 1:14 PM
    Mark Correct
    Correct Answer
    Thanks so much for being so helpful!
    Like • Show 0 Likes0
    Actions

GeoNet

The Esri Community

Design Question - Feature Layer Queries on Client-Side?

Outcomes

Related Content

Recommended Content

Incoming Links