[GIS] Setting feature layer selection symbol using ArcGIS API for JavaScript

arcgis-10.1arcgis-javascript-apifeature-layerpopup

I'm trying to add functionality to select a group of parcels as laid out in this example, and display queried information for those parcels in a popup info window. I've got it displaying the queried data in an infowindow correctly, and it highlights the correct parcel for the info being displayed, but I'm having issues highlighting every selected parcel. In the above example it sets the selection symbol with setSelectionSymbol(), but for whatever reason this isn't working for me, and I'm not exactly sure what I'm doing wrong.

I've included the parts of my code that are relevant to my problem, including parts that deal with toggling the parcel layer on and off in a legend.

function init() {
    
    //initialize popup window
     var popup = new esri.dijit.Popup({
    fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25]))
    }, dojo.create("div"));
    
    //add geometry service from server
    esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://2501s-jjohnson:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer");
    
    //initalize map
    app.map = new esri.Map("map", {
      basemap : "satellite",
      center : [-111.924531, 40.611871],
      zoom : 13,
      infoWindow: popup
    });
    
    //query parcel and show info in popup window
     function executeIdentifyTask(evt) {
      var query = new esri.tasks.Query();
      query.geometry = pointToExtent(app.map,evt.mapPoint,10);
      var deferred = featureParcel.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW);
      app.map.infoWindow.setFeatures([deferred]);
      app.map.infoWindow.show(evt.mapPoint);
      console.log(evt.mapPoint);
      
    }
    
    //trigger feature layer parcel query if parcels are turned on 
     function clickConnect(connect){
        if(connect){
            //perform the identify task on click 
            clickHandler = dojo.connect(app.map, "onClick", executeIdentifyTask);
        }else{
            //disconnect the click handler 

          dojo.disconnect(clickHandler);
          clickHandler = null;
          }
          }

    //add parcel layer
     var parcels = new esri.layers.ArcGISDynamicMapServiceLayer("http://2501s-jjohnson:6080/arcgis/rest/services/Parcels_UT/MapServer", {
      id : 'parcels',
      visible : false
    });
    parcelLayer.push({
      layer : parcels,
      title : 'Parcels'
    });
    
    //add parcel feature layer query info for popup window
    var content = "<b>Address</b>: ${ADDR}" + "<br /><b>Owner Name</b>: ${OWNER}" + "<br /><b>Parcel ID</b>: ${APN}" + "<br /><b>City</b>: ${CITY}" + "<br /><b>Acres</b>: ${TOTAL_ACRES}"+ " <br /><a href='${COUNTY_LINK}' target='_blank'>County Assessor Site</a>"   
    var popUpTemplate = new esri.InfoTemplate("Parcel", content);   
      
    //add parcel feature layer
    featureParcel = new esri.layers.FeatureLayer("http://2501s-jjohnson:6080/arcgis/rest/services/Parcels_UT/MapServer/0",{
      mode: esri.layers.FeatureLayer.MODE_SELECTION,
      outFields: ["*"],
      infoTemplate:popUpTemplate
    });

    //set selection Symbol
    var selectionSymbol = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,255,0,0.5]));
    selectionSymbol.setOutline(new esri.symbol.SimpleLineSymbol("solid", new dojo.Color([255,0,0]), 2));
    featureParcel.setSelectionSymbol(selectionSymbol);
    
    //create legend
    dojo.connect(app.map, 'onLayersAddResult', function(results) {
      var legend = new esri.dijit.Legend({
        map : app.map,
        layerInfos : legendLayers
      }, "retail");
      legend.startup();
    });
    //add all layers to map
    app.map.addLayers([parcels]);
    //add layer arrays into  legend object
    legendLayers["parcel"] = parcelLayer;
    
    dojo.connect(app.map, 'onLayersAddResult', function(results) {
        //for each layer array in legend object
        for (var k in legendLayers){
      //add legend check boxes for each layer
      //to toggle layer visibility
      dojo.forEach(legendLayers[k], function(layer) {
        var layerName = layer.title;
        var checkBox = new dijit.form.CheckBox({
          name : "checkBox" + layer.layer.id,
          value : layer.layer.id,
          checked : layer.layer.visible,
          onChange : function(evt) {
            var clayer = app.map.getLayer(this.value);
            clayer.setVisibility(!clayer.visible);
            this.checked = clayer.visible;
            
           //toggle the feature layer parcel query
           //parcelClick indicates whether the parcel layer is on
            if (this.value ==="parcels" && this.checked === true){
                clickConnect(true);
                parcelClick = true;
            } else if (this.value ==="parcels"){
                clickConnect(false);
                parcelClick = false;
            }
          }
        });

        //add the check box and label to the table of contnents
        dojo.place(checkBox.domNode, dojo.byId(k), "after");
        var checkLabel = dojo.create('label', {
          'for' : checkBox.name,
          innerHTML : layerName
        }, checkBox.domNode, "after");
        dojo.place("<br />", checkLabel, "after");
      });
      }
    });

    dojo.connect(app.map, "onLoad", initSelectToolbar);
       }
       
        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;
    var deferred = featureParcel.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW);
    app.map.infoWindow.setFeatures([deferred]);
    app.map.infoWindow.show();
    
  });
}

  function pointToExtent(map, point, toleranceInPixel) {
   var pixelWidth = map.extent.getWidth() / map.width;
   var toleraceInMapCoords = toleranceInPixel * pixelWidth;
   return new esri.geometry.Extent( point.x - toleraceInMapCoords,
                point.y - toleraceInMapCoords,
                point.x + toleraceInMapCoords,
                point.y + toleraceInMapCoords,
                map.spatialReference );                           
  }    
 
  dojo.ready(init);

Best Answer

You are doing two things going on here. You have a click handler, that, when there is a click on the map, it creates a new selection using the point geometry from the click. That handler is toggled on and off by your clickConnect function.

But you also have a draw handler, that on draw end creates a new selection using the geometry from the drawing toolbar. That handler is not toggled on and off by your clickConnect function. It executes whether or not the parcel layer is on.

Try logging to console when either one of these selection queries is triggered. Since both of them create a new selection, I suspect that you are having a conflict between the two selections executing. (And likely the onDrawEnd selection is tripping off even when the parcel layer is turned off.)