Show dynamically selected polygons editable when click on map and save all of them

[rsharma]

Currently, I am showing dynamic polygon on click of map by getting its lat long but  i  also want to show them editable.

Query: do reshape stop method get geometry of all polygons appeared dynamically or is their any other way to store ring coordinates of all dynamically appeared polygons.

[RobertScheitlin__GISP]

Rajni,

do reshape stop method get geometry of all polygons appeared dynamically or is their any other way to store ring coordinates of all dynamically appeared polygons.

No, the reshape stop is only for the One graphic that is being updated. 

To get the rings of all the graphics in a GraphicsLayer you have to loop through the graphics property of the GraphicsLayer to get all the Graphics.

graphicsLayer.graphics.map(function(gra){
   //do something with the gra (graphic)
});‍‍‍

[rsharma]

==>I couldn't find the path of rings in the object returned in console like i have been getting in object reshape event below.

=======>

//listen to reshape-stop event get updated geometry pylgon vertics and pass through ajax         
              /*const eventInfo = event.toolEventInfo;
                  if (eventInfo && eventInfo.type.includes("reshape")) {
                    if(eventInfo.type=='reshape-stop'){
                       var updatedGeometry= webMercatorUtils.webMercatorToGeographic(event.graphics[0].geometry);
                       rings = updatedGeometry.__accessor__.store._values.rings;
                    }
                  }*/

When i go to accessor->store->values-> . It have more geometry attributes and have no ring coordinates.  Whereever i find the ring parameter in console, it contains different value.

==>Whenever a new polygon appeared on click or when i click on screen it after clear all do not return any object and before click on clearall return objects which do not have any rings value

Kindly help me to get latest rings(either reshape or updated) of all polygons that appear on screen.

Also how to make them editable.

I have been trying to console rings here:

======>

function onGraphicUpdate(event) {
          // get the graphic as it is being updated
          const graphic = event.graphics[0]; //Do i need to perform loop over

          // check if the update event's the toolEventInfo.type is move then stop move event
          if (event.toolEventInfo && event.toolEventInfo.type.includes("move")){
          sketchViewModel.cancel();
            }
            // If toolEventInfo.type is reshape-stop then it means user finished moving or reshaping the graphic, call complete method. This will change update event state to complete and we will check the validity of the graphic location.
          if (
            event.toolEventInfo &&
            (event.toolEventInfo.type === "move-stop" ||
              event.toolEventInfo.type === "reshape-stop")
          ) {
              sketchViewModel.complete();
          } else if (event.state === "cancel" || event.state === "complete") {
            //check if the graphics are done being reshaped, printout updated graphic's geometry and reshape stage.           
            // graphic  reshaping has been completed or cancelled
              sketchViewModel.update([graphic], { tool: "reshape" });
          }else {
          graphic.symbol = validSymbol;
        }

          graphicsLayer.graphics.map(function(gra){
             //do something with the gra (graphic)
             console.log("====>");
             console.log(gra);
          });
 
        }

[RobertScheitlin__GISP · Accepted solution]

Rajni,

   So do you get anything in the console for this portion of your code above?

Also notice that I added gra.geometry in case that is the simple issue you are having.

          graphicsLayer.graphics.map(function(gra){
             //do something with the gra (graphic)
             console.log("====>");
             console.log(gra.geometry);
          });‍‍‍‍‍

[RobertScheitlin__GISP]

Rajni,

Which makes perfect sense based on your code. Your are looping through the graphics (this is what graphicsLayer.graphics.map(function(gra){ means, map is a looping function on an array) and setting the var rings to the graphics rings (though I am not sure why you are using internal properties like .__accessor__.store._values.rings instead of just updatedGeometry.rings). But each loop through overwrites the rings variable so by the time you get to your ajax call you only have the last ring data.

[rsharma]

Hi rob finally i able to save and display all rings but they do not appear editable when they first appear, i have to click them to make them editable.

[rsharma]

Hi Rob,

Can you please tell me how to make it editable when it first appear, IT IS THE LAST TASK OF POLYGONS, JUST TO MAKE THEM EDITABLE WHEN THEY APPEAR AUTOMATICALLY.

[RobertScheitlin__GISP]

Rajni,

  Did I not show you how to start editing a graphic in one of your previous threads? It is simply sketchViewModel.update([your graphic], {tool: "reshape"});

[RobertScheitlin__GISP]

Rajni,

   This is by design. You can only have ONE polygon editing in the reshape mode.

[rsharma]

Is their any other way to make all polygons appear editable everytime, even when i automatically appear on map on click first time