Graphic layer visibility

PramodHarithsa1 · ‎08-14-2012

I have few static graphic layers which are created on load by running few queries.

var countiesGraphicsLayer = new esri.layers.GraphicsLayer();
                //QueryTask returns a featureSet.
                for (var i = 0, il = featureSet.features.length; i < il; i++) {
                     //Feature is a graphic 
                    var graphic = featureSet.features;
                    graphic.setSymbol(symbol);
                    graphic.setInfoTemplate(infoTemplate);
                    var ext = graphic.geometry.getExtent();
                    map.setExtent(ext);
                    var length = graphic.geometry.paths[0].length;
                    var pointxy = graphic.geometry.paths[0][(length / 2) - 1];
                    var point = new esri.geometry.Point(pointxy[0], pointxy[1], new esri.SpatialReference({ wkid: 102100 }));
                    //var simpleMarkerSymbol = new esri.symbol.PictureMarkerSymbol('image/E1BA914F.png', 32, 32);
                    var simpleMarkerSymbol = new esri.symbol.PictureMarkerSymbol({
                        "type": "esriPMS",
                        "url": "image/E1BA914F.png",
                        "contentType": "image/png",
                        "color": null,
                        "width": 32,
                        "height": 32,
                        "angle": 0,
                        "xoffset": 16,
                        "yoffset": 8
                    });

                    var balloon = new esri.Graphic(point, simpleMarkerSymbol);
                    
                    countiesGraphicsLayer.add(balloon);
                }
                map.addLayer(countiesGraphicsLayer);

similarly i have 2 more graphic layer.
I want to toggle their visibility using a check box. How can i proceed?

__Rich_ · ‎08-14-2012

What have you tried so far?

PramodHarithsa1 · ‎08-14-2012

What have you tried so far?

i had this logic
if(layer.visible=true)
layer.hide();
else
layer.show();
on click of check box..
on hide(); makes the layer change its visibility by with show it doesn't re-appear!

is it something related to scope of my layer?

__Rich_ · ‎08-14-2012

i had this logic
if(layer.visible=true)
layer.hide();
else
layer.show();
on click of check box..
on hide(); makes the layer change its visibility by with show it doesn't re-appear!

is it something related to scope of my layer?

In JavaScript a single equals sign is an assignment operator, a double equals sign is a comparison operator.

Or, in geeky terms = != ==
😛

https://developer.mozilla.org/en-US/docs/JavaScript/Reference#Operators

Does that help?

SrikanthNarra · ‎08-15-2012

Hi Good Morning Hope doing well
please go through this code

<!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,IE=9" />
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Dynamically Create Map Service Layer List</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>

    <script type="text/javascript">

      dojo.require("esri.map");

      var layer, map, visible = [];

      function init() {
        map = new esri.Map("map");
        layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");

        if (layer.loaded) {
          buildLayerList(layer);
        }
        else {
          dojo.connect(layer, "onLoad", buildLayerList);
        }
      }

      function buildLayerList(layer) {
        var items = dojo.map(layer.layerInfos,function(info,index){
          if (info.defaultVisibility) {
            visible.push(info.id);
          }
          return "<input type='checkbox' class='list_item'" + (info.defaultVisibility ? "checked=checked" : "") + "' id='" + info.id + "' onclick='updateLayerVisibility();' /><label for='" + info.id + "'>" + info.name + "</label>";
        });

        dojo.byId("layer_list").innerHTML = items.join(' ');

        layer.setVisibleLayers(visible);
        map.addLayer(layer);

      }

      function updateLayerVisibility() {
        var inputs = dojo.query(".list_item"), input;

        visible = [];

        dojo.forEach(inputs,function(input){
          if (input.checked) {
              visible.push(input.id);
          }
          });
        //if there aren't any layers visible set the array to be -1
        if(visible.length === 0){
          visible.push(-1);
        }
        layer.setVisibleLayers(visible);
      }

      dojo.addOnLoad(init);

    </script>

</head>

<body>
    This sample loads an ArcGISDynamicMapServiceLayer.<br />
    It determines the layers in the map service and presents them as checkboxes that can be used to toggle their visibility.<br />
    <br />
    Layer List : <span id="layer_list"></span><br />
    <br />
    <div id="map" class="claro" style="width:600px; height:400px; border:1px solid #000;"></div>
</body>
</html>

PramodHarithsa1 · ‎08-15-2012

In JavaScript a single equals sign is an assignment operator, a double equals sign is a comparison operator.

Or, in geeky terms = != ==
😛

https://developer.mozilla.org/en-US/docs/JavaScript/Reference#Operators

Does that help?

LOL that was a typo.. i didn't have = in my actual code!
== really didn't help 😞 since i already had it !

__Rich_ · ‎08-16-2012

LOL that was a typo.. i didn't have = in my actual code!
== really didn't help 😞 since i already had it !

Ok, good 🙂

How have you hooked up your code? e.g. how is that "layer" variable being set? Is it passed as an argument to an event handler, if so from where?

Happy to help steer your own attempts towards a working solution...