topic Feature Layer Selection in ArcGIS JavaScript Maps SDK Questions

Feature Layer Selection

JaclynGorman — Wed, 11 May 2011 21:22:47 GMT

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

Re: Feature Layer Selection

derekswingley1 — Sat, 11 Dec 2021 17:40:18 GMT

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/

Re: Feature Layer Selection

JaclynGorman — Thu, 12 May 2011 16:01:27 GMT

Thank you. With a few changes this worked perfectly.

Re: Feature Layer Selection

JaclynGorman — Sat, 11 Dec 2021 17:40:21 GMT

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