topic Re: Recommended pattern for updating layer data in ArcGIS JavaScript Maps SDK Questions

Recommended pattern for updating layer data

yangwen — Tue, 19 Dec 2017 02:25:49 GMT

Background: My map is created by instantiating feature layers via the API. I'm not interfacing with an ArcGIS MapServer directly.

For my map's layers, I have a need to update the attributes associated with each geometry in the layer. The reason is the attribute data determines the color of each geometry's symbol. So imagine an update mechanism that gets the latest attribute values from the server.

Right now, I have a fairly crude async timer that periodically does the following actions to remove existing layers, and then instantiates new layers using the updated data (layersData)

this.map.layers.removeAll();

this.addDataToMap(layersData, this.map);

While this works, I end up with a quick flash of the plotted symbols whenever the layers get removed and re-added. Is there another pattern allowable by the JS API that allows more seamless update/replacement of active layers?

One thing to note, the plotted graphics may not all have unique ids. So this makes a delta detection approach problematic. I basically just want a way to replace the existing layers with new layers, without a UI reflow of the empty layers state. Thanks

Re: Recommended pattern for updating layer data

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:32:29 GMT

Yang,

If you continue with your current workflow of removing the layer and adding a new layer back you will never get rid of the flash. The better approach is to use a FeatureLayer from a Collection and clear the layer each time a new request is made for the data and re add the new graphics to the FeatureLayer each refresh of your attributes.

I use this approach in my apps where the data is not coming from ArcGIS Server.

//Example featureCollection    
      featureCollection = {
        "layerDefinition": null,
        "featureSet": {
          "features": [],
          "geometryType": "esriGeometryPoint"
        }
      }
//example featureCollection layerDefinition
    featureCollection.layerDefinition = {
      "geometryType": "esriGeometryPoint",
      "objectIdField": "ObjectID",
      "drawingInfo": {
        "renderer": {
          "type": "simple",
          "symbol": {
            "type": "esriPMS",
            "url": "images/i_unit3.png",
            "contentType": "image/png",
            "width": 60 * 72 / 96,
            "height": 29 * 72 / 96
          }
        }
      },
      "fields": [{
        "name": "ObjectID",
        "alias": "ObjectID",
        "type": "esriFieldTypeOID"
      }, {
        "name": "ID",
        "alias": "ID",
        "type": "esriFieldTypeString"
      }, {
        "name": "UnitID",
        "alias": "Unit ID",
        "type": "esriFieldTypeString"
      }, {
        "name": "Lat",
        "alias": "Latitude",
        "type": "esriFieldTypeDouble"
      }, {
        "name": "Lon",
        "alias": "Longitude",
        "type": "esriFieldTypeDouble"
      }, {
        "name": "Date_Time",
        "alias": "Date Time",
        "type": "esriFieldTypeDate"
      }, {
        "name": "description",
        "alias": "Description",
        "type": "esriFieldTypeString"
      }, {
        "name": "title",
        "alias": "Title",
        "type": "esriFieldTypeString"
      }]
    };

    featureLayer = new FeatureLayer(featureCollection, {
       id: "unitLayer",
       infoTemplate: popupTemplate
    });
    map.addLayer(featureLayer);



//In your update function
featureLayer.clear();

// before your loop of the results
var features = [];

//inside the loop of your results
features.push(graphic);

//After the loop
featureLayer.applyEdits(features, null, null);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Recommended pattern for updating layer data

yangwen — Tue, 19 Dec 2017 05:09:59 GMT

Thanks for reply. You seem to be referencing 3.x JS API. Looking at the 4.x API, I don't see any equivalents methods.. For example,

The 4.x FeatureLayer class does not mention any concept of "clearing" the graphics within the layer. FeatureLayer | API Reference | ArcGIS API for JavaScript 4.6

Re: Recommended pattern for updating layer data

RobertScheitlin__GISP — Tue, 19 Dec 2017 17:24:55 GMT

Yang,

You are correct. My code was for 3.x. I did not see any tags or text in your question where you mentioned 4.x. In 4.x much has changed. The FeatureLayer has a source property which take a collection of graphics. You can add your initial graphics to the source property and then take the FeatureLayer.source.removeAll() to clear and FeatureLayer.source.addMany(arrayOfGraphics) to add new ones.

Re: Recommended pattern for updating layer data

yangwen — Tue, 19 Dec 2017 17:46:25 GMT

Robert, so the way you described for 4.x is almost identical to how I'm doing it, as mentioned in my original post. The only exception is I'm accessing the layers via the map object via map.layers.removeAll(). I assume the way I'm calling removeAll has the same effect as accessing the featurelayer.source.removeAll(). This pattern results in the flashing of symbols due to the empty state between removAll and addMany. I'm trying to avoid this behavior.

