topic Dojo Layouts and Scope in ArcGIS JavaScript Maps SDK Questions

Dojo Layouts and Scope

MatthewCieri — Sat, 11 Dec 2021 16:46:37 GMT

Hi Javascript Guru's,

As stated in a post a few days ago I am trying to learn javascript and i am pretty sure I am not understanding scope in terms of dojo. My goal is to create a layout that looks something like this.

I look at my code and it seems like it should create it but i am obviously missing something. All my javascript tools work if i don't add in a dojo layout and just use a standard div. It seems that what ever i am missing skips the whole tool bar and non map javascript and css.

Any help would be appreciated!

Thanks,

Matt

<!DOCTYPE html>




<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
   <title>ArcGIS API for JavaScript | Basic Search</title>
   <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
   <style>
      html,
      body,
      #map {
         height: 100%;
         width: 100%;
         margin: 0;
         padding: 0;
      }
      #BasemapToggle {
        position: absolute;
        top: 55px;
        right: 74px;
        z-index: 2;
      }
      #search {
         display: block;
         position: absolute;
         z-index: 2;
         top: 55px;
         left: 74px;
  background-color: white;
      }
      


           
      


      .zoominIcon {
        background-image: url(images/nav_zoomin.png);
        width: 16px;
        height: 16px;
      }


      .zoomoutIcon {
        background-image: url(images/nav_zoomout.png);
        width: 16px;
        height: 16px;
      }


      .zoomfullextIcon {
        background-image: url(images/nav_fullextent.png);
        width: 16px;
        height: 16px;
      }


      .zoomprevIcon {
        background-image: url(images/nav_previous.png);
        width: 16px;
        height: 16px;
      }


      .zoomnextIcon {
        background-image: url(images/nav_next.png);
        width: 16px;
        height: 16px;
      }


      .panIcon {
        background-image: url(images/nav_pan.png);
        width: 16px;
        height: 16px;
      }


      .deactivateIcon {
        background-image: url(images/nav_decline.png);
        width: 16px;
        height: 16px;
      }     

       .Turnoff {
        background-image: url(images/nav_decline.png);
        width: 16px;
        height: 16px;
      }     



   </style>
   
  <script>dojoConfig = {parseOnLoad: true}</script>  
    <script src="https://js.arcgis.com/3.15/"></script>
  
    
  <script>
require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane"]);
  </script>  
   
   
  <script>
   var map;
   
      require([


        "esri/map",
        "esri/dijit/Search",
        "esri/dijit/BasemapToggle",
        "esri/layers/ArcGISDynamicMapServiceLayer",  
  "esri/tasks/QueryTask",
  "esri/tasks/query",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/InfoTemplate",
  "dojo/_base/Color",
        "esri/toolbars/navigation",
        "dojo/on",
        "dojo/parser",
        "dijit/registry",
        "dijit/Toolbar",
        "dijit/form/Button",
        "dojo/domReady!"


      ], 
      
      
       function (Map, Search, BasemapToggle, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, Navigation, on, parser, registry) {
          
          parser.parse();


          var navToolbar;
         
         
         var map = new Map("map", {
            basemap: "topo",
            center: [-120.435, 46.159], // lon, lat
            zoom: 7
         });
         
         
        var toggle = new BasemapToggle({
        map: map,
        basemap: "satellite"
        }, "BasemapToggle");


          


         var s = new Search({
            map: map
         }, "search");
        s.startup();
        toggle.startup();
        
      var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer", {
        "id": "oilAndGasLayer",
        "opacity": 0.75
      });
      map.addLayer(oilAndGasLayer).visible=false;   


  var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {
          "id": "rivers",
        "opacity": 0.75
  });
  map.addLayer(layer).visible=false; 
  

  //initialize query task
  queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");


  //initialize query
  query = new Query();
  query.returnGeometry = true;
  query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];


  //initialize InfoTemplate
  infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");


  //create symbol for selected features
  symbol = new SimpleMarkerSymbol();
  symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
  symbol.setSize(20);
  symbol.setColor(new Color([255,255,0,0.5])); 
  
  
  function executeQueryTask(population) {
  //set query based on what user typed in for population;
  query.where = "POP1990 > " + population;


  //execute query
  queryTask.execute(query,showResults);
}


