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.
... View more