How do I keep layers from being visible until I ask them to be?

1189
12
10-13-2010 07:23 AM
AlexGray
New Contributor
I have a webmap project I am working on that accesses mutilple layers within a couple different mapservices. I would like to learn how I can load the layers without them drawing. I've recently incorporated check boxes instead of links to turn each layer on and off. They work but in the reverse way I want them to.

I've not been able to figure out how to keep the layers from drawing until I select a checkbox..
Any ideas or help would be appreciated.. Thanks..

I've included a javascript code snippet from the page

  function init(){
    esri.hide(dojo.byId('loading'));
    dojo.connect(grid, "onRowClick", onRowClickHandler);
    esriConfig.defaults.map.sliderLabel = null;
  
  //Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.
        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [1,2,3,4,5,6,7,8,9];
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_HIDE;
        //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE, LAYER_OPTION_SHOW
  
    
    var initialExtent = new esri.geometry.Extent({
     "xmin": -8746396.760545,
     "ymin": 4719239.393535,
     "xmax": -8683358.936355,
     "ymax": 4791953.233965,
     "spatialReference": {
      "wkid": 102113
     }
    });
    map = new esri.Map("map", {
     extent: initialExtent
    });
    
    //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
    var initBasemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", {
     id: 'ESRI_World_Topo'
    });
    map.addLayer(initBasemap);
    
    dojo.connect(map,'onLoad',function(theMap){
            var scalebar = new esri.dijit.Scalebar({
               map: map,
               scalebarUnit: "english"
              }, dojo.byId("scalebar"));
          });
      
    var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.co.frederick.va.us/ArcGIS/rest/services/Fire_and_Rescue/Fire_and_Rescue/MapServer", {
     id: 'FireRescue',     
     "imageParameters":imageParameters
    });
    fireLayer.setVisibleLayers([3, 7]);    
    legendLayers.push({
     layer: fireLayer,
     title: "Fire Rescue Layers"
    });
    
    var patLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.co.frederick.va.us/ArcGIS/rest/services/Planning/Planning_PAT/MapServer", {
     id: 'PAT',
     opacity: .6,
     "imageParameters":imageParameters
    });
    patLayer.setVisibleLayers([3, 6, 1, 2, 4, 7, 8]);    
    legendLayers.push({
     layer: patLayer,
     title: 'Planning Layers'
    });
    
    dojo.connect(map, 'onLayersAddResult', function(results){
     var legend = new esri.dijit.Legend({
      map: map,
      layerInfos: legendLayers
     }, "legendDiv");
     legend.startup();
    });
    
    
    
    navToolbar = new esri.toolbars.Navigation(map);
    dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
    
    createBasemapGallery();
    dojo.connect(dijit.byId('map'), 'resize', resizeMap);
    
        
    dojo.byId("toggle").innerHTML += "<span>Planning Layers:</span><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='1'onclick=\"JavaScript:toggleSubLayer('PAT',7)\">Urban Development Area</A><br />";
    
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='2'onclick=\"JavaScript:toggleSubLayer('PAT',1)\">Zoning</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='3'onclick=\"JavaScript:toggleSubLayer('PAT',2)\">Agricultural & Forestal Districts</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='4'onclick=\"JavaScript:toggleSubLayer('PAT',3)\">Buildings</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='5'onclick=\"JavaScript:toggleSubLayer('PAT',4)\">Future Land Use</A><br />";
    
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='6'onclick=\"JavaScript:toggleSubLayer('PAT',6)\">Sewer & Water Service Area</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='7'onclick=\"JavaScript:toggleSubLayer('PAT',8)\">County Boundary</A><br /><br />";
    dojo.byId("toggle").innerHTML += "<span>Service Layers:</span><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='8'onclick=\"JavaScript:toggleSubLayer('FireRescue',3)\">Fire Stations</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='9'onclick=\"JavaScript:toggleSubLayer('FireRescue',7)\">Hydrants</A><br />";
    
    map.addLayers([fireLayer, patLayer]); 

  function toggleSubLayer(layerId, subLayerId) {
   var layer = map.getLayer(layerId);
    if(layer && layer.visibleLayers) {
   var visibleLayers = layer.visibleLayers;
   var layerIndex = dojo.indexOf(visibleLayers, subLayerId);
    if(layerIndex === -1) {
     visibleLayers.push(subLayerId);
    } else {
     visibleLayers.splice(layerIndex, 1);
    }
  visibleLayers = (visibleLayers.length > 0) ? visibleLayers : [-1];
  layer.setVisibleLayers(visibleLayers);
  }



Here is the 'body' code for the page..

 <body class="claro" >
  <div class="tundra" id="navToolbar" dojoType="dijit.Toolbar" style="width: 100%;">
    <div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN); selected=true; ">Zoom In</div>
    <div dojoType="dijit.form.Button" id="zoomout" iconClass="zoomoutIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);">Zoom Out</div>
    <div dojoType="dijit.form.Button" id="zoomfullext" iconClass="zoomfullextIcon" onClick="navToolbar.zoomToStartExtent();">Full Extent</div>
    <div dojoType="dijit.form.Button" id="zoomprev" iconClass="zoomprevIcon" onClick="navToolbar.zoomToPrevExtent();">Prev Extent</div>
    <div dojoType="dijit.form.Button" id="zoomnext" iconClass="zoomnextIcon" onClick="navToolbar.zoomToNextExtent();">Next Extent</div>
    <!-- <div dojoType="dijit.form.Button" id="pan" iconClass="panIcon" onClick="navToolbar.activate(esri.toolbars.Navigation.PAN);">Pan</div> -->
    <div dojoType="dijit.form.Button" id="deactivate" iconClass="panIcon" onClick="navToolbar.deactivate()">Pan</div>
  </div>
  <div style="position:absolute; right:70px; top:10px; z-Index:999;">
        <div dojoType="dijit.TitlePane" title="Switch Basemap" closable="false"  open="false">
          <div dojoType="dijit.layout.ContentPane" style="width:380px; height:280px; overflow:auto;">
          <div id="basemapGallery" ></div></div>
        </div></div>
    <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
      <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">       
        <div dojoType="dijit.layout.AccordionContainer">
          <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend"  selected="false">
            <div id="legendDiv"></div>
          </div>
          <div dojoType="dijit.layout.ContentPane" title="Frederick County GIS Layers" selected="true">
            <span style="padding:10px 0;">Click to toggle the visibilty of different Layers.</span><br /><br />
            <div id="toggle" style="padding: 2px 2px; font-size:10px;"></div>   
          </div>
    <div dojoType="dijit.layout.ContentPane" title="Search Tools" selected="false">
   <span style="padding:10px 0;">Coming Soon!</span>
   
     PIN Lookup: <input type="text" id="PARCELID" size="20" value="54    A    25" />
     <input type="button" value="Search" onclick="doFind();" /><br />
     <div id="loading"><img src="http://help.arcgis.com/en/webapi/javascript/arcgis/demos/map/images/loading.gif" /></div>
   </div>    
        </div>
      </div>   
      <div id="map" dojotype="dijit.layout.ContentPane" style="width: 77%; height: 85%;" region="center" style="overflow:hidden;">
      </div>
   <div id="scalebar" style="position:absolute;left:15px;top:84%;"></div>
   <div dojotype="dijit.layout.ContentPane" region="bottom" style="position:absolute;left:5px;top:88%;height:10%;width:77%">
    <table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" rowsPerPage="4" rowSelector="10px">
      <thead>
        <tr>
          <th field="RECNUM" width="15%">PIN</th>
          <th field="MLNAM" width="15%" >Owner 1</th>
          <th field="MFNAM" width="15%">Owner 2</th>
          <th field="MADD1" width="25%">Mailing Address</th>
          <th field="MADD2" width="30%">Zip</th>
        </tr>
      </thead>
    </table>
    </div>
  </div>
  </body>


