Buffer with different colored rings

[GraySanders]

Hello, i need a little help. I created a  web map that uses the buffer tool with 7 different rings. I want to change the color of each ring. Does anyone know how to do this?

Thanks, Gray

  <script>
    dojo.require("esri.map");
    dojo.require("esri.tasks.geometry");

    var map = null;
    var gsvc = null;

    function initialize() {
      gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
      map.on("click", doBuffer);}

    function doBuffer(evt) {

      map.graphics.clear();
      var params = new esri.tasks.BufferParameters();
      params.geometries = [ evt.mapPoint ];

      //buffer in linear units such as meters, km, miles etc.
      params.distances = [ 100, 200, 300, 350, 400, 500, 540 ];
      params.unit = esri.tasks.GeometryService.UNIT_YARDS;
      params.outSpatialReference = map.spatialReference;

      gsvc.buffer(params, showBuffer);
    }

    function showBuffer(geometries) {
      var symbol = new esri.symbol.SimpleFillSymbol(
        esri.symbol.SimpleFillSymbol.STYLE_SOLID,
        new esri.symbol.SimpleLineSymbol(
          esri.symbol.SimpleLineSymbol.STYLE_SOLID,
          new dojo.Color([255,0,0,0.85]), 2
        ),
        new dojo.Color([0,0,0,0.06])
      );

      dojo.forEach(geometries, function(geometry) {
        var graphic = new esri.Graphic(geometry,symbol);
        map.graphics.add(graphic);
      });
    }

    dojo.ready(initialize);
  </script>

[ATTACH=CONFIG]32460[/ATTACH]

[JakeSkinner · Accepted solution]

Hi Gary,

You could add the buffer graphics to a GraphicsLayer and then symbolize the graphics layer using the UniqueValueRenderer class.

Here is an example.  In the example, I added an attribute called 'ID' to each graphic and set the value to it's index value.  This attribute is then used to display each buffer ring with the unique value renderer.

[GraySanders]

JSkinn3, Thank you it works great. I still have a lot to learn.

Gray

[GraySanders]

JSkinn3, could you please explain how to remove the renderer rings and draw a new set when the map is clicked a second time. I have tried a few different things,  but i think this is what I should use - map.removeLayer(graphicsLayer);. This however returns an error (graphicsLayer is not defined).

Thanks,
Gray

[JakeSkinner]

Hi Gray,

Instead of creating the GraphicsLayer each time the showBuffer function is run, you can create it when the map is loaded.  You can then use the GraphicsLayer clear method.  Here is an example.

If this resolves your issue, don't forget to mark this thread as resolved/answered to help other users in the community.

[GraySanders]

JSkinn3, that was it.

Thanks
Gray