Re: Radio buttons work fine with Dynamic layers but not with feature layers

EdwardGriffin

Hi

I have modified a piece of code originally used here: http://developers.arcgis.com/en/javascript/sandbox/sandbox.html?sample=layers_web_tiled

It works absolutely fine with dynamic layers but not with feature layers. With feature layers I can use the radio buttons once i.e. turn all the layers on, but then none of the layers turn off again.

Code:

[HTML]<script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
   dojo.require("esri.arcgis.utils");
   dojo.require("esri.layers.ArcGISDynamicMapServiceLayer");
     
      var map;
      function init() {
       
  var initialExtent = new esri.geometry.Extent({"xmin": 1089971.6232999992,"ymin":4748140.810900001,"xmax":2089534.8891000012,"ymax": 6194292.3109,"spatialReference":{"wkid":2193}});
  map = new esri.Map("map", {extent:initialExtent});
       
        var layers = [{
  "options":{
  "id": "Healthy", "visible": true
  },
  "url": "https://aserver/arcgis/rest/services/NZHS/Indicator4/MapServer"
  },
  {
  "options":{
  "id": "Mental", "visible": false
  },
  "url": "https://aserver/arcgis/rest/services/NZHS/Indicator2/MapServer"
  },
  {
  "options":{
  "id": "Active", "visible": false
  },
  "url": "https://aserver/arcgis/rest/services/NZHS/Indicator3/MapServer"
  }];

       
        // clear out the side bar
        dojo.byId("leftPane").innerHTML = "";
        // create and add the layers
        var layerDiv = dojo.create("div");
        dojo.forEach(layers, function(l) {
          var lyr = new esri.layers.ArcGISDynamicMapServiceLayer(l.url, l.options);
          map.addLayer(lyr);
          // add a radio button for the layer
          dojo.create("input", {
            "type": "radio",
            "checked": l.options.visible,
            "name": "tiledLayers",
            "id": l.options.id,
            "value": l.options.id
          }, layerDiv);
          // then a label
          dojo.create("label", {
            "for": l.options.id,
            "innerHTML": l.options.id + "<br />"
          }, layerDiv);
        });
        // add the radio buttons to the page
        dojo.place(layerDiv, dojo.byId("leftPane"));

        // event delegation to toggle layers
        dojo.connect(dojo.byId("leftPane"), "onclick", toggleLayer);
      }

      function toggleLayer(e) {
        console.log("clicked: ", e, dojo.byId(e.target.id));
        if ( ! dojo.byId(e.target.id) ) {
          // return if we cannot find the DOM node for a layer
          return;
        }
        // hide other layers
        dojo.forEach(map.layerIds, function(id) {
          map.getLayer(id).hide();
        });
        // show the layer with the clicked radio button
        var layer = map.getLayer(e.target.id);
        layer.show();

       }
    

  
     //show map on load
      dojo.ready(init);[/HTML]


Is there any reason why it should be doing this? Is it due to feature layers being driven client side? How can I fix it?

Cheers

Ed

JasonZou

Ed, below code only hides the map service layers, like tiled or dynamic map service layers. Feature layers are a special type of graphics layers. map.graphicsLayerIds contains ids of all the graphics layers loaded to the map, including the feature layers.

// hide other layers dojo.forEach(map.layerIds, function(id) {      map.getLayer(id).hide(); });

Below code will hide all the feature layers. If you like to hide all the graphics layers, then simply move layer.hide(); out of the if statement.

// hide all feature layers dojo.forEach(map.graphicsLayerIds, function(id) {      var layer = map.getLayer(id);      if (layer.declaredClass === "esri.layers.FeatureLayer") {         layer.hide();      } });

Same idea applies if you like to show a feature layer.