SketchViewModel Not Adding Graphic

ChrisChild — Wed, 11 Jul 2018 17:28:28 GMT

Hello -

I've been working with the SketchViewModel sandbox the last few days and I've gotten most of it working in my own app but I've run into one thing that I haven't been able to figure out. The code I am using is directly pulled from the sandbox example but for thoroughness it is at the bottom of this post. Everything works until the shape should be drawn on the map but it seems none of the events are being fired. As you can see I have tried to print out some simple messages to the console to make sure that the events are being called and they do not appear. To even further test that it is the events not being fired I created some more functions to print out messages when they are fired and still nothing. Any help would be great and thank you for taking a look.

edit: I missed adding in some of the other functions that are supposed to be called. They are now below the other code.

this.sketchView = new SketchViewModel( {
   view: this.view,
   layer: tempGraphicsLayer,
   type: "simple-fill",
   pointSymbol: {
      type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
      style: "square",
      color: "#8A2BE2",
      size: "16px",
      outline: { // autocasts as new SimpleLineSymbol()
      color: [255, 255, 255],
      width: 3
   }
},
   polylineSymbol: {
      type: "simple-line", // autocasts as new SimpleLineSymbol()
      color: "#8A2BE2",
      width: "4",
      style: "dash"
   },
   polygonSymbol: { // used for symbolizing polygons
      type: "simple-fill",
      color: "rgba(138,43,226, 0.8)",
      style: "solid",
      outline: {
         color: "white",
         width: 1
      }
   }
} );

setUpClickHandler();

// Listen to create-complete event to add a newly created graphic to view
this.sketchView.on( "create-complete", function(event) {
console.log('complete called');
} );

// Listen the sketchViewModel's update-complete and update-cancel events
this.sketchView.on( "update-complete", updateGraphic );
this.sketchView.on( "update-cancel", updateGraphic );

this.sketchView.on( "click", function(event) {
console.log('click');
});

this.sketchView.on( "create", function(event) {
console.log('create');
});

this.sketchView.on( "create-init", function(event) {
console.log('create-init');
});

//*************************************************************
// called when sketchViewModel's create-complete event is fired.
//*************************************************************
function addGraphic( event ) {
console.log('creating graphic');
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic( {
geometry: event.geometry,
symbol: this.sketchView.graphic.symbol
} );
tempGraphicsLayer.graphics.add( graphic );
}

//***************************************************************
// called when sketchViewModel's update-complete or update-cancel
// events are fired.
//*************************************************************
function updateGraphic( event ) {
   // event.graphic is the graphic that user clicked on and its geometry
   // has not been changed. Update its geometry and add it to the layer
   event.graphic.geometry = event.geometry;
   tempGraphicsLayer.graphics.add( event.graphic );

// set the editGraphic to null update is complete or cancelled.
this.editGraphic = null;
}

// ************************************************************************************
// set up logic to handle geometry update and reflect the update on "tempGraphicsLayer"
// ************************************************************************************
function setUpClickHandler() {
   this.view.on( "click", function( event ) {
      this.view.hitTest( event ).then( function( response ) {
      console.log('response');
      console.log(response);
      var results = response.results;
      // Found a valid graphic
      if ( results.length && results[results.length - 1]
         .graphic ) {
            // Check if we're already editing a graphic
            if ( !this.editGraphic ) {
               // Save a reference to the graphic we intend to update
               this.editGraphic = results[results.length - 1].graphic;
               // Remove the graphic from the GraphicsLayer
               // Sketch will handle displaying the graphic while being updated
               tempGraphicsLayer.graphics.remove( this.editGraphic );
               this.sketchView.update( this.editGraphic );
            }
         }
   } );

}

Re: SketchViewModel Not Adding Graphic

MiranCerkic — Thu, 12 Jul 2018 13:20:17 GMT

Hi,

I've had a same problem, and changing script version from 4.7 to 4.8 resolved it. Hope this helps you.

Best regards.

Re: SketchViewModel Not Adding Graphic

JonathanUihlein — Thu, 12 Jul 2018 14:28:30 GMT

Hello!

Some SketchViewModel event names were changed in 4.8 for consistency (any event with 'draw-' prefix was changed to 'create-'). This change was listed under "breaking changes" in the 4.8 release notes, but is easy to miss.

If you are using 4.7, you will need to modify some of the event names from the sample (which is using 4.8), or switch to 4.8 as recommended by Miran.

Thanks!

Re: SketchViewModel Not Adding Graphic

ChrisChild — Thu, 12 Jul 2018 17:31:41 GMT

It is definitely an issue between 4.7 and 4.8. I tried updating the version yesterday as I noticed I wasn't on 4.8 and that the sketch view sandbox was but I still seem to be running into a problem. I did try Jonathan's suggestion about trying to use 'draw-' instead of 'create-' and the event was caught so I don't know if my Angular project is holding on to the 4.7 version somewhere. Anyways that's for me to figure out and thank you for the help.

Re: SketchViewModel Not Adding Graphic

ChrisChild — Thu, 12 Jul 2018 18:33:02 GMT

Hmmmm so I updated to 4.8 after testing the 'draw-complete' event being caught in 4.7 and when I changed the listener to 'create-complete' it was still not working. I had already changed my reference to make sure I was using 4.8. I switched back to 'draw-complete' and it is still being fired. Unsure of what I should do at this point other than just continue using 'draw-complete'.

Re: SketchViewModel Not Adding Graphic

ChrisChild — Thu, 12 Jul 2018 19:27:28 GMT

If you haven't seen my other reply I did actually notice that the sandbox was using 4.8 the day I posted the question but even after updating I was still not seeing the 'create-complete' event being fired. I have now been testing for the last few hours with 4.8 and I can only see the 'draw-complete' event being caught. When I use 'create-complete' nothing seems to get fired as the listener is never called. Not sure what else to do other than continue using 'draw-complete'.

topic Re: SketchViewModel Not Adding Graphic in ArcGIS JavaScript Maps SDK Questions

SketchViewModel Not Adding Graphic

Re: SketchViewModel Not Adding Graphic

Re: SketchViewModel Not Adding Graphic

Re: SketchViewModel Not Adding Graphic

Re: SketchViewModel Not Adding Graphic

Re: SketchViewModel Not Adding Graphic