Exercise 10 3D - Client-side Buffering

Instructions:

You may have heard the term "client-side" before, but what does that actually mean?

The "client" in this case is your web browser! So instead of going back to our feature service, or any servers, we are going to generate a buffer locally on your computer using your web browser.

To do this, we're going to use the GeometryEngine class and buffer by a predefined amount.

Exercise:

1. Update Require
Update your require statement and function definition to include the following:

require([
  "esri/views/SceneView",
  "esri/Map",
  /*** ADD ***/
  "esri/layers/GraphicsLayer",
  "esri/Graphic",
  "esri/geometry/geometryEngine"
], function(SceneView, Map, GraphicsLayer, Graphic, geometryEngine) {

2. Add Graphics Layer
Before we can work with the graphics layer, we need to add it to our map!

var bufferLayer = new GraphicsLayer();

scene.add(bufferLayer);

3. Symbols
We need a symbol for the buffer we're going to create since these a client-side graphics. So for 3D we're going to make a 3D point symbol that has height and width predefined in it.

var bufferSymbol = {
  type: "point-3d", // autocasts as new SimpleFillSymbol()
  symbolLayers: [{
    type: "object",
    width: 10000,
    height: 10000,
    resource: {
      primitive: "sphere"
    },
    material: {
      color:[50, 50, 200, 0.75]
    }
  }]
};

4. Capture Click
Finally, we need to tell our view that when we click on it, we want to create this buffer. To do this, we'll capture the event of the clicking on the view and call a function to generate the buffer.

view.on("click", function(event) {
  bufferPoint(event.mapPoint);
});

function bufferPoint(point) {
  var buffer = geometryEngine.geodesicBuffer(point, 1, "miles");
  bufferLayer.add(new Graphic({
    geometry: buffer,
    symbol: bufferSymbol
  }));
}

Now click around a bunch! You'll likely notice a slight delay, and that's because your computer is doing a bunch of fancy calculations to make this buffer on the fly!

Map Solution

Code Solution


Challenges:

Can you make the buffer large enough to encapsulate all of DC? Also see if you can change the 3D symbol primitive type to a "diamond"!


Final Solution