topic Re: Refreshing Feature Layer after changing source graphics in ArcGIS JavaScript Maps SDK Questions

Refreshing Feature Layer after changing source graphics

GeraldOyudo — Thu, 19 Jan 2017 07:09:34 GMT

Hello Guys,

I am using Feature Layer on a MapView and I am to implement lazy loading of items to display on the map. So items only get returned from the server if their location lies in the extent of the map. I need a way to replace the source graphics with a new one when the user pans the map. I have tried the following:

1. Changing the source property of the map and calling layer.refresh(). The properties are updated but graphics are not visible, only those from the initial load.

2. Creating a new layer entirely and removing the existing layer - the same effect as (1)

I am listening to the view.extent property and chaining the events to an rxjs subject (which is later subscribed to by an observable, debouncing to ensure that it doesnt get swamped with requests).

self.view.watch("extent", function(extent){
self.extentTerms.next(extent);
})

Once the items are generated, I call the generateGraphics method and generateLayers method

private generateGraphics(donors: Donor[]){
console.log('donors in extent');
console.log(donors);
return donors.map((donor) => {
return {
geometry: new Point({
x: ...,
y: ..
           }),
         attributes: {
            id:. ...,
            email: ....,
            phone: ....,
            ....
            }
            };
         });
}

private generateLayer(graphics: any): any{
      console.log(graphics);
      if(this.layer){
      this._mapService.map.remove(this.layer);
      this.layer.source = graphics;
       console.log(this.layer);
      this._mapService.map.add(this.layer);
}else{
      this.layer = new FeatureLayer({
      source: graphics,
      fields: FIELDS,
      objectIdField: "id",
      renderer: donorMapRenderer,
      spatialReference: {
            wkid: 4326
         },
      geometryType: "point",
      popupTemplate: P_TEMPLATE,
      elevationInfo: { mode: "absolute-height" }
      });
      this._mapService.map.add(this.layer);
}

console.log("returning");
return this.view;
}

How do I achieve this?

Thanks.

Re: Refreshing Feature Layer after changing source graphics

FC_Basson — Thu, 19 Jan 2017 09:59:31 GMT

Can you show some code to indicate how you are handling the pan event and setting the Feature Layer source?

Re: Refreshing Feature Layer after changing source graphics

GeraldOyudo — Thu, 19 Jan 2017 10:51:25 GMT

Thank you for your reply,

I have edited the post with a snippet of the code that creates the Feature layer. This is my first post, I apologize if the code is not so readable. I tried removing the layer if it existed here. In my previous attempt, I just changed the source property and called the refresh method. still nothing happened.

Re: Refreshing Feature Layer after changing source graphics

TobySemroc — Fri, 01 Dec 2017 23:44:38 GMT

Were you ever able to figure this out? I'm having the same issue - not able to update the graphic collection in my featurelayer.

Re: Refreshing Feature Layer after changing source graphics

KenBuja — Thu, 14 Dec 2017 21:13:09 GMT

Added in version 4.6:

Most layers now can be refreshed in 2D MapViews by setting refreshInterval property or by calling refresh() method on it.

Re: Refreshing Feature Layer after changing source graphics

MarcoFlier1 — Thu, 01 Aug 2019 07:29:59 GMT

using the applyEdits function on de layer worked for me..

this.layer.applyEdits({

addFeatures: [...graphics]

});

Re: Refreshing Feature Layer after changing source graphics

ShefaliMantri — Wed, 26 Aug 2020 06:29:42 GMT

Refresh method refreshed the layer but pop up content not change if it's open(in arcgis API 4.13) and the feature is still visible on the map if it is deleted. So without reopening the popup how to update its content and remove feature from map.

Re: Refreshing Feature Layer after changing source graphics

LoriMcCormack1 — Mon, 18 Oct 2021 21:27:21 GMT

I created an empty feature class so that I could add it to my Legend once populated with my graphics layer that I create dynamically based on a user's filter selections. My graphics features change, but what the map doesn't change; only the initial features display on the map. How can I get my renderer to refresh, so to speak? I tried layer.refresh(), but it doesn't do anything.

