topic Re: 4.7 sketchViewModel cannot pass graphic's attributes to updated graphic in ArcGIS JavaScript Maps SDK Questions

4.7 sketchViewModel cannot pass graphic's attributes to updated graphic

TubaKumbara — Wed, 25 Apr 2018 07:54:31 GMT

Hello.

I need to pass graphic's attributes to new graphic which updated by sketchViewModel in "update-complete" event of sketchViewModel. because addGraphic function is adding new graphic on every event and losing attributes.

i think that i need some code as below (red lines)

switch (evt.type) {
      case "draw-complete":
            graphic.attributes = {
            "test": "testdata",
            "id": mygraphicslayer.graphics.count()
         }
        break;
case "update-complete":
   graphic.attributes = OLDGRAPHIC'S.ATTRIBUTES;
   break;
}

addGraphic function code which i used below.

sketchViewModel.on("draw-complete", addGraphic);
sketchViewModel.on("update-complete", addGraphic);
sketchViewModel.on("update-cancel", addGraphic);
function addGraphic(evt) {
var geometry = evt.geometry;
var symbol;
// Choose a valid symbol based on return geometry
switch (geometry.type) {
case "point":
symbol = pointSymbol;
break;
case "polyline":
symbol = polylineSymbol;
break;
default:
symbol = polygonSymbol;
break;
}
// Create a new graphic; add it to the GraphicsLayer
var graphic = new Graphic({
geometry: geometry,
symbol: symbol
});

switch (evt.type) {
case "draw-complete":
graphic.attributes = {
"test": "testdata"
}
break;
}

tempGraphicsLayer.add(graphic);

console.log(graphic.attributes);
// Remove stored reference to the updated graphic
// Required in 'update-complete' callback specifically
updateGraphic= null;
}

Re: 4.7 sketchViewModel cannot pass graphic's attributes to updated graphic

RobertScheitlin__GISP — Wed, 25 Apr 2018 12:32:19 GMT

You could use update-start to capture the old graphics attributes and store them for the update-complete event.

Re: 4.7 sketchViewModel cannot pass graphic's attributes to updated graphic

TubaKumbara — Wed, 25 Apr 2018 13:43:14 GMT

Robert Scheitlin, GISP wrote:
You could use update-start to capture the old graphics attributes and store them for the update-complete event.

Thanks for the answer.

sketchViewModel.on("update-start", getGraphic);
function getGraphic(evt) {
console.log(evt);
}

is "evt" has attributes? because i can't see it. "evt" has geometry, type and target.

target.graphic has no attributes.

Whole code below

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Sketch temporary geometries - 4.7</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
font-family: verdana;
}
#topbar {
background: #fff;
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;
}
</style>
<script>
require([
"esri/views/MapView",
"esri/Map",
"esri/widgets/Sketch/SketchViewModel",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"dojo/domReady!"
], function(
MapView, Map,
SketchViewModel, Graphic, GraphicsLayer
) {
// GraphicsLayer to hold graphics created via sketch view model
var tempGraphicsLayer = new GraphicsLayer();
var updateGraphic;
// Arctic Ocean Basemap
var map = new Map({
basemap: "gray",
layers: [tempGraphicsLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 3
});
var pointSymbol = { // symbol used for points
type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
style: "square",
color: "#8A2BE2",
size: "16px",
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 3 // points
}
}
var polylineSymbol = { // symbol used for polylines
type: "simple-line", // autocasts as new SimpleMarkerSymbol()
color: "#8A2BE2",
width: "4",
style: "dash"
}
var polygonSymbol = { // symbol used for polygons
type: "simple-fill", // autocasts as new SimpleMarkerSymbol()
color: "rgba(138,43,226, 0.8)",
style: "solid",
outline: {
color: "white",
width: 1
}
}
view.when(function() {
// create a new sketch view model
var sketchViewModel = new SketchViewModel({
view: view,
layer: tempGraphicsLayer,
pointSymbol: pointSymbol,
polylineSymbol: polylineSymbol,
polygonSymbol: polygonSymbol
});
setUpClickHandler();
// ************************************************************
// Get the completed graphic from the event and add it to view.
// This event fires when user presses
// * "C" key to finish sketching point, polygon or polyline.
// * Double-clicks to finish sketching polyline or polygon.
// * Clicks to finish sketching a point geometry.
// ***********************************************************
sketchViewModel.on("draw-complete", addGraphic);
sketchViewModel.on("update-complete", addGraphic);
sketchViewModel.on("update-cancel", addGraphic);
sketchViewModel.on("update-start", getGraphic);
function getGraphic(evt) {
console.log(evt);
}

function addGraphic(evt) {

var geometry = evt.geometry;
var symbol;
// Choose a valid symbol based on return geometry
switch (geometry.type) {
case "point":
symbol = pointSymbol;
break;
case "polyline":
symbol = polylineSymbol;
break;
default:
symbol = polygonSymbol;
break;
}
// Create a new graphic; add it to the GraphicsLayer
var graphic = new Graphic({
geometry: geometry,
symbol: symbol
});

switch (evt.type) {
case "draw-complete":
graphic.attributes = {
"test": "testdata"
}
break;
}

tempGraphicsLayer.add(graphic);

console.log(graphic.attributes);
// Remove stored reference to the updated graphic
// Required in 'update-complete' callback specifically
updateGraphic= null;
}
// *************************************
// activate the sketch to create a point
// *************************************
var drawPointButton = document.getElementById("pointButton");
drawPointButton.onclick = function() {
// set the sketch to create a point geometry
sketchViewModel.create("point");
(this);
};
// ****************************************
// activate the sketch to create a polyline
// ****************************************
var drawLineButton = document.getElementById("polylineButton");
drawLineButton.onclick = function() {
// set the sketch to create a polyline geometry
sketchViewModel.create("polyline");
setActiveButton(this);
};
// ***************************************
// 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);
};

var colorButton = document.getElementById("colorButton");
colorButton.onclick = function() {
// set the sketch to create a polygon geometry
polygonSymbol.color = "rgba(255,255,226, 0.8)"
sketchViewModel.create("polygon");
setActiveButton(this);
};
// ***************************************
// activate the sketch to create a rectangle
// ***************************************
var drawRectangleButton = document.getElementById(
"rectangleButton");
drawRectangleButton.onclick = function() {
// set the sketch to create a polygon geometry
sketchViewModel.create("rectangle");
setActiveButton(this);
};
// ***************************************
// activate the sketch to create a circle
// ***************************************
var drawCircleButton = document.getElementById("circleButton");
drawCircleButton.onclick = function() {
// set the sketch to create a polygon geometry
sketchViewModel.create("circle");
setActiveButton(this);
};
// **************
// reset button
// **************
document.getElementById("resetBtn").onclick = function() {
sketchViewModel.reset();
tempGraphicsLayer.removeAll();
setActiveButton();
};
function setActiveButton(selectedButton) {
// focus the view to activate keyboard shortcuts for sketching
view.focus();
var elements = document.getElementsByClassName("active");
for (var i = 0; i < elements.length; i++) {
elements.classList.remove("active");
}
if (selectedButton) {
selectedButton.classList.add("active");
}
}
// ************************************************************************************
// set up logic to handle geometry update and reflect the update on "tempGraphicsLayer"
// ************************************************************************************
function setUpClickHandler() {
view.on("click", function(evt) {
view.hitTest(evt).then(function(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 (!updateGraphic) {
// Save a reference to the graphic we intend to update
updateGraphic = results[results.length - 1].graphic;
// Remove the graphic from the GraphicsLayer
// Sketch will handle displaying the graphic while being updated
tempGraphicsLayer.remove(updateGraphic);
sketchViewModel.update(updateGraphic.geometry);
}
}
});
});
}
});
});
</script>
</head>
<body>
<div id="viewDiv">
<div id="topbar">

