Updates Graphics(graphicsLayer) to Feature Layer use ApplyEdits

Vakhtang_Zubiashvili · ‎01-24-2020

Hi all,

I have web map with editable featureLayer. After click on my feature i get atrributes (using hitTest), and after click button "Query" query result displays as graphicsLayer and after another click graphic adds to graphicLayer. Idea of doing that is to merge several features in to one feature and update featreLayer after click on button.

Now after click button "Update" i want to update graphicLayer features in my featureLayer, but it does not update.

I paste full code to show how it is done:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>GWP - მილი და სამისამართო ერთეული</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    } 
  </style>
<link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://js.arcgis.com/4.14"></script>
  <script>
    require([
    "esri/Map",
        "esri/widgets/ScaleBar",
        "esri/widgets/Home",
        "esri/widgets/Compass",
        "esri/widgets/BasemapToggle",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/renderers/UniqueValueRenderer",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
        "esri/widgets/BasemapToggle",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/AreaMeasurement2D",
        "esri/widgets/ScaleBar",
        "esri/widgets/Home",
        "esri/widgets/Compass",
        "esri/views/MapView",
        "esri/widgets/Legend",
        "esri/widgets/Expand",
        "esri/layers/GroupLayer",
        "esri/layers/MapImageLayer",
        "esri/widgets/LayerList",
        "esri/layers/FeatureLayer",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Expand",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/widgets/FeatureForm",
        "esri/widgets/FeatureTemplates",
        "esri/geometry/geometryEngine",
        "esri/Graphic",
        "dojo/on",
        "dojo/dom",
        "dojo/dom-construct",
        "dojo/domReady!"
    ], function(
      Map, ScaleBar, Home, Compass, BasemapToggle, SimpleMarkerSymbol, SimpleFillSymbol, SimpleLineSymbol, UniqueValueRenderer, QueryTask, Query, BasemapToggle, DistanceMeasurement2D,
        AreaMeasurement2D, ScaleBar, Home, Compass, MapView,Legend, Expand, GroupLayer, MapImageLayer,
        LayerList,
        FeatureLayer,
        GraphicsLayer,
        Expand,
        SketchViewModel,
        FeatureForm,
        FeatureTemplates,
        geometryEngine,
        Graphic,
        on, dom, domConstruct
    ) {
      let editFeature, highlight;

      var fLpolygonSymbol = {
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        color: "yellow",
        style: "solid",
        outline: {
          color: "red",
          width: 1
        }
      };

      const featureLayer = new FeatureLayer({
          url:
            "http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0",
          title:"",
          outFields: ["*"],
          popupEnabled: false,
          id: "incidentsLayer",   
          listMode: "hide",
          legendEnabled: false
        });
        // GraphicsLayer to hold graphics created via sketch view model
      const graphicsLayer = new GraphicsLayer({
        id: "tempGraphics",
        listMode: "hide"
          });
    const labelClass = {
          // autocasts as new LabelClass()
          symbol: {
            type: "text", // autocasts as new TextSymbol()
            color: "black",
            haloColor: "black",
            font: {
              // autocast as new Font()
              family: "sans-serif",
              size: 8,
              weight: "bold"
            }
          },
          labelPlacement: "center-along",
          labelExpressionInfo: {
          expression: "$feature.g_dasaxeleba_ka"
  }
      };

      var renderer = {
        type: "simple", // autocasts as new SimpleRenderer()
             symbol: {
                 type: "simple-fill", // autocasts as new SimpleFillSymbol()
                 style: "none",
              outline: {
      // makes the outlines of all features consistently light gray
      color: "grey",
      width: 0.5
     }
   }
 };
 layer2popup =  {
      title: "ქუჩა",
      content: [{
         type: "fields",
         fieldInfos: [{
           fieldName: "g_dasaxeleba_ka",
            label: "ქუჩის დასახელება",
           visible: true
         },{
          fieldName: "SE_ID_new",
            label: "SE ID new",
           visible: true
         },
         {
          fieldName: "zd_donis_ID",
            label: "ზედა ზონის ID",
           visible: true
         }]
     }]  
    }


      var layer2 = new FeatureLayer({
        url: "http://localhost:6080/arcgis/rest/services/test/Tbilisi_wyalmomarageba_vaxo/MapServer/15",
        title: "სამისამართო ერთეული",
        popupTemplate: layer2popup,
        popupEnabled: false,
        outFields: ["*"],
        labelingInfo: [labelClass],
        renderer: renderer
      });
       //saZiebo sistema
        var HWUrl =       "http://10.0.251.179:6080/arcgis/rest/services/test/Tbilisi_wyalmomarageba_vaxo/MapServer/15";
        // magistraluri arxi
        var HWLayer = new FeatureLayer({
          url: HWUrl,
          outFields: ["*"],
          visible: false
        });
           /*
        // GraphicsLayer for displaying results
        var resultsLayer = new GraphicsLayer({
          title: "ძიების რეზულტატი"   
        });
     */
      var map = new Map({
        basemap: "osm",
        layers: [layer2, featureLayer, graphicsLayer]
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [44.7502, 41.725524],
          zoom: 12,
          highlightOptions: {
            color: "red"
          } 
      });
       // Double-Click-ზე Zoom შეჩერება
      view.on("double-click", function(evt) {
      evt.stopPropagation();
      console.info(evt);
      });
       // Add a basemap toggle widget to toggle between basemaps
       var toggle = new BasemapToggle({
            titleVisible: true,
            view: view,
            nextBasemap: "satellite"
          });
        // Toggle რუკისთვის
        view.ui.add(toggle, "top-left");
  // Click-ზე graphicsLayer შექმნა და მისი რუკაზე დამატება

        view.on("click", function (event) {
               // Search for graphics at the clicked location. View events can be used
                // as screen locations as they expose an x,y coordinate that conforms
               // to the ScreenPoint definition.
               view.hitTest(event).then(function (response) {
                 if (response.results.length) {
                 var graphic = response.results.filter(function (result) {
                    // check if the graphic belongs to the layer of interest
                         return result.graphic.layer === layer2;
                        })[0].graphic;

                var attributes = graphic.attributes;
                var name = attributes.g_dasaxeleba_ka;
                var SE_ID = attributes.SE_ID_new;
              }
          var queryZebna = dom.byId("query-Zebna");
          on(queryZebna, "click", function() {
            queryMagistraluri()
            .then(displayResults);
        });  
        function queryMagistraluri() {
        var query = HWLayer.createQuery();
         //query.returnGeometry = true;
         //query.outFields = ["*"]; 
         query.where = "g_dasaxeleba_ka LIKE N'%"+ name +"%'";
         query.outSpatialReference = view.spatialReference;                                                         
         return HWLayer.queryFeatures(query)
      }
        // display the query results in the view     
        function displayResults(results) {        
          console.log(results); 
          var pfeatures = results.features.map(function(graphica) {
            graphica.symbol = {
              type: "simple-fill",  // autocasts as new SimpleFillSymbol()
                 color: "orange",
                    style: "solid",
                    outline: {  // autocasts as new SimpleLineSymbol()
                    color: "black",
                       width: 1
                              }                      
            };        
            return graphica  
          });
          graphicsLayer.addMany(pfeatures);
          view.goTo(pfeatures)
        }   
      });
    });
        const btnupdate = dom.byId("button-update");
        on(btnupdate, "click", function () {
         
          // Create a new graphic and set its geometry to
          function addGraphic(event) {
          // Create a new graphic and set its geometry to
          // `create-complete` event geometry.
          const graphic = new Graphic({
            geometry: polygon,
            symbol: graphica.symbol,
            attributes: {}
          });
          graphicsLayer.add(graphic);

               const edits = { //Fire the addFeatures function using the completed graphic
              addFeatures: [graphic]
              };
              applyEdits(edits);
              console.log(graphic);
              
        };
        function applyEdits(params) {
          featureLayer.applyEdits(params).then(function(editsResult) {
            // Get the objectId of the newly added feature.
            // Call selectFeature function to highlight the new feature.
            if (editsResult.addFeatureResults.length > 0) {
              const objectId = editsResult.addFeatureResults[0].objectId;
            }
          })
          .catch(function(error) {
            console.log("===============================================");
            console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
              error.message);
            console.log("error = ", error);
           });
          }
        })
 });
</script>
</head>
<body>
  <button id="query-Zebna">ძებნა</button>
  <button id="button-update">Update</button>
  <div id="viewDiv"></div>
  
</div>
 
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Vakhtang_Zubiashvili · ‎01-28-2020

Robert,

Thank you again. I will try to get result and post what i get.

Thank you.

On Wed, Jan 29, 2020, 12:23 AM Robert Scheitlin, GISP <geonet@esri.com>

Vakhtang_Zubiashvili · ‎01-29-2020

Robert Scheitlin, GISP‌

Robert,

I did what i wanted, but without union, at this moment we do not need union anymore. Thank for help and coaching.

Vakhtang