agray7501

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

Discussion created by agray7501 on Oct 13, 2010
Latest reply on Oct 15, 2010 by Tonyalmeida
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

Outcomes