Error in toggle the Map in JS API

JITENDERKUMAR1 · ‎11-05-2014

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Practice for Java Script</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">

    <script src="http://js.arcgis.com/3.11/"></script>

    <script>
        var map, basemp
        require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/dijit/Basemap",
        "esri/dijit/BasemapToggle",
        "esri/dijit/BasemapLayer",
        "dojo/dom",
        "dojo/on",
        "esri/arcgis/utils",
        "dijit/form/CheckBox",
        "dojo/query"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Basemap, BasemapToggle, BasemapLayer, dom, on, query) {

            map = new Map("map");

            ////Dynamic Map Services
            var aGDM = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");
            var aOMAP = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...");

            ////Tiled Map Services
            var tstreet = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            var ttopo = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
            var trelief = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer");

            //// Using the basemap
            //  var bmLayer = new BasemapLayer({ url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServe..." });
            //   var basempGDM = new Basemap({ layers: [bmLayer], title: "GDM", thumbnailUrl: "bm1.png" })
            //   map = new Map("map", { basemap: "GDM" });

            var maps = [];

            map.addLayer(aGDM);
            maps.push(aGDM);
            map.reorderLayer(aGDM, 0);

            var linfos = [];
            linfos = aGDM.layerInfos;


            on(dom.byId("btnStreet"), "click", function () {
                changeLayer(aGDM);
            });

            on(dom.byId("btnTopo"), "click", function () {
                changeLayer(aOMAP);
            });

            function changeLayer(alname) {
                map.removeLayer(maps[0]);
                maps.length = 0;
                map.addLayer(alname);
                maps.push(alname);
                map.reorderLayer(alname, 0);
                getlayerId(alname);

                //  alert(map.getLayer(map.layerIds[0]).layerInfos[0].name);
            }

            function getlayerId(layerName) {
                var layerInfos = layerName.layerInfos;
                for (var i = 0, il = layerInfos.length; i < il; i++) {
                    var templayerName = layerInfos.name;
                    var layerId = layerInfos.id;
                    var checkBox = new CheckBox({
                        name: "checkBox" + templayerName,
                        value: layerId
                    });
                    checkBox.on("change", function () {
                        var targetLayer = map.getLayer(this.value);
                        targetLayer.setVisibility(!targetLayer.visible);
                        this.checked = targetLayer.visible;
                    });
                  //alert(layerId);
                }
            }
        });
    </script>
  </head>


  <body>
  This is the Practice of Java Script....  <br />
   
    <div id="map" style="width:75%; height:500px; border:1px solid #000; float:left"></div>
    <div id="dbtn" style="width:20%; float:right">
     <button id="btnStreet" style="height:35px; width:80px" title="Switch Map Service">Street</button><br /><br />
       <button id="btnTopo" style="height:35px; width:80px" title="Switch Map Service">Topo</button><br /><br />
    </div><br />
     <div id="Div1" style="width:20%; float:right">
     <button id="Button1" style="height:35px; width:80px" title="Switch Map Service">Street</button><br /><br />
       <button id="Button2" style="height:35px; width:80px" title="Switch Map Service">Topo</button><br /><br />
    </div>
  </body>
</html>

TimWitt2 · ‎11-06-2014

Try this:

You were missing domReady and CheckBox in your function.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Practice for Java Script</title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">


    <script src="http://js.arcgis.com/3.11/"></script>


    <script>
        var map, basemp


        require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",
        "esri/dijit/Basemap",
        "esri/dijit/BasemapToggle",
        "esri/dijit/BasemapLayer",
        "dojo/dom",
        "dojo/on",
        "dijit/form/CheckBox",
        "dojo/query",
  "esri/arcgis/utils",
  "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Basemap, BasemapToggle, BasemapLayer, dom, on,CheckBox, query, arcgisUtils) {


  var checkBox;

            map = new Map("map");


            ////Dynamic Map Srvices
            var aGDM = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/Map...");
            var aOMAP = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...");


            ////Tiled Map Services
            var tstreet = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            var ttopo = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
            var trelief = new ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer");


            //// Using the basemap
            //  var bmLayer = new BasemapLayer({ url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServe..." });
            //   var basempGDM = new Basemap({ layers: [bmLayer], title: "GDM", thumbnailUrl: "bm1.png" })
            //   map = new Map("map", { basemap: "GDM" });


            var maps = [];


            map.addLayer(aGDM);
            maps.push(aGDM);
            map.reorderLayer(aGDM, 0);


            var linfos = [];
            linfos = aGDM.layerInfos;






            on(dom.byId("btnStreet"), "click", function () {
                changeLayer(aGDM);


            });


            on(dom.byId("btnTopo"), "click", function () {
                changeLayer(aOMAP);


            });




            function changeLayer(alname) {
                map.removeLayer(maps[0]);
                maps.length = 0;
                map.addLayer(alname);
                maps.push(alname);
                map.reorderLayer(alname, 0);
                getlayerId(alname);




                //  alert(map.getLayer(map.layerIds[0]).layerInfos[0].name);
            }


            function getlayerId(layerName) {


                var layerInfos = layerName.layerInfos;


                for (var i = 0, il = layerInfos.length; i < il; i++) {
                    var templayerName = layerInfos.name;
                    var layerId = layerInfos.id;


                    checkBox = new CheckBox({
                        name: "checkBox" + templayerName,
                        value: layerId


                    });
                    checkBox.on("change", function () {
                        var targetLayer = map.getLayer(this.value);
                        targetLayer.setVisibility(!targetLayer.visible);
                        this.checked = targetLayer.visible;
                    });


                  //alert(layerId);
                   
                  
                }
            }




        });
    </script>
  </head>


  <body>
  This is the Practice of Java Script....  <br />
   
    <div id="map" style="width:75%; height:500px; border:1px solid #000; float:left"></div>
    <div id="dbtn" style="width:20%; float:right">
     <button id="btnStreet" style="height:35px; width:80px" title="Switch Map Service">Street</button><br /><br />
       <button id="btnTopo" style="height:35px; width:80px" title="Switch Map Service">Topo</button><br /><br />
    </div><br />
     <div id="Div1" style="width:20%; float:right">
     <button id="Button1" style="height:35px; width:80px" title="Switch Map Service">Street</button><br /><br />
       <button id="Button2" style="height:35px; width:80px" title="Switch Map Service">Topo</button><br /><br />
    </div>
  </body>


</html>