function showResults(featureSet) {
  //remove all graphics on the maps graphics layer
  map.graphics.clear();


  //Performance enhancer - assign featureSet array to a single variable.
  var resultFeatures = featureSet.features;


  //Loop through each feature returned
  for (var i=0, il=resultFeatures.length; i<il; i++) {
    //Get the current feature from the featureSet.
    //Feature is a graphic
    var graphic = resultFeatures;
    graphic.setSymbol(symbol);


    //Set the infoTemplate.
    graphic.setInfoTemplate(infoTemplate);


    //Add graphic to the map graphics layer.
    map.graphics.add(graphic);
  }
}  
        
         
          navToolbar = new Navigation(map);
          on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);


          registry.byId("zoomin").on("click", function () {
            navToolbar.activate(Navigation.ZOOM_IN);
          });


          registry.byId("zoomout").on("click", function () {
            navToolbar.activate(Navigation.ZOOM_OUT);
          });


          registry.byId("zoomfullext").on("click", function () {
            navToolbar.zoomToFullExtent();
          });


          registry.byId("zoomprev").on("click", function () {
            navToolbar.zoomToPrevExtent();
          });


          registry.byId("zoomnext").on("click", function () {
            navToolbar.zoomToNextExtent();
          });


          registry.byId("pan").on("click", function () {
            navToolbar.activate(Navigation.PAN);
          });


          registry.byId("deactivate").on("click", function () {
            navToolbar.deactivate();
          });


          registry.byId("Turnoff").on("click", function () {
            if (oilAndGasLayer.visible === true) {
  oilAndGasLayer.hide();
            } else { 
              oilAndGasLayer.show();    
            }



          });          


          function extentHistoryChangeHandler () {
            registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
            registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
          }
         






      on(dojo.byId('btnExec'), 'click', function(){  
        executeQueryTask(dojo.byId('population').value);  
      }); 


      on(dojo.byId('btnExec2'), 'click', function(){  
        if (layer.visible === true) {
  layer.hide();
        } else { 
            layer.show();    
        }
      });  




   //closing of main function
   });
   




   </script>
</head>


<body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">

    <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'">
      <div data-dojo-type="dijit/form/Button" id="zoomin"  data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
      <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
      <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
      <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
      <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
      <div data-dojo-type="dijit/form/Button" id="Turnoff" data-dojo-props="iconClass:'deactivateIcon'">Turn OffLayer</div>
    </div>


  <div id="search" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
  US city population greater than :<input type="text" id="population" value="500000" />  
  <input type="button" value="Get Details" id="btnExec"/> 
  <input type="button" value="Turn of Purple" id="btnExec2"/>  
  </div>


  <div id="map" class="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" >
    <div id="BasemapToggle"></div>
    </div>


</div>




</body>


</html>

Re: Dojo Layouts and Scope

JeffJacobson — Tue, 15 Dec 2015 18:30:43 GMT

I have an example on Plunker that has a similar layout that you might want to use as a reference.

The first thing I would do is use your browser's debugging tools (F12 activates these in Chrome, Firefox, and IE) and see if any errors are occurring in your JavaScript code. It's possible an exception might be happening before the toolbar setup code happens.

