AnsweredAssumed Answered

Refreshing Feature Layer after changing source graphics

Question asked by gerald_oyudo on Jan 18, 2017
Latest reply on Dec 14, 2017 by kenbuja

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.

Outcomes