topic Re: DynamicMapServiceLayer not Visible onload in ArcGIS JavaScript Maps SDK Questions

DynamicMapServiceLayer not Visible onload

TimothyWilcoxon — Sat, 11 Dec 2021 11:07:24 GMT

http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_legendvisible.html

I saw this example and wanted to see if there was a way to have the check box not checked(dynampic map not visible) when the page was loaded. For example not have the "Fire" layer visible when the page was loaded.
Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples  
      on iOS devices--> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>Updating the legend to display visible layers</title>  
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css">  
    <style>  
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; } 
      #rightPane{ 
        width:20%; 
      } 
      #legendPane{ 
        border: solid #97DCF2 1px; 
      } 
      
    </style>  
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>  
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>  
    <script type="text/javascript">  
      dojo.require("dijit.layout.BorderContainer"); 
      dojo.require("dijit.layout.ContentPane"); 
      dojo.require("dijit.layout.AccordionContainer"); 
      dojo.require("esri.map"); 
      dojo.require("esri.dijit.Legend"); 
      dojo.require("esri.arcgis.utils"); 
      dojo.require("dijit.form.CheckBox"); 
       
      var map; 
      var legendLayers = []; 
 
      function init() { 
        var initialExtent = new esri.geometry.Extent({"xmin":-13133288,"ymin":4020012,"xmax":-13016186,"ymax":4090945,"spatialReference":{"wkid":102100}}); 
        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 basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); 
        map.addLayer(basemap); 
 
        var quakeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer",{id:'quakes'}); 
 
        legendLayers.push({layer:quakeLayer,title:'Earthquakes'}); 
         
        var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer",{id:'fire'}); 
 
        legendLayers.push({layer:fireLayer,title:"Fire"}); 
        dojo.connect(map,'onLayersAddResult',function(results){ 
          var legend = new esri.dijit.Legend({ 
            map:map, 
            layerInfos:legendLayers 
          },"legendDiv"); 
          legend.startup(); 
        }); 
        map.addLayers([fireLayer,quakeLayer]); 
 
       dojo.connect(map,'onLayersAddResult',function(results){ 
 
         
        //add check boxes  
        dojo.forEach(legendLayers,function(layer){          
         var layerName = layer.title; 
         var checkBox = new dijit.form.CheckBox({ 
            name: "checkBox" + layer.layer.id, 
            value: layer.layer.id, 
            checked: layer.layer.visible, 
            onChange: function(evt) { 
              var clayer = map.getLayer(this.value); 
              if (clayer.visible) { 
                clayer.hide(); 
              } else { 
                clayer.show(); 
              } 
              this.checked = clayer.visible; 
            } 
          }); 
 
          //add the check box and label to the toc 
          dojo.place(checkBox.domNode,dojo.byId("toggle"),"after"); 
          var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after"); 
           dojo.place("<br />",checkLabel,"after"); 
        }); 
 
        }); 
        //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); 
          }); 
        }); 
      } 
 
 
 
      dojo.addOnLoad(init); 
    </script>  
  </head>  
   
  <body class="claro">  
    <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="true"> 
            <div id="legendDiv"></div> 
          </div> 
          <div dojoType="dijit.layout.ContentPane" title="Natural Disasters" > 
            <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters</span> 
            <div id="toggle" style="padding: 2px 2px;"></div> 
          </div> 
        </div> 
      </div> 
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">  
      </div>  
    </div>  
  </body>  
 
</html>

Re: DynamicMapServiceLayer not Visible onload

HemingZhu — Sat, 11 Dec 2021 11:07:27 GMT

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
<html>  
  <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> 
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples  
      on iOS devices--> 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> 
    <title>Updating the legend to display visible layers</title>  
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.3/js/dojo/dijit/themes/claro/claro.css">  
    <style>  
      html, body { height: 98%; width: 98%; margin: 0; padding: 5px; } 
      #rightPane{ 
        width:20%; 
      } 
      #legendPane{ 
        border: solid #97DCF2 1px; 
      } 
      
    </style>  
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>  
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.3"></script>  
    <script type="text/javascript">  
      dojo.require("dijit.layout.BorderContainer"); 
      dojo.require("dijit.layout.ContentPane"); 
      dojo.require("dijit.layout.AccordionContainer"); 
      dojo.require("esri.map"); 
      dojo.require("esri.dijit.Legend"); 
      dojo.require("esri.arcgis.utils"); 
      dojo.require("dijit.form.CheckBox"); 
       
      var map; 
      var legendLayers = []; 
 
      function init() { 
        var initialExtent = new esri.geometry.Extent({"xmin":-13133288,"ymin":4020012,"xmax":-13016186,"ymax":4090945,"spatialReference":{"wkid":102100}}); 
        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 basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); 
        map.addLayer(basemap); 
 
        var quakeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer",{id:'quakes'}); 
 
        legendLayers.push({layer:quakeLayer,title:'Earthquakes'}); 
         
        var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer",{id:'fire'}); 
 
        legendLayers.push({layer:fireLayer,title:"Fire"}); 
        dojo.connect(map,'onLayersAddResult',function(results){ 
          var legend = new esri.dijit.Legend({ 
            map:map, 
            layerInfos:legendLayers 
          },"legendDiv"); 
          legend.startup(); 
        }); 
        map.addLayers([fireLayer,quakeLayer]); 
 
       dojo.connect(map,'onLayersAddResult',function(results){ 
 
         
        //add check boxes  
        dojo.forEach(legendLayers,function(layer){          
         var layerName = layer.title; 
         var checkBox = new dijit.form.CheckBox({ 
            name: "checkBox" + layer.layer.id, 
            value: layer.layer.id, 
            checked: layer.layer.visible, 
            onChange: function(evt) { 
              var clayer = map.getLayer(this.value); 
              if (clayer.visible) { 
                clayer.hide(); 
              } else { 
                clayer.show(); 
              } 
              this.checked = clayer.visible; 
            } 
          }); 
 
          //add the check box and label to the toc 
          dojo.place(checkBox.domNode,dojo.byId("toggle"),"after"); 
          var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after"); 
           dojo.place("<br />",checkLabel,"after"); 
        }); 
 
        }); 
        //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); 
          }); 
        }); 
      } 
 
 
 
      dojo.addOnLoad(init); 
    </script>  
  </head>  
   
  <body class="claro">  
    <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="true"> 
            <div id="legendDiv"></div> 
          </div> 
          <div dojoType="dijit.layout.ContentPane" title="Natural Disasters" > 
            <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters</span> 
            <div id="toggle" style="padding: 2px 2px;"></div> 
          </div> 
        </div> 
      </div> 
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">  
      </div>  
    </div>  
  </body>  
 
</html>

 var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer",{id:'fire', visible:false});