Layout Example Template to Toggle Mapservices on/off..

AlexGray · ‎09-15-2010

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

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.show();
        }
      }

      function hideImageTiledLayers(layers) {
        for (var j=0, jl=map.layerIds.length; j<jl; j++) {
          var layer = map.getLayer(map.layerIds);
          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>

KellyHutchins · ‎09-16-2010

Your code was really close, you just need to remove the var from in front of the section where you create the layers (see below).

  imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {id:"imageryPrime"});
  map.addLayer(imageryPrime);

  streetMap = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", "streetMap");
  shadedRelief = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer", "shadedRelief");
  ngsTopoUS = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", "ngsTopoUS");
  boundariesWorld = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer", "boundariesWorld");

AlexGray · ‎09-20-2010

Your code was really close, you just need to remove the var from in front of the section where you create the layers (see below).

  imageryPrime = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {id:"imageryPrime"});
  map.addLayer(imageryPrime);

  streetMap = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", "streetMap");
  shadedRelief = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer", "shadedRelief");
  ngsTopoUS = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer", "ngsTopoUS");
  boundariesWorld = initLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer", "boundariesWorld");

Kelly,

Thanks for your help.. after I made the changes you suggested it worked great..

I then tried to add some data of my own.. just a simple county boundary to overlay on the other layers.. Unfortunately, it doesn't seem to be working correctly.. actually, not at all..

here is the code I added..

Line 106 countyBoundary = initLayer("http://gis1.co.frederick.va.us/ArcGIS/rest/services/County_Boundary/MapServer","countyBoundary");

Line 108 map.addLayer(countyBoundary);

Line 171 <button dojoType="dijit.form.Button" onClick="changeMap([countyBoundary]);">County Boundary</button>

Do you have any I idea why this wouldn't work?

Thanks,
Alex