UMD JS API Workshop
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