ADD - here is the web address... http://www.co.frederick.va.us/planning/newmap1copy2.html
0 Kudos
12 Replies
TimRourke
New Contributor
I use the visible parameter of the options when I create the layer:

var layer = new esri.layers.ArcGISDynamicMapServiceLayer(mapServiceUrl, { id: layerId, visible: false});

The id parameter lets you specify the name of the layer, so you can use the name to get the layer from the map's layer collection. The visible parameter set the default visibility of the layer.

See the constructor in JSAPI Reference for ArcGISDynamicMapServiceLayer.
0 Kudos
AlexGray
New Contributor
Tim,

Thanks for the suggestion.. that worked but not I am having a hard time figuring out how to turn them back on with the check-boxes I have set up. I imagine its very simple and something I should know.. Any ideas?

Thanks... my link from earlier still works but doesn't have the visible:false; code in it yet.. I only have that on my development space.

here is my check-box code..

dojo.byId("toggle").innerHTML += "<input type='checkbox'id='1'onclick=\"JavaScript:toggleSubLayer('PAT',7)\">Urban Development Area</A><br />";
    
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='2'onclick=\"JavaScript:toggleSubLayer('PAT',1)\">Zoning</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='3'onclick=\"JavaScript:toggleSubLayer('PAT',2)\">Agricultural & Forestal Districts</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='4'onclick=\"JavaScript:toggleSubLayer('PAT',3)\">Buildings</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='5'onclick=\"JavaScript:toggleSubLayer('PAT',4)\">Future Land Use</A><br />";
    
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='6'onclick=\"JavaScript:toggleSubLayer('PAT',6)\">Sewer & Water Service Area</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='7'onclick=\"JavaScript:toggleSubLayer('PAT',8)\">County Boundary</A><br /><br />";
    dojo.byId("toggle").innerHTML += "<span>Service Layers:</span><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='8'onclick=\"JavaScript:toggleSubLayer('FireRescue',3)\">Fire Stations</A><br />";
    dojo.byId("toggle").innerHTML += "<input type='checkbox'id='9'onclick=\"JavaScript:toggleSubLayer('FireRescue',7)\">Hydrants</A><br />";
