agray7501

Layout Example Template to Toggle Mapservices on/off..

Discussion created by agray7501 on Sep 15, 2010
Latest reply on Sep 20, 2010 by agray7501
I am trying to work with the "Map Container Split in Three (Headline)" Layout Example for JS api.
http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/layout_MapContainerSplitInThree.html

In addition I am trying to include some JS code from another sample "Toggle layer visibility" into the "Map Container Split in Three (Headline)" layout.. by adding the layer buttons into the first accordion on the left side of the layout.

I am able to get the buttons to show up.. The first Mapservice draws on intialization fine but the others don't show up when I try to toggle them on and off..

I am hoping someone with more experience than I can help walk me through getting this to work so that I might be able to get some of my mapservices into the layout eventually..

Below is the code..

<!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">
    <title>
    </title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/Tundra/Tundra.css">
    <style type="text/css">
      html, body {
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      }
      body{
        background-color:white; overflow:hidden;
        font-family: "Kimberley", sans-serif
      }
      #header {
       -moz-border-radius: 5px;
        margin:2px;
        padding-top: 4px;
        padding-right: 15px;
        background-color:#929761;
        color:#421b14;
        font-size:16pt; text-align:right;font-weight:bold;
        border: solid 2px #79663b;
        height:55px;
      }
      #subheader {
        font-size:small;
        color: #cfcfcf;
        text-align:right;
        padding-right:20px;
      }
      #footer {
        margin:2px;
        padding: 2px;
        background-color:white; color:#2a3537;
        border: solid 2px #79663b;
        font-size:10pt; text-align:center;
        height: 30px;
      }
      #rightPane{
        margin:3px;
        padding:10px;
        background-color:white;
        color:#421b14;
        border: solid 2px #79663b;
        width:20%;
      }
      #leftPane{
        margin:3px;
        padding:5px;
        width:150px;
        color:#3C1700;
        background-color:white;
        border: solid 2px #79663b;
      }
      #map {
        margin:5px;
        border:solid 4px #79663b;
      }
      .shadow{
        /*slight shadow effect added for browsers that support this functionality*/
        -o-border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        box-shadow: 8px 8px 16px #323834;
        -webkit-box-shadow: 8px 8px 16px #323834;
        -moz-box-shadow: 8px 8px 16px #323834;
        -o-box-shadow: 8px 8px 16px #323834;
      }
     
      .nihilo .dijitAccordionText {
        margin-left:4px;
        margin-right:4px;
        color:#5c8503;
      }
    </style>
    <script type="text/javascript">
      var djConfig = {parseOnLoad: true};
    </script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0">
    </script>
    <script type="text/javascript">
      //dojo.require("dijit.dijit"); // optimize: load dijit layer
      dojo.require("esri.map");
   dojo.require("dijit.form.Button");
   dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("dijit.layout.AccordionContainer");
          
      //this global object contains all references needed across functions
      var map;
   var streetMap, imageryPrime, shadedRelief, ngsTopoUS, boundariesWorld;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-8763218.349885626,"ymin":4742964.96245658,"xmax":-8665378.953680733,"ymax":4783858.772589095,"spatialReference":{"wkid":2283}});
        map = new esri.Map("map",{extent:initExtent});
        
  var imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {id:"imageryPrime"});
        map.addLayer(imageryPrime);

        var streetMap = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", "streetMap");
        var shadedRelief = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer", "shadedRelief");
        var ngsTopoUS = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", "ngsTopoUS");
        var boundariesWorld = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer", "boundariesWorld");
      
     map.addLayer(streetMap);
  map.addLayer(shadedRelief);
  map.addLayer(ngsTopoUS);
  map.addLayer(boundariesWorld);
     
        //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);
          });
        });
      }
  
  function initLayer(url, id) {
        var layer = new esri.layers.ArcGISTiledMapServiceLayer(url, {id:id, visible:false});
        map.addLayer(layer);
        return layer;
      }

      function changeMap(layers) {
        hideImageTiledLayers(layers);
        for (var i=0; i<layers.length; i++) {
          layers[i].show();
        }
      }

      function hideImageTiledLayers(layers) {
        for (var j=0, jl=map.layerIds.length; j<jl; j++) {
          var layer = map.getLayer(map.layerIds[j]);
          if (dojo.indexOf(layers, layer) == -1) {
            layer.hide();
          }
        }
      }
  
      //show map on load
      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
      <div id="header" dojotype="dijit.layout.ContentPane" region="top" >
        This is the header section
        <div id="subheader">with a subheader</div>
      </div>
      <div dojotype="dijit.layout.ContentPane" region="left" id="leftPane" >
      <div dojoType="dijit.layout.AccordionContainer">
        <div dojoType="dijit.layout.ContentPane" title="pane 1">
         
   <button dojoType="dijit.form.Button" onClick="changeMap([imageryPrime]);">Imagery</button>
   <button dojoType="dijit.form.Button" onClick="changeMap([imageryPrime,boundariesWorld]);">Imagery/Places</button>
   <button dojoType="dijit.form.Button" onClick="changeMap([streetMap]);">Street Map</button>
   <button dojoType="dijit.form.Button" onClick="changeMap([ngsTopoUS]);">Topographic Map</button>
   <button dojoType="dijit.form.Button" onClick="changeMap([shadedRelief]);">Relief</button>
 
   
        </div>
        <div dojoType="dijit.layout.ContentPane" title="pane 2">
          <p>Content for pane 2</p>
        </div>
        <div dojoType="dijit.layout.ContentPane" title="pane 3">
          <p>Content for pane 3</p>
        </div>
      </div>
      </div>
      <div id="map" class="shadow" dojotype="dijit.layout.ContentPane" region="center" >
      </div>
      <div dojotype="dijit.layout.ContentPane" region="right" id="rightPane" >
        This is the right section
      </div>
      <div id="footer" dojotype="dijit.layout.ContentPane" region="bottom" >
        this is the footer section
      </div>
    </div>
  </body>
</html>

Outcomes