- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Refreshing Feature Layer after changing source gra...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Refreshing Feature Layer after changing source graphics
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Can you show some code to indicate how you are handling the pan event and setting the Feature Layer source?
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Were you ever able to figure this out? I'm having the same issue - not able to update the graphic collection in my featurelayer.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Added in version 4.6:
Most layers now can be refreshed in 2D MapViews by setting
refreshIntervalproperty or by callingrefresh()method on it.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
using the applyEdits function on de layer worked for me..
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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);
