Adding a Legend to a map with radio buttons

[EdwardGriffin]

Hi All

I am modifying this webmap to show my own data, using feature layers instead of tiled maps:

http://developers.arcgis.com/en/javascript/samples/layers_web_tiled/

Is there anyway of adding a legend to the map to reflect each layer that is selected?


snippet:
[HTML]dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.dijit.Legend");

     
      var map;
      function init() {
        map = new esri.Map("map", {
          center: [-118.483, 34.025],
          zoom: 13
        });
       
        // various tile server names
        var mq = ["mtile01", "mtile02", "mtile03", "mtile04"];
        var abc = ["a", "b", "c"];

        // info used to create web tile layers
       
        var layers = [{
          "options": {
            "id": "MapQuest", "visible": true, "tileServers": mq,
            "attribution": "�2012 MapQuest  -  Portions �2012 NAVTEQ, Intermap"
          },
          "url": "http://${0}.mqcdn.com/tiles/1.0.0/vx/map/${1}/${2}/${3}.jpg"
        }, {
          "options": {
            "id": "OpenCycleMap", "visible": false, "tileServers": abc,
            "attribution": "<a href=\"http://www.opencyclemap.org/\">Map tiles from OpenCycleMap</a>"},
          "url": "http://${0}.tile.opencyclemap.org/cycle/${1}/${2}/${3}.png"
        }, {
          "options": {
            "id": "Trulia Crime Heat Map", "visible": false, 
            "attribution": "Heat map tiles from <a href=\"http://www.trulia.com/local/#crimes/los-angeles-ca\">Trulia</a>"},
          "url": "http://tiles.trulia.com/tiles/crime_heatmap/${0}/${1}/${2}.png"
        }];
       
        // 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.WebTileLayer(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();

        // update the attribution
        console.log("layer copyright: ", layer.copyright);
        if ( layer.copyright ) {
          dojo.byId("attribution").innerHTML = layer.copyright;
        }
      }
[/HTML]

I tried to add this:

[HTML]var legend = new esri.dijit.Legend({
          map       :map,
          layerInfos: [
    {layer:lyrr, title:"legend"}]
        }, "legendDiv");
        legend.startup();[/HTML]

before the

[HTML]map.addLayer(lyr);[/HTML]

This works in as much as the legend shows - but the radio buttons disappear and only the first visible layer shows

Any help would be most useful!

Cheers

Ed