ArcGIS API Layer Hide/Show

by Alex Azuero

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css">
<script src="http://js.arcgis.com/3.14/"></script>Layer List :
    <span id="layer_list">
    <input type='checkbox' class='list_item' id='layer0CheckBox' value=0 />Cities&nbsp;&nbsp;

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

CSS

html, body, #map {
          height: 100%;
          width: 100%;
          margin: 0;
          padding: 0;
      }
      body {
          background-color: #FFF;
          overflow: hidden;
          font-family:"Trebuchet MS";
      }

JavaScript

var map;

      require([
          "esri/map",
          "esri/layers/ArcGISDynamicMapServiceLayer",
          "esri/layers/ImageParameters",
          "dojo/dom",
          "dojo/on",
          "dojo/query",
          "dojo/domReady!"],

      function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, dom, on, query) {
          var layer1, layer2;

          map = new Map("map", {
              basemap: "topo",
              center: [-106.61, 35.1107],
              zoom: 8
          });
function drawSeries1(){
          var point = new esri.geometry.Point(-106.61, 35.1107);
          point = esri.geometry.geographicToWebMercator(point);
          var symbol = new esri.symbol.PictureMarkerSymbol("https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png", 32, 32);
          var graphic = new esri.Graphic(point, symbol);
          layer1 = new esri.layers.GraphicsLayer();
          layer1.add(graphic);
          map.addLayer(layer1);
         
}
          drawSeries1();
           layer1.hide();
          var point2 = new esri.geometry.Point(-105.2, 35.1207);
          point2 = esri.geometry.geographicToWebMercator(point2);
          var symbol2 = new esri.symbol.PictureMarkerSymbol("https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/128/Map-Marker-Marker-Outside-Chartreuse.png", 32, 32);
          var graphic2 = new esri.Graphic(point2, symbol2);
          var layer2 = new esri.layers.GraphicsLayer();
          layer2.add(graphic2);
          map.addLayer(layer2);
          

          $('input:checkbox').change(function () {
              if ($(this).is(':checked')) {
                   //map.graphics(layer1).hide();
                 layer1.show();
                  layer2.hide();
                  // map.graphics.hide();  
              } else {
                  layer1.hide();
                  layer2.show();
              }
              function hideLayer1(){}
              function...