Another thing to try (if you're not seeing an error in the browser's error console) is to use dojo/ready to ensure all of your Dojo components and DOM elements have loaded before doing anything else. (If you put all of your JavaScript at the bottom of the <body> element, you usually don't need to use dojo/ready, though.)

Re: Dojo Layouts and Scope

MatthewCieri — Tue, 15 Dec 2015 18:40:46 GMT

The only error i am seeing is:

TypeError: registry.byId(...) is undefined

http://localhost/test_js/queryLayer_w_template.html

Line 216

This is whats leading me to believe that it is scope related as its defined when i don't have the layout.

I will also take a look at your code.

Thanks,

Matt

Re: Dojo Layouts and Scope

RobertScheitlin__GISP — Sat, 11 Dec 2021 16:46:40 GMT

Matthew,

You do not want to use parser.parse and dojo config parse on load together in your code.

I fixed some other code issues as well (like not using a dojo content container as the div that you are adding the search dijit to):

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
  <title>ArcGIS API for JavaScript | Basic Search</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css" />
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #BasemapToggle {
      position: absolute;
      top: 55px;
      right: 74px;
      z-index: 2;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 55px;
      left: 74px;
      background-color: white;
    }

    .zoominIcon {
      background-image: url(images/nav_zoomin.png);
      width: 16px;
      height: 16px;
    }

    .zoomoutIcon {
      background-image: url(images/nav_zoomout.png);
      width: 16px;
      height: 16px;
    }

    .zoomfullextIcon {
      background-image: url(images/nav_fullextent.png);
      width: 16px;
      height: 16px;
    }

    .zoomprevIcon {
      background-image: url(images/nav_previous.png);
      width: 16px;
      height: 16px;
    }

    .zoomnextIcon {
      background-image: url(images/nav_next.png);
      width: 16px;
      height: 16px;
    }

    .panIcon {
      background-image: url(images/nav_pan.png);
      width: 16px;
      height: 16px;
    }

    .deactivateIcon {
      background-image: url(images/nav_decline.png);
      width: 16px;
      height: 16px;
    }

    .Turnoff {
      background-image: url(images/nav_decline.png);
      width: 16px;
      height: 16px;
    }
  </style>
  <script src="https://js.arcgis.com/3.15/"></script>

  <script>
    var map;
    require([
        "esri/map",
        "esri/dijit/Search",
        "esri/dijit/BasemapToggle",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/InfoTemplate",
        "dojo/_base/Color",
        "esri/toolbars/navigation",
        "dojo/on",
        "dojo/parser",
        "dijit/registry",
        "dijit/Toolbar",
        "dijit/form/Button",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojo/domReady!"
      ],
      function (Map, Search, BasemapToggle, ArcGISDynamicMapServiceLayer, QueryTask, Query, SimpleMarkerSymbol, InfoTemplate, Color, Navigation, on, parser, registry) {

        parser.parse();

        var navToolbar;
        var map = new Map("map", {
          basemap: "topo",
          center: [-120.435, 46.159], // lon, lat
          zoom: 7
        });

        var toggle = new BasemapToggle({
          map: map,
          basemap: "satellite"
        }, "BasemapToggle");
        toggle.startup();

        var s = new Search({
          map: map
        }, "search");
        s.startup();

        var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer", {
          "id": "oilAndGasLayer",
          "opacity": 0.75
        });
        map.addLayer(oilAndGasLayer).visible = false;

        var layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer", {
          "id": "rivers",
          "opacity": 0.75
        });
        map.addLayer(layer).visible = false;

        //initialize query task
        queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");

        //initialize query
        query = new Query();
        query.returnGeometry = true;
        query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];

        //initialize InfoTemplate
        infoTemplate = new InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");

        //create symbol for selected features
        symbol = new SimpleMarkerSymbol();
        symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
        symbol.setSize(20);
        symbol.setColor(new Color([255, 255, 0, 0.5]));

        function executeQueryTask(population) {
          //set query based on what user typed in for population;
          query.where = "POP1990 > " + population;
          //execute query
          queryTask.execute(query, showResults);
        }

        function showResults(featureSet) {
          //remove all graphics on the maps graphics layer
          map.graphics.clear();

          //Performance enhancer - assign featureSet array to a single variable.
          var resultFeatures = featureSet.features;

          //Loop through each feature returned
          for (var i = 0, il = resultFeatures.length; i < il; i++) {
            //Get the current feature from the featureSet.
            //Feature is a graphic
            var graphic = resultFeatures;
            graphic.setSymbol(symbol);

            //Set the infoTemplate.
            graphic.setInfoTemplate(infoTemplate);

            //Add graphic to the map graphics layer.
            map.graphics.add(graphic);
          }
        }
        navToolbar = new Navigation(map);
        on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);

        registry.byId("zoomin").on("click", function () {
          navToolbar.activate(Navigation.ZOOM_IN);
        });

        registry.byId("zoomout").on("click", function () {
          navToolbar.activate(Navigation.ZOOM_OUT);
        });

        registry.byId("zoomfullext").on("click", function () {
          navToolbar.zoomToFullExtent();
        });

        registry.byId("zoomprev").on("click", function () {
          navToolbar.zoomToPrevExtent();
        });

        registry.byId("zoomnext").on("click", function () {
          navToolbar.zoomToNextExtent();
        });

        registry.byId("pan").on("click", function () {
          navToolbar.activate(Navigation.PAN);
        });

        registry.byId("deactivate").on("click", function () {
          navToolbar.deactivate();
        });

        registry.byId("Turnoff").on("click", function () {
          if (oilAndGasLayer.visible === true) {
            oilAndGasLayer.hide();
          } else {
            oilAndGasLayer.show();
          }
        });

        function extentHistoryChangeHandler() {
          registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
          registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
        }

        on(dojo.byId('btnExec'), 'click', function () {
          executeQueryTask(dojo.byId('population').value);
        });


        on(dojo.byId('btnExec2'), 'click', function () {
          if (layer.visible === true) {
            layer.hide();
          } else {
            layer.show();
          }
        });
        //closing of main function
      });
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%;">

    <div id="navToolbar" data-dojo-type="dijit/Toolbar" data-dojo-props="region:'top'">
      <div data-dojo-type="dijit/form/Button" id="zoomin" data-dojo-props="iconClass:'zoominIcon'">Zoom In</div>
      <div data-dojo-type="dijit/form/Button" id="zoomout" data-dojo-props="iconClass:'zoomoutIcon'">Zoom Out</div>
      <div data-dojo-type="dijit/form/Button" id="zoomfullext" data-dojo-props="iconClass:'zoomfullextIcon'">Full Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomprev" data-dojo-props="iconClass:'zoomprevIcon'">Prev Extent</div>
      <div data-dojo-type="dijit/form/Button" id="zoomnext" data-dojo-props="iconClass:'zoomnextIcon'">Next Extent</div>
      <div data-dojo-type="dijit/form/Button" id="pan" data-dojo-props="iconClass:'panIcon'">Pan</div>
      <div data-dojo-type="dijit/form/Button" id="deactivate" data-dojo-props="iconClass:'deactivateIcon'">Deactivate</div>
      <div data-dojo-type="dijit/form/Button" id="Turnoff" data-dojo-props="iconClass:'deactivateIcon'">Turn OffLayer</div>
    </div>

    <div id="searchDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'">
      <div id="search"></div>
      US city population greater than :
      <input type="text" id="population" value="500000" />
      <input type="button" value="Get Details" id="btnExec" />
      <input type="button" value="Turn of Purple" id="btnExec2" />
    </div>

    <div id="map" class="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
      <div id="BasemapToggle"></div>
    </div>
  </div>
</body>

</html>

Re: Dojo Layouts and Scope

MatthewCieri — Wed, 16 Dec 2015 16:00:54 GMT

Hi Robert,

Thanks again for looking into this for me. It worked perfectly.

Matt