Create polygon Feature version update

Question

Hi all, I am trying to create polygon feature, in JavaScript Version 4.9 it works, but when i change it in version 4.14 it does not work. I asked how to create polygon in another Question (Create Polygon Feature: Java Script ), it seems everything OK, but sketch created sketch doesn't updates in featureLeyer (can not "Apply edits"). Here is a code from JavaScript version 4.9 that works fine, how can i update it in version 4.14? Thanks. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> <title>Sketch View</title> <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; font-family: verdana; } #topbar { background: rgb(223, 34, 34); position: absolute; top: 15px; right: 15px; padding: 10px; } .action-button { font-size: 16px; background-color: transparent; border: 1px solid #D3D3D3; color: #6e6e6e; height: 32px; width: 32px; text-align: center; box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); } .action-button:hover, .action-button:focus { background: #0079c1; color: #e4e4e4; } .active { background: #0079c1; color: #e4e4e4; } #info { padding: 14px; border-radius: 5px; } #update { padding: 6px; } #form { background: #fff; } /* replaces esri-widget--panel */ .scroller { overflow-x: hidden; overflow-y: auto; } </style> <script> require([ "esri/views/MapView", "esri/Map", "esri/widgets/Sketch/SketchViewModel", "esri/Graphic", "esri/layers/GraphicsLayer", "esri/layers/FeatureLayer", "esri/widgets/Expand", "esri/widgets/FeatureForm" ], function ( MapView, Map, SketchViewModel, Graphic, GraphicsLayer, FeatureLayer, Expand, FeatureForm ) { let highlight, editFeature; const featureLayer = new FeatureLayer({ url: "http://localhost:6080/arcgis/rest/services/test/Request_Area/FeatureServer/0", outFields: ["*"], popupEnabled: false, id: "HotspotsLayer" }); // GraphicsLayer to hold graphics created via sketch view model const graphicsLayer = new GraphicsLayer({ id: "tempGraphics" }); const map = new Map({ basemap: "gray", layers: [graphicsLayer, featureLayer] }); const view = new MapView({ container: "viewDiv", map: map, center: [44.7502, 41.725524], zoom: 12 }); const 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 } }; const polylineSymbol = { type: "simple-line", // autocasts as new SimpleLineSymbol() color: "#8A2BE2", width: "4", style: "dash" }; const polygonSymbol = { type: "simple-fill", // autocasts as new SimpleFillSymbol() color: "red", style: "solid", outline: { color: "red", width: 1 } }; var attributes; view.when(function () { // create a new sketch view model const sketchViewModel = new SketchViewModel({ view, layer: graphicsLayer, pointSymbol, polylineSymbol, polygonSymbol }); setUpClickHandler(); // *********************************************************** // 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); } }) .catch(function(error) { console.log("==============================================="); console.error("[ applyEdits ] FAILURE: ", error.code, error.name, error.message); console.log("error = ", error); }); } // Listen to create-complete event to add a newly created graphic to view sketchViewModel.on("create-complete", addGraphic); // Listen the sketchViewModel's update-complete and update-cancel events sketchViewModel.on("update-complete", updateGraphic); sketchViewModel.on("update-cancel", updateGraphic); // აქედან ვიწყებ ხვალ===================================================== // 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: attributes }); graphicsLayer.add(graphic); const edits = { //Fire the addFeatures function using the completed graphic addFeatures: [graphic] }; applyEdits(edits); console.log(graphic); } // Runs when sketchViewModel's update-complete or update-cancel // events are fired. function updateGraphic(event) { // Create a new graphic and set its geometry event.geometry var graphic = new Graphic({ geometry: event.geometry, symbol: editGraphic.symbol }); graphicsLayer.add(graphic); // set the editGraphic to null update is complete or cancelled. editGraphic = null; } // set up logic to handle geometry update and reflect the update on "graphicsLayer" function setUpClickHandler() { view.on("click", function (event) { view.hitTest(event).then(function (response) { var results = response.results; if (results.length > 0) { for (var i = 0; i < results.length; i++) { // Check if we're already editing a graphic if (!editGraphic && results[i].graphic.layer.id === "tempGraphics") { // Save a reference to the graphic we intend to update editGraphic = results[i].graphic; // Remove the graphic from the GraphicsLayer // Sketch will handle displaying the graphic while being updated graphicsLayer.remove(editGraphic); sketchViewModel.update(editGraphic); break; } } } }); }); } // activate the sketch to create a polygon var drawPolygonButton = document.getElementById("polygonButton"); drawPolygonButton.onclick = function () { // set the sketch to create a polygon geometry sketchViewModel.create("polygon"); setActiveButton(this); }; }); }); </script> </head> <body> <div id="viewDiv"></div> <div id="topbar"> <button class="action-button esri-icon-polygon" id="polygonButton" type="button" title="Draw polygon"></button> </div> <div id="info" class="esri-widget"> <h3>მონიშნეთ ობიექტი მონაცემების შესაცვლელად</h3> </div> <div id="update" class="esri-widget esri-hidden"> <div id="form" class="scroller esri-component"></div> <input type="button" class="esri-button" value="მონაცემების ატვირთვა" id="btnUpdate" /> <br /> <div id="deleteArea"> <input type="button" class="esri-button" value="წაშალეთ ინციდენტი" id="btnDelete" /> </div> </div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

kenbuja · Accepted Answer

Version 4.10 made breaking changes to the SketchViewModel, so you'll have to re-write your code: Changes for SketchViewModel at 4.10 | ArcGIS API for JavaScript 4.14