topic Re: Template Picker - Adding Features: Looking to limit users to only adding 3 points in ArcGIS JavaScript Maps SDK Questions

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

IanPeebles — Mon, 21 Nov 2016 22:14:34 GMT

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 --------------------------------------------------------

});
}

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

SteveCole — Mon, 21 Nov 2016 23:49:07 GMT

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

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

IanPeebles — Tue, 22 Nov 2016 17:43:08 GMT

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.