AnsweredAssumed Answered

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

Question asked by mthornton@blm.gov_BLM_EGIS on Jan 28, 2020
Latest reply on Jan 30, 2020 by mthornton@blm.gov_BLM_EGIS

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. 

 

 <script>
var geometryFromSketch;
var geometryObj;
 
    require([
     "esri/Map",
     "esri/views/MapView",
     "esri/widgets/Sketch/SketchViewModel",
     "esri/Graphic",
     "esri/layers/GraphicsLayer",
     "esri/layers/GeoRSSLayer",
     "esri/layers/FeatureLayer",
     "esri/layers/MapImageLayer",
     "esri/geometry/SpatialReference",
     "esri/geometry/Polygon",
     "dojo/domReady!"
    ], function(Map, MapView, SketchViewModel, Graphic, GraphicsLayer, GeoRSSLayer, FeatureLayer, MapImageLayer, Polygon) {
      // 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() {
   
   <!---GET SELECTED VALUE OF FIELD OFFICE DROPDOWN--->
   var fOSelectVal = document.getElementById('fieldOfficeShp').options[ document.getElementById('fieldOfficeShp').selectedIndex ].value;
   <!---GET SELECTED VALUE OF FIELD OFFICE DROPDOWN--->
    
   
   
 
   loadLoadingGif('/Settings/Images/Loading.gif');
   if(fOSelectVal == ' ' )
   {
    
     geometryObj = geometryForSketch;
     console.log("geo", geometryObj);
   }    
   else
   {
    
      <!---POPULATE ESRI AJAX WHERE CLAUSE BASED ON FIELD OFFICE DROPDOWN SELECTION--->
    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'"
    }
    <!---POPULATE ESRI AJAX WHERE CLAUSE BASED ON FIELD OFFICE DROPDOWN SELECTION--->
     
    <!---ESRI FUNCTION FOR INTERSECTING GEOMETERIES AND PERFORMING ALL AJAX CALLS BASED ON QUERY SELECTIONS--->
    require(["esri/request"], function(esriRequest) {
      /************************************************
       *
       * Define the 'options' for our request.
       *
       *************************************************/
     <!---VARIABLES FOR PROJECT GEOMETRY GET--->
     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"
     };
     <!---VARIABLES FOR PROJECT GEOMETRY GET--->
     <!---SET URL VARIABLE FOR JSON CALL TO ESRI PROJECT_POLY DB--->
     var url = "https://gis.blm.gov/nmarcgis/rest/services/Base/BLM_NM_Reference_Boundaries/MapServer/0/query";
     <!---SET URL VARIABLE FOR JSON CALL TO ESRI PROJECT_POLY DB--->
     <!---ESRI AJAX REQUEST TO GET FIELD OFFICE BOUNDARY GEOMETRY--->
     esriRequest(url, options).then(
       function(response)
       { 
        unloadLoadingGif();
        geometryObj= response.data.features[0].geometry.rings;
        document.getElementById('GISGeometry').value = 'Geometry Input';
        <!---console.log("geo2", response.data.features[0].geometry);--->
        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  
      <!---USER_ID: <cfoutput>'#Session.getAuthUser#'</cfoutput>,--->
      <!---DATE_CREATED: "2019-11-05 00:00:00.0",--->

    }
     });
      const edits = {
     addFeatures: [editFeature]
      };

     applyEditsToIncidents(edits);

    };
<!---END OF SUBMIT BUTTON CLICK ()--->

   // ***************************************
   // 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();
   };
   function setActiveButton(selectedButton) {
     // focus the view to activate keyboard shortcuts for sketching
     view.focus();
     var elements = document.getElementsByClassName("active");
     for (var i = 0; i < elements.length; i++) {
    elements[i].classList.remove("active");
     }
     if (selectedButton) {
    selectedButton.classList.add("active");
     }
   };
  });
 });
  
  </script>

Outcomes