0 Kudos
timgogl
New Contributor II
layer.show() will make your layer visible.
layer.hide() will make it invisible.
0 Kudos
AlexGray
New Contributor
Tim,

Thanks for your suggestion.. Unfortunately, I can't seem to figure out how to incorporate it into my existing code.. any ideas?

Thanks,
Alex
0 Kudos
timgogl
New Contributor II
hrm... well. i did something similar recently, but i used the menubar / menuitem to toggle my layers.

i will post that code, maybe it will give you an idea of how i worked it out for myself.

heh. my terminology may not really be spot on.... hopefully my comments will make this fairly easy to interpret.

  function buildMenu(){
   pMenuBar = new dijit.MenuBar({});
   
   var pSubMenu = new dijit.Menu({});
   pSubMenu.addChild(new dijit.MenuItem({
       label: "Close",
       onClick: function(){history.back();}
   }));
   pMenuBar.addChild(new dijit.PopupMenuBarItem({
       label: "File",
       popup: pSubMenu
   }));
   
   var pSubMenu2 = new dijit.Menu({});
   pSubMenu2.addChild(new dijit.MenuItem({
    id: "utilsLayer",
       label: "Utilities",
       iconClass: "showing showIt",//just shows an icon if the layer is visible.
       toggled:true,// trigger for visibility
       onClick: function(){
        changeMenu(this);
       }
   }));
   pSubMenu2.addChild(new dijit.MenuItem({
    id: "photoLayer",
       label: "Photos",
       iconClass: "showing showIt",//just shows an icon if the layer is visible.
       toggled:true,// trigger for visibility
       onClick: function(){
        changeMenu(this);
       }
   }));
   pMenuBar.addChild(new dijit.PopupMenuBarItem({
       label: "Layers",
       popup: pSubMenu2
   }));
   
   pMenuBar.placeAt("toolbar");
   pMenuBar.startup();
  }

  function changeMenu(o){
   changeLayers(o);// <--- this function actually hides / shows the layer
   //insert an icon onto the menu item (check mark) to show layer is active.
   dijit.byId(o.id).attr("iconClass", o.toggled ? "showing hideIt" : "showing showIt");// this changes the icon
   o.toggled = !o.toggled;// this flips the toggle
  }

  function changeLayers(o){
   var oLayer = eval(o.id);// id is a string with the same name as the layer. eval() interprets the string value to the object.
   if(oLayer.visible){ // if the layer is visible
    oLayer.hide(); 
   }else{    // if it is not visible
    oLayer.show();
   }  
  }


so this last function is what does the actual work of the toggle.
i could have as easily [passed it the actual layer object. instead i passed it the menuItem. the id of the menuItem is a string (the name of the layer). by using eval on the string name, oLayer becomes the layer (sort of). anyway, i can now access all the propeties and methods of what ever layer name is passed to the function.  i simply check the visible property, if it is showing, i hide it, if not i show it.
0 Kudos
TimRourke
New Contributor
Lowgas' response looks good to me. We don't use Dojo for anything unless we have to, so any code I posted would be more work than you'd want.
0 Kudos
timgogl
New Contributor II
heh. i have been using both dojo and esri now for 2 days..... its still all in test mode for me. i'm not sure i can handle dojo or not.
0 Kudos
TonyAlmeida
Occasional Contributor II
agray7501, can you post your entire code please?

Thanks,
0 Kudos
AlexGray
New Contributor
Did you see the link in the when I first asked the question.. its a link to the map project.. you should be able to access the code from there..
0 Kudos