GET RID OF LEGEND?

[JuneAcosta]

I downloaded the simple viewer, but I need to get rid of the legend. I modified the the desktop.css by setting display: none for the selector, but when I set the display: none on the #leftpane the about button as well as the legend goes away.

My questions are: how do I get rid of the legend? Should I be controlling it in the .css? How do I get rid of the legend in the ipad.css, but still keep the about button?

Thanks in advance!

[Anonymous User · Accepted solution]

Hi June,

In the FixedSplitterfragment1.html file comment out the code below:

<li id="listItemLegend" data-dojo-type="dojox.mobile.TabBarButton" moveTo="legendSubView" selected="true"></li>

  <div id="legendSubView" data-dojo-type="dojox.mobile.ScrollableView" selected="true">     <div id="legendContainer">       <div id="legendHeader"></div>       <div id="legendDiv"></div>     </div>   </div>

And in the layout.js file you will want to comment out:

if (layerInfo.length > 0) {     var legendDijit = new esri.dijit.Legend({       map       :map,       layerInfos:layerInfo     }, 'legendDiv');     legendDijit.startup();   } else {     dojo.byId('legendDiv').innerHTML = i18n.viewer.sidePanel.message;   }

And for removing the button on a smartphone you would comment out:

// 'Legend' button     var legendToolBarButton = new dojox.mobile.ToolBarButton({       id     :'legendToolbarButton',       toggle :true,       icon   :'images/legendIcon.png',       style  :{         float        :'right',         width        :'44px',         'padding-top':'2px'       },       onClick:function () {         legendButtonSelectionHandler();       }     });     // for smartphones only, add the legend toolbar button to the right side of the header     if (isSmartPhone)       dijit.byId('rightPanelHeader').addChild(legendToolBarButton);

// build the div the will house the legend widget     if (isSmartPhone) {       var legendBackground = dojo.create('div', null, dojo.byId('rightPane'));       dojo.attr(legendBackground, 'id', 'legendBackgroundDiv');       dojo.setStyle(legendBackground, 'bottom', '2px');       dojo.setStyle(legendBackground, 'height', '180px');       dojo.setStyle(legendBackground, 'right', '5px');       dojo.setStyle(legendBackground, 'left', '5px');       dojo.setStyle(legendBackground, 'background-color', '#FFF');       dojo.setStyle(legendBackground, 'position', 'absolute');       dojo.setStyle(legendBackground, 'z-index', '10');       dojo.setStyle(legendBackground, 'opacity', '.8');       dojo.setStyle(legendBackground, 'overflow', 'scroll');       dojo.setStyle(legendBackground, '-webkit-border-radius', '6px');       dojo.setStyle(legendBackground, '-moz-border-radius', '6px');       dojo.setStyle(legendBackground, 'border-radius', '6px');       dojo.place('legendDiv', 'legendBackgroundDiv', 'first');       dojo.setStyle('legendDiv', 'margin', '1px');       dojo.setStyle('legendDiv', 'padding', '1px');       dojo.setStyle('legendDiv', 'font-size', '0.7em');       dojo.setStyle(legendBackground, 'display', 'none');     }

It's also worth checking out the sample here since it has an about button and no legend.  You would need to add the logic/design to view it on a desktop.

[JuneAcosta]

Thanks Chris!