// renderer for feature class let rendererPoint = { type: "unique-value", // autocasts as new UniqueValueRenderer() field: "TextColor", field2: "RequestRead", field3: "Completed", fieldDelimiter: ", ", // comma + space used to separate values from all fields legendOptions: { title: "RFI Requests" }, defaultSymbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() //color: "white", style: "circle", size: "18px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 0], // yellow outline width: 2 } }, defaultLabel: "Completed", uniqueValueInfos: [{ // All features with value of "Red" are Urgent value: "Red, False, False", label: "Urgent (Unread)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#ff0040", style: "square", size: "14px", outline: { // autocasts as new SimpleLineSymbol() color: [0, 0, 0], width: 2 } } }, { // All features with value of "Green" are Contact Requested value: "Green, False, False", label: "Contact Requested (Unread)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#7fff00", style: "square", size: "14px", outline: { // autocasts as new SimpleLineSymbol() color: [0, 0, 0], width: 2 } } }, { // All features with value of "Normal" are Normal value: "Black, False, False", label: "Normal (Unread)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#0000e6", // blue style: "square", size: "14px", outline: { // autocasts as new SimpleLineSymbol() color: [0, 0, 0], width: 2 } } }, { // All features with value of "Red" are Urgent value: "Red, True, False", label: "Urgent (Read)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#ff0040", style: "diamond", size: "18px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 2 } } }, { // All features with value of "Green" are Contact Requested value: "Green, True, False", label: "Contact Requested (Read)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#7fff00", style: "diamond", size: "18px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 2 } } }, { // All features with value of "Normal" are Normal value: "Black, True, False", label: "Normal (Read)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#0000e6", // blue style: "diamond", size: "18px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 255], width: 2 } } }, { // All features with value of "Red" are Urgent value: "Red, True, True", label: "Urgent (Read)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#ff0040", style: "circle", size: "18px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 0], // yellow outline width: 2 } } }, { // All features with value of "Green" are Contact Requested value: "Green, True, True", label: "Contact Requested (Read)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#7fff00", style: "circle", size: "18px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 0], // yellow outline width: 2 } } }, { // All features with value of "Normal" are Normal value: "Black, True, True", label: "Normal (Read)", symbol: { type: "simple-marker", // autocasts as new SimpleMarkerSymbol() color: "#0000e6", // blue style: "circle", size: "18px", outline: { // autocasts as new SimpleLineSymbol() color: [255, 255, 0], // yellow outline width: 2 } } }] }; // create empty FeatureLayer let lyrRFIRequests = new FeatureLayer({ // create an instance of esri/layers/support/Field for each field object title: "RFI Requests", fields: [ { name: "OBJECTID", alias: "ObjectID", type: "oid" }, { name: "RequestID", alias: "RequestID", type: "string" }, { name: "RequestType", alias: "RequestType", type: "string" }, { name: "ReceivedDate", alias: "ReceivedDate", type: "string" }, { name: "RoutedTo", alias: "RoutedTo", type: "string" }, { name: "TextColor", alias: "TextColor", type: "string" }, { name: "RequestRead", alias: "RequestRead", type: "string" }, { name: "Completed", alias: "Completed", type: "string" } ], objectIdField: "OBJECTID", geometryType: "point", spatialReference: { wkid: 3857 }, //source: graphicsLayerRFIRequests.graphics, renderer: rendererPoint, popupTemplate: { // autocasts as new PopupTemplate() title: "RFI Request ID: {RequestID}", content: "Received Date: {ReceivedDate}" + " Routed To: {RoutedTo}" + " Request Type: {RequestType}", actions: [lookupRFIAction] } }); //function that creates graphic point function plotRFIpoints(paramItem, paramRecCount) { var rec = paramItem.split("||"); var requestsPoint = { type: "point", // autocasts as new Point() x: parseFloat(rec[16]), y: parseFloat(rec[15]), spatialReference: new SpatialReference({ wkid: 3857 }) }; var myRequestID = rec[0].toString(); var myCompletedDate = rec[8]; var myReceivedDate = ""; if (rec[5].length !== 0) { myReceivedDate = rec[5].toString(); } var myAttributes = { "ObjectID": paramRecCount, "RequestID": myRequestID, "RequestType": rec[2], "ReceivedDate": myReceivedDate, "RoutedTo": rec[11], "TextColor": rec[13], "RequestRead": rec[14], "Completed": "False" } // if completed, set outline to yellow and shape to round if (myCompletedDate.length !== 0) { myAttributes.Completed = "True"; } // Create a graphic and add the geometry and symbol to it var pointGraphicRequests = new Graphic({ geometry: requestsPoint, //symbol: markerSymbolRequests, attributes: myAttributes, popupTemplate: { // autocasts as new PopupTemplate() title: "RFI Request ID: {RequestID}", content: "Received Date: {ReceivedDate}" + " Routed To: {RoutedTo}" + " Request Type: {RequestType}", actions: [lookupRFIAction] } }); graphicsLayerRFIRequests.add(pointGraphicRequests); } // end function plotRFIpoints() // after all the points are plotted using the plotRFIpoints() function, then // reset layer source and refresh lyrRFIRequests.source = graphicsLayerRFIRequests.graphics; lyrRFIRequests.refresh(); map.remove(lyrRFIRequests); map.add(lyrRFIRequests);

lyrRFIRequests.source = graphicsLayerRFIRequests.graphics;
lyrRFIRequests.refresh();
map.remove(lyrRFIRequests);
map.add(lyrRFIRequests);