<button class="action-button esri-icon-blank-map-pin" id="pointButton" type="button"
title="Draw point"></button>
<button class="action-button esri-icon-polyline" id="polylineButton" type="button"
title="Draw polyline"></button>
<button class="action-button esri-icon-polygon" id="polygonButton" type="button"
title="Draw polygon"></button>
<button class="action-button esri-icon-checkbox-unchecked" id="rectangleButton" type="button"
title="Draw rectangle"></button>
<button class="action-button esri-icon-radio-unchecked" id="circleButton" type="button"
title="Draw circle"></button>
<button class="action-button esri-icon-trash" id="resetBtn" type="button" title="Clear graphics"></button>
</div>
</div>
</body>
</html>

Re: 4.7 sketchViewModel cannot pass graphic's attributes to updated graphic

RobertScheitlin__GISP — Wed, 25 Apr 2018 13:48:19 GMT

Tuba,

You would have to loop through the graphics in the map and find the graphic that has the same geometry as the update-start has and then copy those attributes to use latter. As you can see the sketch widget only works with the geometry. What you are wanting to do is full feature editing which has not been implemented yet so you will have to do a lot of coding manually to get what you want.

Re: 4.7 sketchViewModel cannot pass graphic's attributes to updated graphic

TubaKumbara — Wed, 25 Apr 2018 13:51:37 GMT

thanks for the answer

I solved my problem with below code sometihng like your recommend.

Assining graphic attributes to a variable before update started.

var myatts;
function setUpClickHandler() {
view.on("click", function(evt) {
view.hitTest(evt).then(function(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 (!updateGraphic) {
// Save a reference to the graphic we intend to update
updateGraphic = results[results.length - 1].graphic;
myatts = updateGraphic.attributes;
// Remove the graphic from the GraphicsLayer
// Sketch will handle displaying the graphic while being updated
tempGraphicsLayer.remove(updateGraphic);
sketchViewModel.update(updateGraphic.geometry);
}
}
});
});
}
function addGraphic(evt) {

var geometry = evt.geometry;
var symbol;
// Choose a valid symbol based on return geometry
switch (geometry.type) {
case "point":
symbol = pointSymbol;
break;
case "polyline":
symbol = polylineSymbol;
break;
default:
symbol = polygonSymbol;
break;
}
// Create a new graphic; add it to the GraphicsLayer
var graphic = new Graphic({
geometry: geometry,
symbol: symbol
});

switch (evt.type) {
case "draw-complete":
graphic.attributes = {
"test": "testdata"
}
break;
default :
console.log(myatts);
graphic.attributes = myatts;
break;
}

tempGraphicsLayer.add(graphic);

// Remove stored reference to the updated graphic
// Required in 'update-complete' callback specifically
updateGraphic= null;
}

Re: 4.7 sketchViewModel cannot pass graphic's attributes to updated graphic

RobertScheitlin__GISP — Tue, 01 May 2018 14:58:30 GMT

Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.