Exercise 7

UMD JS API Workshop

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Exercise 7</title>

var map = new Map({
        basemap: "topo-vector",
        ground: "world-elevation"
      });
        
      var view = new SceneView({
        container: "viewDiv",
        map: map,
        center: [-117.195658, 34.056677],
        scale: 5000
      });

var blue = [82, 82, 122, 0.9];
      var white = [255, 255, 255, 0.8];

// polygon symbol used for sketching the extruded building footprints
      var extrudedPolygon = {
        type: "polygon-3d",
        symbolLayers: [
          {
            type: "extrude",
            size: 10, // extrude by 10 meters
            material: {
              color: white
            },
            edges: {
              type: "solid",
              size: "3px",
              color: blue
            }
          }
        ]
      };

// polyline symbol used for sketching routes
      var route = {
        type: "line-3d",
        symbolLayers: [
          {
            type: "line",
            size: "10px",
            material: {
              color: white
            }
          },
          {
            type: "line",
            size: "3px",
            material: {
              color: blue
            }
          }
        ]
      };

// point symbol used for sketching points of interest
      var point = {
        type: "point-3d",
        symbolLayers: [
          {
            type: "icon",
            size: "20px",
            resource: { primitive: "kite" },
            outline: {
              color: blue,
              size: "3px"
            },
            material: {
              color: white
            }
          }
        ]
      };

/****************************************
       * 
       * This is all the code that makes the UI work!
       *
       *  **************************************/
      sketchViewModel.on("create", function (event) {
        if (event.state === "complete") {
          document.getElementById("startbuttons").style.display = "inline";
          document.getElementById("actionbuttons").style.display = "none";
        }
        if (event.state === "cancel") {
          document.getElementById("startbuttons").style.display = "inline";
          document.getElementById("actionbuttons").style.display = "none";
        }
      });

// graphic backup to revert a canceled update process
      let updatebackupgraphic;

sketchViewModel.on("update", function (event) {
        console.log(event);
        if (event.state === "start") {
          updatebackupgraphic = event.graphics[0].clone();
          document.getElementById("startbuttons").style.display = "none";
          document.getElementById("actionbuttons").style.display = "inline";
        }
        if (event.state === "complete") {
          if (event.aborted) {
            // revert to the graphic before starting the update process
            graphicsLayer.remove(event.graphics[0]);
            graphicsLayer.add(updatebackupgraphic);
          }
          document.getElementById("startbuttons").style.display = "inline";
          document.getElementById("actionbuttons").style.display = "none";
        }
      });

const drawButtons = Array.prototype.slice.call(document.getElementsByClassName("starttool"));

// set event listeners to activate sketching graphics
      drawButtons.forEach(function (btn) {
        btn.addEventListener("click", function (event) {
          // to activate sketching the create method is called passing in the geometry type
          // from the data-type attribute of the html element
          sketchViewModel.create(event.target.getAttribute("data-type"));
          document.getElementById("startbuttons").style.display = "none";
          document.getElementById("actionbuttons").style.display = "inline";
        });
      });

document.getElementById("cancel").addEventListener("click", function (event) {
        sketchViewModel.cancel();
      });
      document.getElementById("done").addEventListener("click", function (event) {
        sketchViewModel.complete();
      });

view.ui.add("sketchPanel", "top-right");

});
  </script>
</head>
<body>
    <div id="viewDiv"><div id="sketchPanel" class="esri-widget">
      <div id="startbuttons">
        <button id="point" data-type="point" class="esri-button starttool">Draw a point of interest</button>
        <button id="line" data-type="polyline" class="esri-button starttool">Draw a route</button>
        <button id="extrudedPolygon" data-type="polygon" class="esri-button starttool">Draw a building</button>
      </div>
      <div id="actionbuttons">
        <button id="cancel" class="esri-button">Cancel</button>
        <button id="done" class="esri-button">Done</button>
      </div>
    </div>
    </div>
    
</body>
</html>

Exercise 7 - Sketching in 3D

Instructions:

First off, don't worry if your map doesn't load or looks funky at first, it might, but we're missing pieces for the code already over there and JavaScript doesn't usually like that. In this exercise we're going to make our own 3D points/lines/polygons!

Good news is that this is very doable in JavaScript! Instead of a feature layer, we are going to be manipulating a graphics layer to let us draw on the fly.

Bad news is that this interfaces with some of the more complicated concepts in programming, like a "View Model". But don't be intimidated even though there's a fair amount of code!

Exercise:

1. Update Require Statement
First, add a reference for our GraphicsLayer and SketchViewModel in our require statement and include it in our function parameters.

"esri/layers/GraphicsLayer",
"esri/widgets/Sketch/SketchViewModel"

2. Create Graphics Layer
This will be the layer that we actually sketch on.

var graphicsLayer = new GraphicsLayer({
elevationInfo: {
mode: "on-the-ground"
}
});
map.add(graphicsLayer);

3. Instantiate View Model
A View Model is, boiled down to it's basics, just a way for us to get our API to interact with our browser, by exposing our "view" variable that we've been using all this time.

In the code window I've already included some variables for our points, lines, and polygons symbols. We're going to include them in our SketchViewModel so that our browser knows how to draw these graphics. So be sure to paste this code below those variables, you'll have to scroll down a bit! (Probably around line 118)

var sketchViewModel = new SketchViewModel({
layer: graphicsLayer,
view: view,
pointSymbol: point,
polygonSymbol: extrudedPolygon,
polylineSymbol: route,
snappingOptions: { selfEnabled: true }
});

And now our sketching should work! Create some buildings of your own on Esri Campus!

Challenges:

There was a lot of code in this one. Can you read through the functions and SketchViewModel events and understand what is happening? Comprehension of code is important in learning JavaScript! Also, can you make the building taller? Why not make a skyscraper in Redlands campus?

Final Solution