Feature Layer Selection

3988
3
05-11-2011 02:22 PM
JaclynGorman
New Contributor
For the following example:

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/fl/fl_selectfeatures.html

how do you set up a graphic selector similar to this example:

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/graphics/graphics_add.html

Basically, I want the person to be able to choose what color appears when they select the feature layer.  The selection can't be based on an attribute since color selection will be determined by the person using the map and can change next time they use the map.  There will be a choice of 3 colors. I've tried a few things but can't get it to work. Thanks

Jaclyn
0 Kudos
3 Replies
derekswingley1
Frequent Contributor
How about this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
  on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>change feature layer selection color on the fly</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">djConfig = { parseOnLoad:true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");

      var selectionToolbar, featureLayer;
      var syms = {}

      function init() {
        // populate the object used to set the
        // feature layer selection symbol
        syms.red = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5]));
        syms.blue = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,255,0.5]));
        syms.green = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5]));
        
        var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) );
        var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true });
        dojo.connect(map, "onLoad", initSelectToolbar);
        var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(baseMapLayer);
       
        var content = "<b>Status</b>: ${STATUS}" +
                      "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
                      "<br><b>Total Acres</b>: ${APPROXACRE}" +
                      "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
        var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);

        featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate: infoTemplate,
          outFields: ["*"]
        });
        featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
        featureLayer.setSelectionSymbol(syms[dojo.byId('color-select').value]);
        dojo.connect(featureLayer, "onSelectionComplete", sumGasProduction);
        dojo.connect(featureLayer, "onSelectionClear", function(features) {
          dojo.byId('messages').innerHTML = "<i>No Selected Fields</i>";
        });
        //*
        // connect to the drop-down's onchange event and 
        // change the feature layer's selection color
        dojo.connect(dojo.byId('color-select'), 'onchange', function(evt) {
          featureLayer.clearSelection();
          featureLayer.setSelectionSymbol(syms[evt.target.value]);
        });
        //*/
        
        map.addLayer(featureLayer);
      }

      function initSelectToolbar(map) {
        selectionToolbar = new esri.toolbars.Draw(map);
        var selectQuery = new esri.tasks.Query();
        dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
          selectionToolbar.deactivate();
          selectQuery.geometry = geometry;
          featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
        }); 
      }

      function sumGasProduction(features) {
        var productionSum = 0;
        //summarize the cummulative gas production to display 
        dojo.forEach(features, function(feature) {
          productionSum = productionSum + feature.attributes.CUMM_GAS;
        });
        dojo.byId('messages').innerHTML = "<b>Selected Fields Production: " + productionSum + " mcf. </b>";
      }
    dojo.addOnLoad(init);
  </script>

</head>

<body class="claro">
  <button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>
  <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br>
  <select id="color-select">
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select>
  <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>
  <span id="messages"></span>
</body>
</html>


Also try it on JS Fiddle:  http://jsfiddle.net/swingley/HeJux/
0 Kudos
JaclynGorman
New Contributor
Thank you.  With a few changes this worked perfectly.
0 Kudos
JaclynGorman
New Contributor
Can someone help me determine why the following code won't work in IE. It works fine in Firefox.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
  on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
  <title>change feature layer selection color on the fly</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript">djConfig = { parseOnLoad:true };</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>

    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");

      var selectionToolbar, featureLayer;
      var syms = {}
   
   var selectionToolbar2, featureLayer2;
      var syms2 = {}

      function init() {
        // populate the object used to set the
        // feature layer selection symbol
        syms.red = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5]));
        syms.blue = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,255,0.5]));
        syms.green = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5]));
  
  syms2.red = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0,0.5]));
        syms2.blue = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255,0.5]));
        syms2.green = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,255,0,0.5]));
        
        var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) );
        var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true });
        dojo.connect(map, "onLoad", initSelectToolbar);
  dojo.connect(map, "onLoad", initSelectToolbar2);
        var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
        map.addLayer(baseMapLayer);
       
        var content = "<b>Status</b>: ${STATUS}" +
                      "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" +
                      "<br><b>Total Acres</b>: ${APPROXACRE}" +
                      "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters";
        var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content);

        featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
          infoTemplate: infoTemplate,
          outFields: ["*"]
        });
        featureLayer.setDefinitionExpression("PROD_GAS='Yes'");
        featureLayer.setSelectionSymbol(syms[dojo.byId('color-select').value]);
        dojo.connect(featureLayer, "onSelectionClear", function(features) {
          
        });
        //*
        // connect to the drop-down's onchange event and 
        // change the feature layer's selection color
        dojo.connect(dojo.byId('color-select'), 'onchange', function(evt) {
          featureLayer.setSelectionSymbol(syms[evt.target.value]);
        });
        //*/
        
        map.addLayer(featureLayer);
  
  featureLayer2 = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0",{
          mode: esri.layers.FeatureLayer.MODE_ONDEMAND
          
        });
        featureLayer2.setDefinitionExpression("FIELD_NAME is not null");
        featureLayer2.setSelectionSymbol(syms2[dojo.byId('color-select2').value]);
        dojo.connect(featureLayer2, "onSelectionClear", function(features) {
          
        });
        //*
        // connect to the drop-down's onchange event and 
        // change the feature layer's selection color
        dojo.connect(dojo.byId('color-select2'), 'onchange', function(evt) {
          featureLayer2.setSelectionSymbol(syms2[evt.target.value]);
        });
        //*/
        
        map.addLayer(featureLayer2);
      }

      function initSelectToolbar(map) {
        selectionToolbar = new esri.toolbars.Draw(map);
        var selectQuery = new esri.tasks.Query();
        dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) {
          selectionToolbar.deactivate();
          selectQuery.geometry = geometry;
          featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_ADD);
        }); 
      }
   
    function initSelectToolbar2(map) {
        selectionToolbar2 = new esri.toolbars.Draw(map);
        var selectQuery2 = new esri.tasks.Query();
        dojo.connect(selectionToolbar2, "onDrawEnd", function(geometry) {
          selectionToolbar2.deactivate();
          selectQuery2.geometry = geometry;
          featureLayer2.selectFeatures(selectQuery2, esri.layers.FeatureLayer.SELECTION_ADD);
        }); 
      }


      
    dojo.addOnLoad(init);
  </script>

</head>

<body class="claro">
  
  <select id="color-select">
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select>
  <button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>
  <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br>
  
  <select id="color-select2">
    <option>red</option>
    <option>blue</option>
    <option>green</option>
  </select>
  <button dojoType="dijit.form.Button" onClick="selectionToolbar2.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button>
  <button dojoType="dijit.form.Button" onClick="featureLayer2.clearSelection();">Clear Selection</button>
  
  
  <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div>
  <span id="messages"></span>
</body>
</html>


The selection is working but it isn't adding color.

Thanks

Jaclyn
0 Kudos