Exercise 10 - 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/MapView",
  "esri/Map",
  /*** ADD ***/
  "esri/layers/GraphicsLayer",
  "esri/Graphic",
  "esri/geometry/geometryEngine"
], function(MapView, 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();

map.add(bufferLayer);

3. Symbols
We need a symbol for the buffer we're going to create since these a client-side graphics. So this will create both a "fill" for the buffer and a point symbol as well.

var bufferSymbol = {
  type: "simple-fill", // autocasts as new SimpleFillSymbol()
  color: [140, 140, 222, 0.5],
  outline: {
    color: [0, 0, 0, 0.5],
    width: 2
  }
};

var pointSymbol = {
  type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
  color: [255, 0, 0],
  outline: {
    color: [255, 255, 255],
    width: 1
  },
  size: 7
};

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) {
  bufferLayer.add(new Graphic({
    geometry: point,
    symbol: pointSymbol
  }));

  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?


Final Solution