Trouble getting the legend to work

SwenWaschk — Thu, 21 Jul 2011 19:46:26 GMT
Hi,

I'm in a bit of a struggle here. I don't seem to be able to get the legend to work here. Maybe i'm overlooking something.
dojo.require("esri.map");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.dijit.OverviewMap");
dojo.require("esri.toolbars.draw"); 
dojo.require("esri.toolbars.edit");
dojo.require("esri.dijit.Legend");
 
    var layer, map, editToolbar, ctxMenuForGraphics, selected, visible = []; 
 
    function init() {
  
  esriConfig.defaults.map.slider = {left : "23px", top : "65px", width : null, height : "200px"};
  esri.bundle.toolbars.draw.addPoint = "Klik om een punt toe te voegen";
  esri.bundle.toolbars.draw.start = "Klik om te beginnen met tekenen";
  esri.bundle.toolbars.draw.resume = "Klik om verder te tekenen";
  esri.bundle.toolbars.draw.complete = "Dubbelklik om te voltooien";
  esri.bundle.toolbars.draw.freehand = "Druk om te beginnen en laat los om te voltooien";
  
        var initExtent = new esri.geometry.Extent({"xmin":126966,"ymin":359066,"xmax":198909,"ymax":401108,"spatialReference":{"wkid":28992}});
  
        map = new esri.Map("map", {extent: initExtent , logo: false});
  
  //Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service     
        var basemap = new esri.layers.ArcGISDynamicMapServiceLayer("http://atlas.sre.nl/ArcGIS/rest/services/OpenStreetMapZW/MapServer"); 
        map.addLayer(basemap);
  
  //Add the layer for the layerlist
        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://atlas.sre.nl/ArcGIS/rest/services/Gemeentegrenzen/MapServer"); 
 
        if (layer.loaded) { 
          buildLayerList(layer);
        } 
        else { 
          dojo.connect(layer, "onLoad", buildLayerList); 
        }
  
  dojo.connect(map,'onLayersAddResult',function(results){
         //add the legend
          var legend = new esri.dijit.Legend({
            map:map,
            layerInfos:[{layer:dynamicLayer,title:"Public Safety"}],
            arrangement:esri.dijit.Legend.ALIGN_RIGHT
          },"legendDiv");
          legend.startup();
        });
  
  //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in  
        //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm 
        var resizeTimer; 
        dojo.connect(map, 'onLoad', function(theMap) { 
          dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized 
            clearTimeout(resizeTimer); 
            resizeTimer = setTimeout(function() { 
              map.resize(); 
              map.reposition(); 
            }, 500); 
          }); 
   //add the overview map  
   var overviewMapDijit = new esri.dijit.OverviewMap(
    {
     map : map, 
     attachTo : "bottom-right", 
     color : "#769dc0", 
     visible : true
    }
   );
   overviewMapDijit.startup(); 
        });
  
  //add the scale bar
  var scalebar = new esri.dijit.Scalebar(
   {
    map : map, 
    scalebarUnit : 'metric'
   }
  );
 
  dojo.connect(map, "onLoad", createToolbarAndContextMenu)
  dojo.connect(map, "onLoad", createToolbar);
         
    } 
 
    function buildLayerList(layer) { 
  var items = dojo.map(layer.layerInfos,function(info,index){ 
   if (info.defaultVisibility) { 
    visible.push(info.id); 
   } 
   return "<input type='checkbox' class='list_item' checked='" + (info.defaultVisibility ? "checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label><br>"; 
        }); 
 
        dojo.byId("layer_list").innerHTML = items.join(""); 
 
        layer.setVisibleLayers(visible);
  
        map.addLayer(layer); 
 
    } 
 
    function updateLayerVisibility() { 
        var inputs = dojo.query(".list_item"), input; 
     
        visible = []; 
 
        dojo.forEach(inputs,function(input){ 
   if (input.checked) { 
    visible.push(input.id); 
   } 
        }); 
        
  //if there aren't any layers visible set the array to be -1 
   if(visible.length === 0){ 
    visible.push(-1); 
   } 
  layer.setVisibleLayers(visible); 
    }
   
 function createToolbarAndContextMenu(map) { 
 // Create and setup editing tools 
  editToolbar = new esri.toolbars.Edit(map);
  
  dojo.connect(map,"onClick", function(evt){ 
   editToolbar.deactivate();
   //navToolbar.deactivate();
  });
  
  createMapMenu(); 
  createGraphicsMenu();
 }
   

 function createMapMenu() { 
 // Creates right-click context menu for map 
  ctxMenuForMap = new dijit.Menu({ 
   onOpen: function(box) {           
    editToolbar.deactivate(); 
   } 
  }); 
  
  /*ctxMenuForMap.addChild(new dijit.MenuItem({  
   label: "Add Point", 
   onClick: function addToMap (geometry) { 
    map.showZoomSlider(); 
    var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25])); 
    var graphic = new esri.Graphic(geometry, symbol); 
    map.graphics.add(graphic);
   } 
  }));*/ 
    
  
  ctxMenuForMap.startup(); 
  ctxMenuForMap.bindDomNode(map.container); 
 } 
   
 function createGraphicsMenu() { 
 // Creates right-click context menu for GRAPHICS 
   ctxMenuForGraphics = new dijit.Menu({}); 
  ctxMenuForGraphics.addChild(new dijit.MenuItem({  
   label: "bewerken", 
   onClick: function() { 
    if(selected.geometry.type !== "point"){ 
      editToolbar.activate(esri.toolbars.Edit.EDIT_VERTICES, selected); 
    } 
    else{ 
      alert("Niet van toepassing"); 
    } 
   }  
  })); 
  
  
  ctxMenuForGraphics.addChild(new dijit.MenuItem({  
   label: "verplaatsen", 
   onClick: function() { 
    editToolbar.activate(esri.toolbars.Edit.MOVE, selected); 
   }  
  })); 
 
  ctxMenuForGraphics.addChild(new dijit.MenuItem({  
   label: "roteren/schaal", 
   onClick: function() { 
    if(selected.geometry.type !== "point"){ 
     editToolbar.activate(esri.toolbars.Edit.ROTATE | esri.toolbars.Edit.SCALE, selected); 
    } 
    else{ 
     alert("Niet van toepassing"); 
    } 
   } 
  })); 
 
  /*ctxMenuForGraphics.addChild(new dijit.MenuItem({  
   label: "Style", 
   onClick: function() { 
    alert("Not implemented"); 
   } 
  })); */
    
  ctxMenuForGraphics.addChild(new dijit.MenuSeparator()); 
  ctxMenuForGraphics.addChild(new dijit.MenuItem({  
   label: "verwijderen", 
   onClick: function() { 
    map.graphics.remove(selected); 
   } 
  })); 
 
  ctxMenuForGraphics.startup(); 
  
  dojo.connect(map.graphics, "onMouseOver", function(evt) { 
     // We'll use this "selected" graphic to enable editing tools 
     // on this graphic when the user click on one of the tools 
     // listed in the menu. 
   selected = evt.graphic; 
  
     // Let's bind to the graphic underneath the mouse cursor            
   ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode()); 
  }); 
  
  
  dojo.connect(map.graphics, "onMouseOut", function(evt) { 
   ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode()); 
  }); 
 } 
   
 function createToolbar(themap) { 
  dojo.connect(dijit.byId('map'), 'resize', function() { 
   resizeMap(); 
  }); 
  
  toolbar = new esri.toolbars.Draw(map); 
   
  dojo.connect(toolbar, "onDrawEnd", addToMap); 
 } 
  
 function addToMap(geometry) { 
  toolbar.deactivate(); 
  map.showZoomSlider(); 
   switch (geometry.type) { 
    case "point": 
       var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, 10, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1), new dojo.Color([0,255,0,0.25]));
       break; 
    case "polyline": 
       var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH, new dojo.Color([255,0,0]), 1); 
       break; 
    case "polygon": 
       var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); 
       break; 
    case "extent": 
       var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2), new dojo.Color([255,255,0,0.25])); 
       break;
   } 
  
  var graphic = new esri.Graphic(geometry, symbol); 
  map.graphics.add(graphic); 
 }
 
dojo.addOnLoad(init);
Thanks in advance for all your help.
Re: Trouble getting the legend to work

derekswingley1 — Thu, 21 Jul 2011 22:57:20 GMT
Try changing "dynamicLayer" to "layer" in your legend's layerInfos object.
Re: Trouble getting the legend to work

SwenWaschk — Fri, 22 Jul 2011 04:48:39 GMT
Thanks, I'll try it a.s.a.p. and let you know if it did the trick.
Re: Trouble getting the legend to work

SwenWaschk — Sat, 10 Sep 2011 11:37:52 GMT
well i've got it working! thanks!
topic Re: Trouble getting the legend to work in ArcGIS JavaScript Maps SDK Questions

Trouble getting the legend to work

Re: Trouble getting the legend to work

Re: Trouble getting the legend to work

Re: Trouble getting the legend to work
