using esriRequest response geometry object to add new graphic to feature layer with arcgis api for javascript 4.9

MichaelThornton — Tue, 28 Jan 2020 17:58:41 GMT

Version:1.0 StartHTML:000000286 EndHTML:000017318 StartFragment:000002743 EndFragment:000017286 StartSelection:000002743 EndSelection:000017286 SourceURL:https://community.esri.com/discussion/create.jspa?suppressMarkQuestion=true&question=true&containerType=14&containerID=2128

I want to use a geometry object from an esriRequest to add a graphic to a featureLayer. I present the client with two options: 1.) use the SketchViewModel draw tool to create a polygon to add a new graphic to the featureLayer, and 2.) use a dropdown box selector to choose a specific Field Office boundary polygon to add a new graphic to the featureLayer. While the draw tool works fine, when I obtain my geometry object from the esriRequest it will not display when I later go to that record and attempt to display the geometry on my web map.

// GraphicsLayer to hold graphics created via sketch view model
var tempGraphicsLayer = new GraphicsLayer();

   const featureLayer = new FeatureLayer({
          url:
            "https://gis.nm.blm.doi.net/arcgis/rest/services/Stipulations/BLM_NM_OG_Stips_Poly/FeatureServer/0/addFeatures"
        });

           // Point to the rss feed url
      var layer = new MapImageLayer({
    url: "https://gis.blm.gov/nmarcgis/rest/services/Base/BLM_NM_Reference_Boundaries/MapServer"
  });

        var map = new Map({
          basemap: "national-geographic",
          layers: [layer, tempGraphicsLayer]
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 6,
          center: [-106.1499021874988, 34.44280009376313]
        });

      view.when(function() {
        // create a new sketch view model
        var sketchViewModel = new SketchViewModel({
          view: view,
          layer: tempGraphicsLayer,
          pointSymbol: { // symbol used for points
            type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
            style: "circle",
            color: "#72ACCB",
            size: "16px",
            outline: { // autocasts as new SimpleLineSymbol()
              color: [255, 255, 255],
              width: 3 // points
            }
          },
          polylineSymbol: { // symbol used for polylines
            type: "simple-line", // autocasts as new SimpleMarkerSymbol()
            color: "#72ACCB",
            width: "4",
            style: "dash"
          },
          polygonSymbol: { // symbol used for polygons
            type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
            color: "rgba(114,172,203, 0.7)",
            style: "solid",
            outline: {
              color: "white",
              width: 1
            }
          }
        });

        // ************************************************************
        // Get the completed graphic from the event and add it to view.
        // This event fires when user presses
        // * "C" key to finish sketching point, polygon or polyline.
        // * Double-clicks to finish sketching polyline or polygon.
        // * Clicks to finish sketching a point geometry.
        // ***********************************************************




        sketchViewModel.on("draw-complete", function(evt) {

//console.log("evtGeo", evt.geometry) ;
    geometryForSketch = evt.geometry;
    document.getElementById('GISGeometry').value = 'Geometry Input';
      // add the graphic to the graphics layer
            tempGraphicsLayer.add(evt.graphic);
            setActiveButton();

        });

        // Call FeatureLayer.applyEdits() with specified params.
        function applyEditsToIncidents(params) {
          // unselectFeature();
          featureLayer
            .applyEdits(params)
   .then(function(){

   unloadLoadingGif();
     window.location.href = "http://it4rmdev.blm.doi.net/Michaels_Leasing_Stipulations_Proof_11_25_2019/StipPages/stipulationsList.cfm";
    })
            .catch(function(error) {
     unloadLoadingGif();
              console.log("===============================================");
              console.error(
                "[ applyEdits ] FAILURE: ",
                error.code,
                error.name,
                error.message
              );
              console.log("error = ", error);
            });
        }
        // *************************************
        // activate the sketch to create a point
        // *************************************




   var submitButton = document.getElementById("submitButton");

submitButton.onclick = function() {

   
   var fOSelectVal = document.getElementById('fieldOfficeShp').options[ document.getElementById('fieldOfficeShp').selectedIndex ].value;
   




   loadLoadingGif('/Settings/Images/Loading.gif');

if(fOSelectVal == ' ' )
   {

     geometryObj = geometryForSketch;
     console.log("geo", geometryObj);
   }
   else
   {

      
    if(fOSelectVal == "Las Cruces District Office"){
     var Clause = "ADMU_NAME = 'LAS CRUCES DISTRICT OFFICE'"
    }
    else if(fOSelectVal == "Carlsbad Field Office"){
     var Clause = "ADMU_NAME = 'CARLSBAD FIELD OFFICE'"
    }
    else if(fOSelectVal == "Socorro Field Office"){
     var Clause = "ADMU_NAME = 'SOCORRO FIELD OFFICE'"
    }
    else if(fOSelectVal == "Roswell Field Office"){
     var Clause = "ADMU_NAME = 'ROSWELL FIELD OFFICE'"
    }
    else if(fOSelectVal == "Rio Puerco Field Office"){
     var Clause = "ADMU_NAME = 'RIO PUERCO FIELD OFFICE'"
    }
    else if(fOSelectVal == "Taos Field Office"){
     var Clause = "ADMU_NAME = 'TAOS FIELD OFFICE'"
    }
    else if(fOSelectVal == "Farmington Field Office"){
     var Clause = "ADMU_NAME = 'FARMINGTON FIELD OFFICE'"
    }
    else if(fOSelectVal == "Oklahoma Field Office"){
     var Clause = "ADMU_NAME = 'OKLAHOMA FIELD OFFICE'"
    }
    

    
    require(["esri/request"], function(esriRequest) {

      /************************************************
       *
       * Define the 'options' for our request.
       *
       *************************************************/

var options = {
     // These properties will be appended to the request URL in the following format:
     // <url>?f=json
     query: {
      f: "json",
     geometryType: "esriGeometryPolygon",
     where: Clause,
     geometryPrecision: 3,
     outSR: 3857

     },
     // Determine the format you want to read the response as.
     // Default type is 'json'. Other values are 'xml', 'text', 'blob', 'arraybuffer', 'document'.
     responseType: "json"
     };

var url = "https://gis.blm.gov/nmarcgis/rest/services/Base/BLM_NM_Reference_Boundaries/MapServer/0/query";

esriRequest(url, options).then(
       function(response)
       {

unloadLoadingGif();
geometryObj= response.data.features[0].geometry.rings;
        document.getElementById('GISGeometry').value = 'Geometry Input';
        
        console.log("geo3", geometryObj);

       });
    });
       }

     var Res = document.getElementById('optResource');
     var Stat = document.getElementById('optStatus');
     var Type = document.getElementById('optType');
     var AdmFldOff = document.getElementById('optFO');
     var RMPA = document.getElementById('optRMPA');
     var Dsgntn = document.getElementById('optDsgntn');
     var ROD_Yr = document.getElementById('optROD_Yr');
     var State = document.getElementById('optState');
     var AdmState = document.getElementById('optAdminState');
     var DataSrc = document.getElementById('optDataSrc');
//build geometry object to add
  var polygon = Polygon({
        f: json,
        type: "polygon", // autocasts as new Polygon()
        rings: geometryObj,
        spatialReference: {"latestWkid":3857,"wkid":102100 }
         });

    editFeature = new Graphic({

    geometry: polygon,
    attributes: {

OG_STIP_ID: document.getElementById('txtStipID').value,
      OG_STIP_NA: document.getElementById('txtTitle').value,
      OG_STIP_TYPE: Type.options[Type.selectedIndex].value,
      OG_STIP_CNTNT: document.getElementById('txtDescript').value,
      PRPSE: document.getElementById('txtPurpose').value,
      PRCDNG_RMP_RMPA: RMPA.options[RMPA.selectedIndex].value,
      AFFCTED_RESRCE: Res.options[Res.selectedIndex].value,
      STATUS: Stat.options[Stat.selectedIndex].value,
      DSGNTN: Dsgntn.options[Dsgntn.selectedIndex].value,
      GEO_STATE: State.options[State.selectedIndex].value,
      ADMIN_ST: AdmState.options[AdmState.selectedIndex].value,
      ADM_UNIT_CD: AdmFldOff.options[AdmFldOff.selectedIndex].value,
      ROD_YR: ROD_Yr.options[ROD_Yr.selectedIndex].value,
      SITE_NA: document.getElementById('txtSite').value,
      DATA_SRCE: DataSrc.options[DataSrc.selectedIndex].value,
      GEN_COMMENTS: document.getElementById('txtGenComm').value,
      WAIVER: document.getElementById('txtWaiver').value,
      EXCPTN: document.getElementById('txtException').value,
      MODFCTN: document.getElementById('txtModif').value

}

});

      const edits = {
     addFeatures: [editFeature]
      };

applyEditsToIncidents(edits);

};

   // ***************************************
   // activate the sketch to create a polygon
   // ***************************************
   var drawPolygonButton = document.getElementById("polygonButton");

   drawPolygonButton.onclick = function() {
     // set the sketch to create a polygon geometry
     tempGraphicsLayer.removeAll();
     sketchViewModel.reset();
     document.getElementById('GISGeometry').value = '';
     sketchViewModel.create("polygon");
     setActiveButton(this);
   };

   // **************
   // reset button
   // **************
   document.getElementById("resetBtn").onclick = function() {
     tempGraphicsLayer.removeAll();
     sketchViewModel.reset();
     document.getElementById('GISGeometry').value = '';
     setActiveButton();
   };

});

</script>

Re: using esriRequest response geometry object to add new graphic to feature layer with arcgis api for javascript 4.9

RobertScheitlin__GISP — Tue, 28 Jan 2020 18:18:32 GMT

Michael,

Why are you using an esriRequest instead of the standard QueryTask? If you use a QueryTask the results are an array of Graphics. When using a low level esriRequest the results are a simple JSON string. You would have to create an graphics or geometry Objects from that string.

Re: using esriRequest response geometry object to add new graphic to feature layer with arcgis api for javascript 4.9

MichaelThornton — Thu, 30 Jan 2020 20:51:48 GMT

Robert,

I figured out how to build the object the applyEdits() graphics needed and that worked. I am not familiar with Query Task I will read up on it. thank you.

topic Re: using esriRequest response geometry object to add new graphic to feature layer with arcgis api for javascript 4.9 in ArcGIS JavaScript Maps SDK Questions

using esriRequest response geometry object to add new graphic to feature layer with arcgis api for javascript 4.9

Re: using esriRequest response geometry object to add new graphic to feature layer with arcgis api for javascript 4.9

Re: using esriRequest response geometry object to add new graphic to feature layer with arcgis api for javascript 4.9