Community
Select to view content in your preferred language

4.7 SketchView cannot create multipoint

1092
1
Jump to solution
05-11-2018 07:34 AM
TubaKumbara
by
Regular Contributor
‎05-11-2018 07:34 AM

as below code i'm getting error message on console

Uncaught TypeError: Cannot read property 'setTransform' of undefined
at Object.m [as drawPoint] (MapView.js:801)
at h.doRender (MapView.js:792)
at h.d.processRender (MapView.js:322)
at c.renderChild (MapView.js:788)
at c.renderChildren (MapView.js:319)
at c.doRender (MapView.js:315)
at c.d.processRender (MapView.js:322)
at g.renderChild (MapView.js:828)
at g.c.renderChildren (MapView.js:319)
at g.c.doRender (MapView.js:315)

Thanks inadvance.

<!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 SimpleLineSymbol()
color: "#8A2BE2",
width: "4",
style: "dash"
}

var polygonSymbol = { // symbol used for polygons
type: "simple-fill", // autocasts as new SimpleFillSymbol()
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);

function addGraphic(evt) {
var geometry = evt.geometry;
var symbol;

// Choose a valid symbol based on return geometry
switch (geometry.type) {
case "multipoint":
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
});
tempGraphicsLayer.add(graphic);
// 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");
setActiveButton(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);
};

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-15-2018 06:02 AM

Tuba,

   You started to add support for drawing multipoints to your sample but did not complete it and in the process you removed the support for normal points. Here is your sample fixed (comments in the code).

<!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 SimpleLineSymbol()
        color: "#8A2BE2",
        width: "4",
        style: "dash"
      }

      var polygonSymbol = { // symbol used for polygons
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        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);

        function addGraphic(evt) {
          var geometry = evt.geometry;
          var symbol;

          // Choose a valid symbol based on return geometry
          switch (geometry.type) {
//You need to support both point and multipoint in your case statement
            case "multipoint":
            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
          });
          tempGraphicsLayer.add(graphic);
          // 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");
          setActiveButton(this);
        };

//You need to have a different buton for multipoint as you have to use a differnt
//sketchViewModel.create command
        // *************************************
        // activate the sketch to create a multipoint
        // *************************************
        var drawMPointButton = document.getElementById("mPointButton");
        drawMPointButton.onclick = function() {
          // set the sketch to create a point geometry
          sketchViewModel.create("multipoint");
          setActiveButton(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);
        };

        // ***************************************
        // 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[i].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-blank-map-pin" id="mPointButton" type="button" title="Draw multipoint"></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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

1 Reply
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎05-15-2018 06:02 AM

Tuba,

   You started to add support for drawing multipoints to your sample but did not complete it and in the process you removed the support for normal points. Here is your sample fixed (comments in the code).

<!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 SimpleLineSymbol()
        color: "#8A2BE2",
        width: "4",
        style: "dash"
      }

      var polygonSymbol = { // symbol used for polygons
        type: "simple-fill", // autocasts as new SimpleFillSymbol()
        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);

        function addGraphic(evt) {
          var geometry = evt.geometry;
          var symbol;

          // Choose a valid symbol based on return geometry
          switch (geometry.type) {
//You need to support both point and multipoint in your case statement
            case "multipoint":
            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
          });
          tempGraphicsLayer.add(graphic);
          // 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");
          setActiveButton(this);
        };

//You need to have a different buton for multipoint as you have to use a differnt
//sketchViewModel.create command
        // *************************************
        // activate the sketch to create a multipoint
        // *************************************
        var drawMPointButton = document.getElementById("mPointButton");
        drawMPointButton.onclick = function() {
          // set the sketch to create a point geometry
          sketchViewModel.create("multipoint");
          setActiveButton(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);
        };

        // ***************************************
        // 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[i].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-blank-map-pin" id="mPointButton" type="button" title="Draw multipoint"></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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