AnsweredAssumed Answered

Dojo Layouts and Scope

Question asked by mcieri on Dec 15, 2015
Latest reply on Dec 16, 2015 by mcieri

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[i];
    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>

Outcomes