Hi guys,
I am trying to use ArcGIS API for JavaScript Sandbox this sample to add polygon feature, i also use codes taking from here https://community.esri.com/thread/224031-how-to-create-a-polygon-js-api-49?commentID=811443&et=watch... from Robert Scheitlin, GISP, but can not combine this two sample to add polygon and update attributes.
Thank you for your help
Here is a code samples i use (you can see them in links too):
// ***********************************************************
// Call FeatureLayer.applyEdits() with specified params.
// ***********************************************************
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
//selectFeature(objectId);
}
})
// called when sketchViewModel's create-complete event is fired.
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol,
attributes: {}
});
Solved! Go to Solution.
Vakhtang,
You will need to check your ArcGIS Server logs to see what is failing on the server end then.
Vakhtang,
So far you have not even added in anything about the SketchViewModel, which is something you will need to be able to draw the polygon. Once the template is selected you can get the symbology from the selected template to set the SketchViewModel symbol.
Dear Robert,
I added some changes you can see from line 244 to line 256, but still no success.
Vakhtang,
So you are still not understanding the workflow of the code you are trying to change.
The code is still focusing on single point clicks (line 10). What I believe you need to do is after the template is clicked then create the sketchViewModel. Then add the create-complete event listener to the sketchViewModel and get the models geometry to use in your new graphic and the attributes from the template selected.
// Listen for when a template item is selected
templates.on("select", function(evtTemplate) {
// Access the template item's attributes from the event's
// template prototype.
attributes = evtTemplate.template.prototype.attributes;
unselectFeature();
document.getElementById("viewDiv").style.cursor = "crosshair";
// With the selected template item, listen for the view's click event and create feature
const handler = view.on("click", function(event) {
// remove click event handler once user clicks on the view
// to create a new feature
handler.remove();
event.stopPropagation();
featureForm.feature = null;
var sketchViewModel = new SketchViewModel({
view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
setUpClickHandler();
if (event.mapPoint) {
point = event.mapPoint.clone();
point.z = undefined;
point.hasZ = false;
// Create a new feature using one of the selected
// template items.
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol,
attributes: {
IncidentType: attributes.IncidentType
}
});
graphicsLayer.add(graphic);
const edits = { //Fire the addFeatures function using the completed graphic
addFeatures: [graphic]
};
applyEdits(edits);
console.log(graphic);
}
applyEditsToIncidents(edits);
document.getElementById("viewDiv").style.cursor = "auto";
} else {
console.error("event.mapPoint is not defined");
}
});
});
Robert,
I tried to follow your suggestion, add some part of code to add just polygon, but i stacked
Vakhtang,
You were still leaving in the point creating (i.e. the setUpClickHandler and const handler = view.on("click", function(event) {) portions. This what I was trying to say last time. Try and follow the code logic. Here is a quick edit of the code (unverified) that you can start with. Notice the focus is on selecting a template and then creating the sketchViewModel once the template is selected then on sketch completion you create the graphic and apply the edits. I did not include anything about the feature form where you can fill the attributes based on a form though. Right now it would just take the templates default attributes for the selected template.
var sketchViewModel, attributes;
// Listen for when a template item is selected
templates.on("select", function(evtTemplate) {
// Access the template item's attributes from the event's
// template prototype.
attributes = evtTemplate.template.prototype.attributes;
sketchViewModel = new SketchViewModel({
view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
sketchViewModel.on("create-complete", addGraphic);
});
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchViewModel.graphic.symbol,
attributes: attributes
});
graphicsLayer.add(graphic);
const edits = {
addFeatures: [graphic]
};
applyEdits(edits);
console.log(graphic);
}
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
Dear Robert,
I changed you code using 4.14 version of create sketch polygon, now i can draw polygon click on template in form, but can't update in featureLayer, it seems everything ok, but does not work:
const templates = new FeatureTemplates({
container: "addTemplatesDiv",
layers: [featureLayer]
});
// Listen for when a template item is selected
templates.on("select", function(evtTemplate) {
var sketchVM = new SketchViewModel({
view,
layer: graphicsLayer,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
// Call create method to create a polygon with Click.
sketchVM.create("polygon", {mode: "click"});
sketchVM.on("create-complete", addGraphic);
function addGraphic(event) {
// Create a new graphic and set its geometry to
// `create-complete` event geometry.
const graphic = new Graphic({
geometry: event.geometry,
symbol: sketchVM.graphic.symbol,
attributes: attributes
});
graphicsLayer.add(graphic);
const edits = {
addFeatures: [graphic]
};
applyEdits(edits);
console.log(graphic);
}
function applyEdits(params) {
featureLayer.applyEdits(params).then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (editsResult.addFeatureResults.length > 0) {
const objectId = editsResult.addFeatureResults[0].objectId;
}
})
.catch(function(error) {
console.log("===============================================");
console.error("[ applyEdits ] FAILURE: ", error.code, error.name,
error.message);
console.log("error = ", error);
});
}
});
Thanks Undral, but i need to use custom Form and also want to see how code works itself for future purposes.
Hi again,
I have changed code, Robert Scheitlin, GISP helped me. I still try to configure code, use code Robert gave me and code we have in template ArcGIS API for JavaScript Sandbox.
Now i can click on template, draw polygon sketch, but it does not apply edits to Featurelayer and gives error. Se images and code:
templates.on("select", function(evtTemplate) {
// Access the template item's attributes from the event's
// template prototype.
attributes = evtTemplate.template.prototype.attributes;
unselectFeature();
document.getElementById("viewDiv").style.cursor = "crosshair";
// With the selected template item, listen for the view's click event and create feature
const handler = view.on("click", function(event) {
// remove click event handler once user clicks on the view
// to create a new feature
handler.remove();
event.stopPropagation();
featureForm.feature = null;
var sketchVM = new SketchViewModel({
view,
layer: graphicsLayer,
pointSymbol,
polylineSymbol,
polygonSymbol
});
// Call create method to create a polygon with Click.
sketchVM.create("polygon", {mode: "click"});
// Create a new feature using one of the selected
// template items.
editFeature = new Graphic({
geometry: event.geometry,
symbol: sketchVM.graphic.symbol,
attributes: {
IncidentType: attributes.IncidentType
}
});
// Setup the applyEdits parameter with adds.
const edits = {
addFeatures: [editFeature]
};
applyEditsToIncidents(edits);
document.getElementById("viewDiv").style.cursor = "auto";
});
});
// Call FeatureLayer.applyEdits() with specified params.
function applyEditsToIncidents(params) {
// unselectFeature();
featureLayer
.applyEdits(params)
.then(function(editsResult) {
// Get the objectId of the newly added feature.
// Call selectFeature function to highlight the new feature.
if (
editsResult.addFeatureResults.length > 0 ||
editsResult.updateFeatureResults.length > 0
) {
unselectFeature();
let objectId;
if (editsResult.addFeatureResults.length > 0) {
objectId = editsResult.addFeatureResults[0].objectId;
} else {
featureForm.feature = null;
objectId = editsResult.updateFeatureResults[0].objectId;
}
selectFeature(objectId);
if (addFeatureDiv.style.display === "block") {
toggleEditingDivs("none", "block");
}
}
// show FeatureTemplates if user deleted a feature
else if (editsResult.deleteFeatureResults.length > 0) {
toggleEditingDivs("block", "none");
}
})
.catch(function(error) {
console.log("===============================================");
console.error(
"[ applyEdits ] FAILURE: ",
error.code,
error.name,
error.message
);
console.log("error = ", error);
});
}