topic Re: How do I keep layers from being visible until I ask them to be? in ArcGIS JavaScript Maps SDK Questions

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

AlexGray — Sun, 12 Dec 2021 02:10:49 GMT

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

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

TimRourke — Wed, 13 Oct 2010 17:32:37 GMT

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.

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

AlexGray — Sun, 12 Dec 2021 02:10:51 GMT

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 />";

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

timgogl — Wed, 13 Oct 2010 22:42:59 GMT

layer.show() will make your layer visible.
layer.hide() will make it invisible.

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

AlexGray — Thu, 14 Oct 2010 14:07:34 GMT

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

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

timgogl — Sun, 12 Dec 2021 02:10:54 GMT

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.

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

TimRourke — Thu, 14 Oct 2010 15:24:09 GMT

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.

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

timgogl — Thu, 14 Oct 2010 15:32:51 GMT

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.

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

TonyAlmeida — Thu, 14 Oct 2010 16:21:54 GMT

agray7501, can you post your entire code please?

Thanks,

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

AlexGray — Fri, 15 Oct 2010 11:50:21 GMT

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..

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

TonyAlmeida — Fri, 15 Oct 2010 16:36:04 GMT

When i click on the link all i see is the application with your data, but no source code. I would like to see how you put all the code together.

Thanks,

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

AlexGray — Fri, 15 Oct 2010 17:12:09 GMT

When i click on the link all i see is the application with your data, but no source code. I would like to see how you put all the code together.

Thanks,

Open the application in your browser again.. move the mouse to the top of the page above the map.. RIGHT-Click on the mouse... you should see a menu pop-up... CLICK - 'view page source'.. You should then be able to see all the source code.. then all you need to do is select it all and copy it and paste it into the editor of your choice..

If you can't do that.. then please respond again and I will zip it up.. and attach the code.. I can't post the entire code in the forum because it extends beyond the limits of the forum..

Good Luck..

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

TonyAlmeida — Fri, 15 Oct 2010 17:17:56 GMT

Right!

Thanks.