Change attribute used for renderer

MikeKillion · ‎05-15-2013

Hello,
I'm trying to modify this sample to incorporate my own oil and gas fields layer. I'm having two problems:

1) the fields don't display when the map is first loaded, but will display after I've selected an attribute.

2) after selecting an attribute for rendering, the layer displays with the default symbology - not rendered by the selected attribute. (if the renderer was working it would be displayed using the light yellow to green gradient of the sample code)

Some details:
- the fields service is 10.1, dynamic-enabled
- JSapi v3.4
- SDE-based layer with about 7500 features

The test application can be viewed at http://maps.kgs.ku.edu/test/renderertest.html . The oil fields are located in Kansas.

Complete code is below.

Any thoughts appreciated,
Mike

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title></title>

    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/dojo/dijit/themes/tundra/tundra.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      h3 { margin: 0 0 5px 0; border-bottom: 1px solid #444; text-align: center; }
      .shadow {
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px #888;
        box-shadow: 0 0 5px #888;
      }
      #map{ margin: 0; padding: 0; }
      #feedback {
        background: #fff;
        bottom: 30px;
        color: #444;
        position: absolute;
        font-family: arial;
        height: 400px;
        left: 30px;
        margin: 5px;
        padding: 10px;
        top: 30px;
        width: 300px;
        z-index: 40;
      }
      #note { font-size: 80%; font-weight: 700; padding: 0 0 10px 0; }
      #loading { visibility: hidden; }
      #legendDiv { padding: 10px 0 0 0; }
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.4/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dojo.data.ItemFileReadStore");
      dojo.require("dijit.form.FilteringSelect");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.tasks.GenerateRendererTask");
      dojo.require("esri.dijit.Legend");

      var app = {};

      function init() {
        var ext;
  
  esri.config.defaults.io.proxyUrl = 'http://maps.kgs.ku.edu/proxy.jsp';

  app.dataUrl = "http://services.kgs.ku.edu/arcgis/rest/services/oilgas/oilgas_fields/MapServer/0";  //dynamic enabled, 10.1 service
        app.defaultFrom = "#ffffcc";
        app.defaultTo = "#006837";
        
        app.map = new esri.Map("map", { 
          center: [-85.787, 39.782],
          zoom: 6,
          slider: false,
        });
        
        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer");
        app.map.addLayer(basemap);
        var ref = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer");
        app.map.addLayer(ref);

        // add og fields as a dynamic map service layer
        urlDyn = "http://services.kgs.ku.edu/arcgis/rest/services/oilgas/oilgas_fields/MapServer";
        fieldsLayer = new esri.layers.ArcGISDynamicMapServiceLayer(urlDyn, { 
          id: "og_fields",
          opacity: 0.7,
          visible: false
        });
        app.map.addLayer(fieldsLayer);
      }

 
      function classBreaks(attr) {
  console.log(attr);
  var c1 = app.defaultFrom;
  var c2 = app.defaultTo;
        var classDef = new esri.tasks.ClassBreaksDefinition();
  classDef.classificationField = attr;
        classDef.classificationMethod = "natural-breaks";
        classDef.breakCount = 5;

        var colorRamp = new esri.tasks.AlgorithmicColorRamp();
        colorRamp.fromColor = new dojo.colorFromHex(c1);
        colorRamp.toColor = new dojo.colorFromHex(c2);
        colorRamp.algorithm = "hsv";
        
        classDef.baseSymbol = new esri.symbol.SimpleFillSymbol("solid", null, null);
        classDef.colorRamp = colorRamp;

        var params = new esri.tasks.GenerateRendererParameters();
        params.classificationDefinition = classDef;
        var generateRenderer = new esri.tasks.GenerateRendererTask(app.dataUrl);
        generateRenderer.execute(params, applyRenderer, errorHandler);
      }
      
      function applyRenderer(renderer) {  
    dijit.byId('fieldsdialog').hide();
   
        var optionsArray = [];
        var drawingOptions = new esri.layers.LayerDrawingOptions();
        drawingOptions.renderer = renderer; 
        optionsArray[2] = drawingOptions;
        app.map.getLayer("og_fields").setLayerDrawingOptions(optionsArray);
        app.map.getLayer("og_fields").show();
        
        if ( ! app.hasOwnProperty("legend") ) {
          //createLegend();  //removed for test
        }
      }

      function createLegend() {
        app.legend = new esri.dijit.Legend({
          map : app.map,
          layerInfos : [ {
            layer : app.map.getLayer("og_fields"),
            title : "Oil and Gas Fields"
          } ]
        }, dojo.byId("legendDiv"));
        app.legend.startup();
      }

      function errorHandler(err) {
        console.log("error: ", dojo.toJson(err));
      }

      dojo.ready(init);
    </script>
  </head>

  <body class="tundra">
  <div dojoType="dijit.Dialog" id="fieldsdialog" title="Filter Fields" style="text-align:center;font:normal normal bold 14px arial">
    <div style="text-align:left;font:normal normal normal 12px arial">
      Select attribute to map:
        <select name="fieldattribute" id="fieldattr">
         <option value="CUMM_OIL">Cummulative Oil</option>
            <option value="cumm_gas">Cummulative Gas</option>  <!--trying both upper and lower case values-->
            <option value="AVGDEPTHSL">Average Depth (sea level)</option>
        </select>
        <input type="button" onClick="classBreaks(dojo.byId('fieldattr').value)" value="Go">
    </div>
</div>


    <div data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="map"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">

        <div id="feedback" class="shadow">
          <h3>Change the Attribute Field Used to Render Data</h3>
          <div id="info">
            <div id="note">
              Note:  This sample requires an ArcGIS Server version 10.1 map service to generate a renderer.
            </div>

            <button onClick="dijit.byId('fieldsdialog').show();">Select Attribute</button>

            <img id="loading" src="http://dl.dropbox.com/u/2654618/loading_black.gif" />

            <div id="legendDiv"></div>
          
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

derekswingley1 · ‎05-15-2013

1) the fields don't display when the map is first loaded, but will display after I've selected an attribute.

Your code (and the sample you started with) create a dynamic map service layer with visible: false in the options object. To show the fields (with their default symbology) when the page loads, use this:

urlDyn = "http://services.kgs.ku.edu/arcgis/rest/services/oilgas/oilgas_fields/MapServer";
fieldsLayer = new esri.layers.ArcGISDynamicMapServiceLayer(urlDyn, { 
  id: "og_fields",
  opacity: 0.7
});
app.map.addLayer(fieldsLayer);

2) after selecting an attribute for rendering, the layer displays with the default symbology - not rendered by the selected attribute

The hiccup here was in applyRenderer. The array index used to specify drawingOptions for a layer in optionsArray needs to match the layer index that you're updating. In the sample, this was layer index two. With your map service, you want to update layer index 0. Instead of doing:

optionsArray[2] = drawingOptions;

Do this:

optionsArray[0] = drawingOptions;

Working example: http://jsfiddle.net/StdbT/