topic How to add new graphics to an existing FeatureLayer? in ArcGIS JavaScript Maps SDK Questions

How to add new graphics to an existing FeatureLayer?

FaisalMushtaq — Fri, 10 Dec 2021 22:34:35 GMT

I am trying to plot some GPS points data in form of markers on map.

After the map is rendered, I add a FeatureLayer onto map and in that the markers are added as graphics.

<script>    require([      "esri/views/MapView",      "esri/Map",      "esri/layers/FeatureLayer",      "esri/layers/support/Field",      "esri/geometry/Point",      "esri/renderers/SimpleRenderer",      "esri/symbols/SimpleMarkerSymbol",      "dojo/dom",      "dojo/on",      "dojo/domReady!"    ], function(MapView, Map, FeatureLayer, Field, Point,      SimpleRenderer, SimpleMarkerSymbol,      dom, on     ) {       var lyr, legend;        var data; var graphics;       /**************************************************        * Define the specification for each field to create        * in the layer        **************************************************/       var fields = [      {        name: "ObjectID",        alias: "ObjectID",        type: "oid"      }, {        name: "name",        alias: "name",        type: "string"      },      {        name: "lat",        alias: "lat",        type: "number"      },      {        name: "lng",        alias: "lng",        type: "number"      }];        /**************************************************        * Create the map and view        **************************************************/       var map = new Map({        basemap: "streets",        ground: "world-elevation"      });       // Create MapView      var view = new MapView({        container: "viewDiv",        map: map,        center: [-73.994909, 40.739041],        zoom: 14      });        var pointsRenderer = new SimpleRenderer({        symbol: new SimpleMarkerSymbol({          style: "circle",          size: 20,          color: [211, 255, 0, 0],          outline: {            width: 1,            color: "#FF0055",            style: "solid"          }        })               });       view.then(function() {        // Request the earthquake data from USGS when the view resolves        data = getData();        graphics = createGraphics(data); // then send it to the createGraphics() method        lyr = createLayer(graphics); // when graphics are created, create the layer         // The following does not work as expected:        view.whenLayerView(lyr).then(function(lyrView){          lyrView.applyEdits({            addFeatures: [{            geometry: new Point({              x: -73.983013,              y: 40.741236            }),            // select only the attributes you care about            attributes: {              ObjectID: 4,              name: "Unit-4",              lat: 40.741236,              lng: -73.983013            }          }]            })        });        });       // Request the earthquake data      function getData() {         return [{          ObjectID: 1,          name: "Unit-1",          lat: 40.739041,          lng: -73.994909        },        {          ObjectID: 2,          name: "Unit-2",          lat: 40.742102,          lng: -73.985043        },        {          ObjectID: 3,          name: "Unit-3",          lat: 40.742856,          lng: -73.984965        }];      }       /**************************************************        * Create graphics with returned geojson data        **************************************************/       function createGraphics(response) {        // raw GeoJSON data        var geoJson = response;         // Create an array of Graphics from each GeoJSON feature        return geoJson.map(function(m, i) {          return {            geometry: new Point({              x: m.lng,              y: m.lat             }),            // select only the attributes you care about            attributes: {              ObjectID: i,              name: m.name,              lat: m.lat,              lng: m.lng             }          };        });      }       /**************************************************        * Create a FeatureLayer with the array of graphics        **************************************************/       function createLayer(graphics) {         var layer = new FeatureLayer({          source: graphics, // autocast as an array of esri/Graphic          // create an instance of esri/layers/support/Field for each field object          fields: fields, // This is required when creating a layer from Graphics          objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics          renderer: pointsRenderer, // set the visualization on the layer          spatialReference: {            wkid: 4326          },          geometryType: "point" // Must be set when creating a layer from Graphics        });         map.add(layer);        return layer;      }       });  </script>



The fourth point/graphic that I am trying to add after the layer has once been added to map, is not showing up on map, although no error shows when I run this code. See the line with the comment "// The following does not work as expected:"
So my question is, How can I add new graphics on an ArcGIS map on an existing Feature Layer?
Here is the complete code JSBin:

Re: How to add new graphics to an existing FeatureLayer?

RobertScheitlin__GISP — Fri, 10 Dec 2021 22:34:38 GMT

Faisal,

When creating a FL from client side graphics you don't use applyEdits you just add the graphic to the FL source collection:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="[Create a FeatureLayer with client side graphics - 4.3]">
  <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the layers-featurelayer-collection sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/layers-featurelayer-collection/index.html
  -->
<title>Create a FeatureLayer with client side graphics - 4.3</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

    #infoDiv {
      position: absolute;
      bottom: 15px;
      right: 0;
      max-height: 80%;
      max-width: 300px;
      background-color: black;
      padding: 8px;
      border-top-left-radius: 5px;
      color: white;
      opacity: 0.8;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
  <script src="https://js.arcgis.com/4.3/"></script>

  <script>
    require([
      "esri/views/MapView",
      "esri/Map",
      "esri/layers/FeatureLayer",
      "esri/layers/support/Field",
      "esri/geometry/Point",
      "esri/renderers/SimpleRenderer",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/dom",
      "dojo/on",
      "dojo/domReady!"
    ], function(MapView, Map, FeatureLayer, Field, Point,
      SimpleRenderer, SimpleMarkerSymbol,
      dom, on
    ) {

      var lyr, legend;
      var data; var graphics;

      /**************************************************
       * Define the specification for each field to create
       * in the layer
       **************************************************/

      var fields = [
      {
        name: "ObjectID",
        alias: "ObjectID",
        type: "oid"
      }, {
        name: "name",
        alias: "name",
        type: "string"
      },
      {
        name: "lat",
        alias: "lat",
        type: "number"
      },
      {
        name: "lng",
        alias: "lng",
        type: "number"
      }];


      /**************************************************
       * Create the map and view
       **************************************************/

      var map = new Map({
        basemap: "streets",
        ground: "world-elevation"
      });

      // Create MapView
      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-73.994909, 40.739041],
        zoom: 14
      });


      var pointsRenderer = new SimpleRenderer({
        symbol: new SimpleMarkerSymbol({
          style: "circle",
          size: 20,
          color: [211, 255, 0, 0],
          outline: {
            width: 1,
            color: "#FF0055",
            style: "solid"
          }
        })
      });

      view.then(function() {
        // Request the earthquake data from USGS when the view resolves
        data = getData();
        graphics = createGraphics(data); // then send it to the createGraphics() method
        lyr = createLayer(graphics); // when graphics are created, create the layer
        lyr.source.add({
            geometry: new Point({
              x: -73.983013,
              y: 40.741236
            }),
            // select only the attributes you care about
            attributes: {
              ObjectID: 4,
              name: "Unit-4",
              lat: 40.741236,
              lng: -73.983013
            }
        });
      });

      // Request the earthquake data
      function getData() {
        return [{
          ObjectID: 1,
          name: "Unit-1",
          lat: 40.739041,
          lng: -73.994909
        },
        {
          ObjectID: 2,
          name: "Unit-2",
          lat: 40.742102,
          lng: -73.985043
        },
        {
          ObjectID: 3,
          name: "Unit-3",
          lat: 40.742856,
          lng: -73.984965
        }];
      }

      /**************************************************
       * Create graphics with returned geojson data
       **************************************************/
      function createGraphics(response) {
        // raw GeoJSON data
        var geoJson = response;

        // Create an array of Graphics from each GeoJSON feature
        return geoJson.map(function(m, i) {
          return {
            geometry: new Point({
              x: m.lng,
              y: m.lat
            }),
            // select only the attributes you care about
            attributes: {
              ObjectID: i,
              name: m.name,
              lat: m.lat,
              lng: m.lng
            }
          };
        });
      }

      /**************************************************
       * Create a FeatureLayer with the array of graphics
       **************************************************/
      function createLayer(graphics) {
        var layer = new FeatureLayer({
          supportsEditing: true,
          supportsAdd: true,
          source: graphics, // autocast as an array of esri/Graphic
          // create an instance of esri/layers/support/Field for each field object
          fields: fields, // This is required when creating a layer from Graphics
          objectIdField: "ObjectID", // This must be defined when creating a layer from Graphics
          renderer: pointsRenderer, // set the visualization on the layer
          spatialReference: {
            wkid: 4326
          },
          geometryType: "point" // Must be set when creating a layer from Graphics
        });

        map.add(layer);
        return layer;
      }
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
  <div id="infoDiv">
    <h2>Sample Points on ArcGIS Map</h2>
  </div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How to add new graphics to an existing FeatureLayer?

FaisalMushtaq — Fri, 12 May 2017 12:27:47 GMT

Thanks for the help. Will check it

Re: How to add new graphics to an existing FeatureLayer?

RobertScheitlin__GISP — Fri, 12 May 2017 12:52:01 GMT

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