Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am attempting to modify the Esri sample below that allows for layers of a dynamic server to be toggled on and off. In my case I want to be able to toggle layers from multiple services.

http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm

My code is below.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
    <!--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>Explicitly Create Map Service Layer List</title>

    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>

    <script type="text/javascript">


      dojo.require("esri.map");


      var layer, map, visible = [];

      function init() {
        map = new esri.Map("map");

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);


        //Use the ImageParameters to set the visible layers in the map service during ArcGISDynamicMapServiceLayer construction.
        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.layerIds = [0];
        imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
        //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://dal-gisweb/ArcGIS/rest/services/XTX-Pipelines-New/MapServer", {"imageParameters":imageParameters});
        map.addLayer(layer);

        //Use the ImageParameters to set the visible layers in the OPPL map service during ArcGISDynamicMapServiceLayer construction.
        var OPPLimageParameters = new esri.layers.ImageParameters();
        OPPLimageParameters.layerIds = [0];
        OPPLimageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
        //can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

        oppllayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://dal-gisweb/ArcGIS/rest/services/CompetitorAssets/MapServer", {"OPPLimageParameters":OPPLimageParameters});
        map.addLayer(oppllayer);
      }
//Sets up the ability for dynamic layers to be toggled.
      function updateLayerVisibility() {
        var inputs = dojo.query(".list_item"), input;
        //in this application layer 2 is always on.
        visible = [];
        for (var i=0, il=inputs.length; i<il; i++) {
          if (inputs[i].checked) {
            visible.push(inputs[i].id);
          }
        }
        //if there aren't any layers visible set the array value to = -1
        if(visible.length === 0){
        visible.push(-1);
        }

        layer.setVisibleLayers(visible);
      }


//Sets up the ability for OPPL layers to be toggled.
    function updateOPPLLayerVisibility(){
        var inputs = dojo.query(".oppl_list_item"), input;
        //Placing layer numbers below will enforce them to be visible.
        visible = [];
        for (var i = 0, il = inputs.length; i < il; i++) {
            if (inputs[i].checked) {
                visible.push(inputs[i].id);
            }
        }
        //if there aren't any layers visible set the array value to = -1
        if(visible.length === 0){
        visible.push(-1);
        }

        oppllayer.setVisibleLayers(visible);

    }

      dojo.addOnLoad(init);
    </script>


  </head>
  <body class="claro">
  This sample loads an ArcGISDynamicMapServiceLayer and presents check boxes for only the layers that should be toggled on and off by users.  <br />

    <b> OPPD: <span id="oppl"></b>
        <br>
        <input type='checkbox' class='oppl_item' checked='checked' id='0' value='0' onclick='updateOPPLLayerVisibility();' /> Transmission
        <br>
        </span><br />

    <b> XTX-Assets: <span id="xtx"></b>
        <br>
        <input type='checkbox'  class='list_item' checked='checked' id='0' value=0 onclick='updateLayerVisibility();'/> Offices
        <br>
        <br />

    <div id="map" class="claro" style="width:1200px; height:600px; border:1px solid #000;"></div>

    </div> 
  </body>
</html>

Thanks for your help.

-Mike

Updated: I should point out that I am able to toggle layers from the "layer" service but not from the "oppllayer". They turn off, but never back on.

share|improve this question
    
Did the answer below fix the Update you had above? I am getting similar behavior. –  Craig Dec 7 '12 at 20:47
    
Yes it did. You might want to post your code in a new topic. The group here is extremely help and very adept and finding problems. –  Mike Long Jan 8 '13 at 18:43

2 Answers 2

up vote 2 down vote accepted

In updateOPPLLayerVisibility(), your dojo query does this:

var inputs = dojo.query(".oppl_list_item"), input;

But the checkbox is styled as oppl_item :

 <input type='checkbox' class='oppl_item' checked='checked' id='0' value='0' onclick='updateOPPLLayerVisibility();' /> Transmission

Try this:

var inputs = dojo.query(".oppl_item"), input;
share|improve this answer
1  
Thanks mwalker, that solved it. I really hate it when I spend days trying to figure something out and it turns out to be a typo. –  Mike Long Jun 1 '11 at 15:19

You might want to check out this blog post and the sample they provide - I implemented the same code in a test site and it worked great:

http://www.roktech.net/_blog/ROK_Blog/post/ArcGIS_Server_JS_API_-_Table_of_Contents_(TOC)_Example/

share|improve this answer
    
This is a good example; but from what I have seen in our running system has issues with the later JSAPI updates and needs some additional tweaks. –  D.E.Wright May 31 '11 at 22:38
    
Thanks Tim, I like what they have done here. I will need to "borrow" some of their code. –  Mike Long Jun 1 '11 at 15:20

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.