Re: Recommended pattern for updating layer data

RobertScheitlin__GISP — Tue, 19 Dec 2017 17:50:52 GMT

Yang,

No they are not similar at all. You are removing the whole layer from the map causing a map refresh I am removing graphics from the FeatureLayer cause a layer to redraw.

Re: Recommended pattern for updating layer data

yangwen — Wed, 20 Dec 2017 18:54:29 GMT

Yes your suggestion worked! thanks

Re: Recommended pattern for updating layer data

RobertScheitlin__GISP — Wed, 20 Dec 2017 19:01:03 GMT

Yang,

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.

Re: Recommended pattern for updating layer data

Anonymous User — Mon, 06 Aug 2018 12:24:53 GMT

Hey Robert!

Would you able to post a "more complete" version of this solution (i.e. the actual update functions // how you're getting the graphic data)?

I have an app that generates an updated json page (url) that is invoked in an ajax dataTable that I'm trying to sync up with the mapping component. Right now my method is:

1. connect to json URL and store the result as response;

2. Use the response's data to create a graphic so the fields map and the geometry fields are specified;

3. Use these graphic to create a new FeatureLayer; and

4. Add that FeatureLayer to the map (i.e. 'map.add(layer); return layer;')

I've tried putting a simple JS setInterval iterator to loop over the whole function, but not having any success with that method. If you could share how you accomplished this (or if I'm missing something) I'd be super appreciative!

Cheers,

Re: Recommended pattern for updating layer data

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:32:32 GMT

Andrew,

My code for this is part of bigger projects each time so it is harder to dissect just the portion you need but here is an attempt.

// the request to the web service
      var requestHandle = esriRequest({
        url: urlstr,
        handleAs: "json",
        timeout: 10000
      }, {
        useProxy: true,
        usePost: false
      });

      requestHandle.then(requestSucceeded, requestFailed);

function requestSucceeded(response, io) {
  try {
    featureLayer.clear();
    var features = [];
    response.forEach(function (unit) {
      var attr = {};
      //code to populate the attributes
      attr.ID = unit.Id;
      attr.Lat = unit.Lat;
      attr.Lon = unit.Lon;
      ....
      var geometry = new Point(unit.Lon, unit.Lat),
        wm = webMercatorUtils.geographicToWebMercator(geometry),
        graphic = new Graphic(wm);
      graphic.setAttributes(attr);
      //make sure we only add the same unit once
      if (uniqueIDs.indexOf(unit.UnitId) === -1) {
        features.push(graphic);
        uniqueIDs.push(unit.UnitId);
        ....
      }
      if(features.length){
        featureLayer.applyEdits(features, null, null);
      }
    }
  }
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Recommended pattern for updating layer data

Anonymous User — Sat, 11 Dec 2021 12:32:35 GMT

Hmmm, seemed to have flipped my problem. I got the updating functionality working on a sample dataset, but now after I've modified my JSON structure (nothing I thought would break it), my app cannot parse the JSON to construct the graphic (and then the feature layer) .

I've attached my JSON (not geoJSON) snippet below:

[  
   {  
      "TechnicianID":"SomeID",
      "TechnicianName":"Mr Man",
      "OrderNumber":"1111111",
      "JobCode":"ABC",
      "State":"NC",
      "StateStart":"12:00:00 AM",
      "StateDuration":"05:0:05",
      "StateDurationSeconds":5,
      "AverageStateDuration":2,
      "Latitude":35,
      "Longitude":-80,
      "Flag":null
   },
   {  
      "TechnicianID":"SomeID2",
      "TechnicianName":"Mr Man2",
      "OrderNumber":"11111112",
      "JobCode":"ABCD",
      "State":"NC",
      "StateStart":"12:00:00 AM",
      "StateDuration":"05:0:05",
      "StateDurationSeconds":5,
      "AverageStateDuration":2,
      "Latitude":35,
      "Longitude":-80,
      "Flag":null
   },
   {  
      "TechnicianID":"SomeID3",
      "TechnicianName":"Mr Man3",
      "OrderNumber":"11111113",
      "JobCode":"ABCE",
      "State":"NC",
      "StateStart":"12:00:00 AM",
      "StateDuration":"05:0:05",
      "StateDurationSeconds":5,
      "AverageStateDuration":2,
      "Latitude":35,
      "Longitude":-80,
      "Flag":null
   }
]‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'm in the Esri JS 4.8 API, if that makes any difference -- any idea how I'd parse this JSON to successfully construct a graphic that could be converted into a FL (for popups)?

Re: Recommended pattern for updating layer data

RobertScheitlin__GISP — Mon, 06 Aug 2018 20:48:33 GMT

Andrew,

You should start a new thread and post the code you are using to get, parse and update your FeatureLayer.