Refreshing Feature Layer after changing source graphics

3968
7
01-18-2017 11:09 PM
GeraldOyudo
New Contributor

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.

0 Kudos
7 Replies
FC_Basson
MVP Regular Contributor

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

0 Kudos
GeraldOyudo
New Contributor

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.

0 Kudos
TobySemroc
New Contributor

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

0 Kudos
KenBuja
MVP Esteemed Contributor

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.

ShefaliMantri
New Contributor III

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.

0 Kudos
MarcoFlier1
New Contributor

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

this.layer.applyEdits({
      addFeatures: [...graphics]
});
0 Kudos
LoriMcCormack1
New Contributor III

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: "<b>Received Date:</b> {ReceivedDate}" +
                        "<br/><b>Routed To:</b> {RoutedTo}" +
                        "<br/><b>Request Type:</b> {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: "<b>Received Date:</b> {ReceivedDate}" +
                            "<br/><b>Routed To:</b> {RoutedTo}" +
                            "<br/><b>Request Type:</b> {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);

 

0 Kudos