Template Picker - Adding Features: Looking to limit users to only adding 3 points

[IanPeebles]

Hello everyone.  I am working on a new application that has a template picker that works really well.  I am looking to limit the user where they can only add three points to the map and that is it.  Currently, I have it set up where you click on the template picker, you are in constant draw/editing mode.

Looking to set up a loop on clicks and when you hit 3, you will get an alert that says, "you have added 3 points".  Is there a way I can trap the mouse clicks or the number of edits applied?

I am a bit stuck on this...any assistance would greatly be appreciated.  Below is my code block:

// *************************************************
// * Editing Code Block *
// *************************************************
function initEditing(evt) {

var layers = arrayUtils.map(evt.layers, function(result) {
return result.layer;
});

// Editor Toolbar
var editToolbar = new Edit(map);

// Draw Toolbar used to Draw Graphic during Editing
var drawToolbar = new Draw(map);

// Template Picker Widget
var templatePicker = new TemplatePicker({
   featureLayers: layers,
   rows: "auto",
   columns: 1,
   grouping: false
}, "templatePickerDiv");
templatePicker.startup();

// Template Picker Widget - Selection Only Add Point
var selectedTemplate;
templatePicker.on("selection-change", function() {
   if( templatePicker.getSelected() ) {
   selectedTemplate = templatePicker.getSelected();
   console.log("Name", selectedTemplate);
   drawToolbar.activate(Draw.POINT);
   }
});

drawToolbar.on("draw-end", function(evt) {
// Loop Variables
//var count = 0;
//var i = 0;

//drawToolbar.deactivate();
//editToolbar.deactivate();
var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
console.log("Attributes", newAttributes);
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);

/* -- Code Not working ---- Commented Out --------------------------------------------------------
for(i=0; i<4; i++) {
var newGraphic = new Graphic(evt.geometry, null, newAttributes);
count = count + 1;
console.log("Ian Count", count);
}
if(count < 4) {
selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
}
else
{
//drawToolbar.deactivate();
//editToolbar.deactivate();
alert(" You have successfully completed 3 edits!");
}
*/ -- Code Not working ---- Commented Out --------------------------------------------------------

});
}

[SteveCole · Accepted solution]

featureLayer.ApplyEdits has a callback function so why not increment your counter variable inside that function? It will only increment if the operation is successful so you're sure to have an accurate & current count of added features. I think you can just check its value BEFORE the ApplyEdits method like you kind of have it already.

Steve

[IanPeebles]

Steve, thank you for your response.  The biggest issue I was was getting the counter to work properly.  It would have helped if I would of taken it out of the function, because I was getting a constant value of 1 each time.  Here is what was done:

1. Set a global variable

var count = 0;

2. Logic for the draw on end:

   // Draw Toolbar on End
         drawToolbar.on("draw-end", function(evt) {
         // Comment out line of code below to allow for adding mult
         //drawToolbar.deactivate();
         editToolbar.deactivate();
         var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
   
         // Set up Counter for Graphic Added
        count = count + 1; 
        console.log("Graphic Count", count);
   
       if (count <=3) {
         // Add Graphics for Symbol Placement
        map.graphics.add(new Graphic(evt.geometry, symbol));
   
        // Feature Graphic and Apply Edits
        var newGraphic = new Graphic(evt.geometry, null, newAttributes);
    
        // Apply Edits
        selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
       }
      else
      {
         drawToolbar.deactivate();
         editToolbar.deactivate();
         alert(" You have successfully completed 3 edits!");
   }
   return count;
 });

This works really well!  For sure, this was a new challenge.