How to add Widgets in excisting code.

irtizahussain · ‎12-03-2018

I have a code where drop down is use to show different state and countries, in which i use Map image layer for layer of version 4.9. The problem is i want to add different widgets on my project such as search widget and other widgets but i have not succeed.

My code,

<!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>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      overflow: hidden;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 3%;
      overflow: auto;
    }
  </style>

  <script>
    var map;
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/on",
      "esri/tasks/support/Query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/parser",
      "dijit/registry",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry
    ) {
      parser.parse();
      map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        container: "map",
        map: map,
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
      {
        responseType:'json',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        registry.byId("stateSelect").set('store',store2);
        var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        registry.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
        outFields: ["*"]
      });

      var Counties = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
        outFields: ["*"]
      });

      //map.addMany([States,Counties]);

      app = {
        zoomRow: function(id, which){
          var sym = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [255, 0, 0, 0.5],
            outline: {  // autocasts as new SimpleLineSymbol()
              color: [128, 128, 128, 1],
              width: "0.5px"
            }
          }, gra;
          view.graphics.removeAll();
          var query = States.createQuery();
          var thePoly, theExtent;
          if(which == "State"){
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
            esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME...'" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
            {
              responseType: "json",
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              registry.byId("countySelect").set('store',store2);
              var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              registry.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            query = Counties.createQuery();
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            query.returnGeometry = true;
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            Counties.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
    </div>
    <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>
  </div>
</body>

</html>

RobertScheitlin__GISP · ‎12-04-2018

Irtiza,

Here is that code with the Search widget added:

<!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>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 32px;
      overflow:visible;
      border:none;border-bottom: 3px solid #CC9900;
      font-family: Windows;
      font-size:14pt;
      color: #FFFFFF;
      background: #000000;
      z-index: 99;
      line-height: 32px;
    }
    .searchDiv {
      float: right;
      z-index: 99;
    }
    #viewDiv {
      width: 100%;
      height: calc(100% - 32px);
      border: none;padding:0px;
      margin: 0px;
    }
  </style>

  <script>
    var map;
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/on",
      "esri/tasks/support/Query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/parser",
      "dijit/registry",
      "esri/widgets/Search",

      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Search
    ) {
      parser.parse();
      map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      var searchWidget = new Search({
        view: view,
        container: "searchDiv"
      });

      esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
      {
        responseType:'json',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        registry.byId("stateSelect").set('store',store2);
        var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        registry.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
        outFields: ["*"]
      });

      var Counties = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
        outFields: ["*"]
      });

      //map.addMany([States,Counties]);

      app = {
        zoomRow: function(id, which){
          var sym = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [255, 0, 0, 0.5],
            outline: {  // autocasts as new SimpleLineSymbol()
              color: [128, 128, 128, 1],
              width: "0.5px"
            }
          }, gra;
          view.graphics.removeAll();
          var query = States.createQuery();
          var thePoly, theExtent;
          if(which == "State"){
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
            esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME...'" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
            {
              responseType: "json",
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              registry.byId("countySelect").set('store',store2);
              var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              registry.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            query = Counties.createQuery();
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            query.returnGeometry = true;
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            Counties.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');"  data-dojo-props="maxHeight: 200" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
      <div id="searchDiv" class='searchDiv'></div>
    </div>
    <div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎12-04-2018

Irtiza,

Here is that code with the Search widget added:

<!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>Drop Down Test</title>
  <link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
  <script src="https://js.arcgis.com/4.9/"></script>
  <style>
    html,
    body,
    #mainWindow {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #FFF;
      font-family: "Trebuchet MS";
    }
    #header {
      height: 32px;
      overflow:visible;
      border:none;border-bottom: 3px solid #CC9900;
      font-family: Windows;
      font-size:14pt;
      color: #FFFFFF;
      background: #000000;
      z-index: 99;
      line-height: 32px;
    }
    .searchDiv {
      float: right;
      z-index: 99;
    }
    #viewDiv {
      width: 100%;
      height: calc(100% - 32px);
      border: none;padding:0px;
      margin: 0px;
    }
  </style>

  <script>
    var map;
    require([
      "esri/Map",
      "esri/views/MapView",
      "dojo/on",
      "esri/tasks/support/Query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/parser",
      "dijit/registry",
      "esri/widgets/Search",

      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Search
    ) {
      parser.parse();
      map = new Map({
        basemap: "topo"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-98.1883, 37.0868],
        zoom: 5
      });

      var searchWidget = new Search({
        view: view,
        container: "searchDiv"
      });

      esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
      {
        responseType:'json',
        timeout:15000
      }).then(lang.hitch(this,function(response){
        var store2 = new Memory({data:[]});
        registry.byId("stateSelect").set('store',store2);
        var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
          var name = feat.attributes.STATE_NAME;
          var value = feat.attributes.STATE_NAME;
          var dataItem = {
            id:index,
            name:name,
            value:value
          };
          return dataItem;
        }));
        store2 = new Memory({data:data});
        registry.byId("stateSelect").set('store',store2);
      }));

      var States = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
        outFields: ["*"]
      });

      var Counties = new FeatureLayer({
        url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
        outFields: ["*"]
      });

      //map.addMany([States,Counties]);

      app = {
        zoomRow: function(id, which){
          var sym = {
            type: "simple-fill",  // autocasts as new SimpleFillSymbol()
            color: [255, 0, 0, 0.5],
            outline: {  // autocasts as new SimpleLineSymbol()
              color: [128, 128, 128, 1],
              width: "0.5px"
            }
          }, gra;
          view.graphics.removeAll();
          var query = States.createQuery();
          var thePoly, theExtent;
          if(which == "State"){
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            query.where = "STATE_NAME='" + (id).toString() + "'";
            console.info(query.where);
            query.returnGeometry = true;
            States.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
            esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME...'" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
            {
              responseType: "json",
              timeout:15000
            }).then(lang.hitch(this,function(response){
              var store2 = new Memory({data:[]});
              registry.byId("countySelect").set('store',store2);
              var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
                var name = feat.attributes.NAME;
                var dataItem = {
                  id:index,
                  name:name
                };
                return dataItem;
              }));
              store2 = new Memory({data:data});
              registry.byId("countySelect").set('store',store2);
              document.getElementById('countySelect').value = "Select County";
            }));
          }else if(which == "County"){
            query = Counties.createQuery();
            var county = (id).toString();
            county = county.replace(" County", "");
            query.where = "NAME='" + county + "'";
            query.returnGeometry = true;
            query.outFields=[];
            query.outSpatialReference = view.spatialReference;
            Counties.queryFeatures(query).then(function(response){
              gra = response.features[0];
              gra.symbol = sym;
              view.graphics.add(gra);
              thePoly = gra.geometry;
              theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
              view.goTo(theExtent);
            });
          }
        }
      };

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
    <div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> Select a State/County and zoom to it on the map:
      <input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');"  data-dojo-props="maxHeight: 200" />
      <input type="hidden" name="stateabbr" id="stateabbr" />
      <div id="searchDiv" class='searchDiv'></div>
    </div>
    <div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
  </div>
</body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

irtizahussain · ‎12-05-2018

thanks for the help Robert Scheitlin, GISP‌ can i add more widgets on this like home widget etc on this project?

RobertScheitlin__GISP · ‎12-05-2018

Yes

irtizahussain · ‎12-06-2018

but i tried different widgets they are not working properly like home, legend and layer list widget!! they just appeared on screen in incorrect format.

RobertScheitlin__GISP · ‎12-06-2018

Show me the code changes you tried.

irtizahussain · ‎12-07-2018

The code is below , in this code when i try to add widgets the home widget code is treated as search widget and search widget code is treated as home widget code. Why this is happening?? what's the reason behind??

After this i want to add more widgets like Base map Gallery widget , layer list widget,Direct Line Measurement3D and Area Measurement 3D widget, but unfortunately i am fail to do this.

<!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>Drop Down Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#mainWindow {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
font-family: "Trebuchet MS";
}
#header {
height: 32px;
overflow:visible;
border:none;border-bottom: 3px solid #CC9900;
font-family: Windows;
font-size:14pt;
color: #FFFFFF;
background: #000000;
z-index: 99;
line-height: 32px;
}
.searchDiv {
float: right;
z-index: 99;
}
.homeDiv{
float: right;
z-index:99;
}
.galleryDiv{
float: left;
z-index:99;
}

#viewDiv {
width: 100%;
height: calc(100% - 32px);
border: none;padding:0px;
margin: 0px;
}
</style>

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Search, Home, LayerList, BasemapGallery
) {
parser.parse();
map = new Map({
basemap: "topo"
});

var view = new MapView({
container: "viewDiv",
map: map,
center: [-98.1883, 37.0868],
zoom: 5
});

var searchWidget = new Search({
view: view,
container: "searchDiv"
});
view.ui.add(searchDiv,"top-left");

var homeWidget = new Home({
view: view,
container: "homeDiv"
});

var layer = new LayerList({
view: view,
container: "galleryDiv"
});
view.ui.add(layer,"top-right");

var search1 = new Home({
view : view,
container: "search1Div"
});
view.ui.add(search1,"top-right");

esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
{
responseType:'json',
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
registry.byId("stateSelect").set('store',store2);
var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.STATE_NAME;
var value = feat.attributes.STATE_NAME;
var dataItem = {
id:index,
name:name,
value:value
};
return dataItem;
}));
store2 = new Memory({data:data});
registry.byId("stateSelect").set('store',store2);
}));

var States = new FeatureLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
outFields: ["*"]
});

var Counties = new FeatureLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
outFields: ["*"]
});

//map.addMany([States,Counties]);

app = {
zoomRow: function(id, which){
var sym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [255, 0, 0, 0.5],
outline: { // autocasts as new SimpleLineSymbol()
color: [128, 128, 128, 1],
width: "0.5px"
}
}, gra;
view.graphics.removeAll();
var query = States.createQuery();
var thePoly, theExtent;
if(which == "State"){
query.outFields=[];
query.outSpatialReference = view.spatialReference;
query.where = "STATE_NAME='" + (id).toString() + "'";
console.info(query.where);
query.returnGeometry = true;
States.queryFeatures(query).then(function(response){
gra = response.features[0];
gra.symbol = sym;
view.graphics.add(gra);
thePoly = gra.geometry;
theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
view.goTo(theExtent);
});
esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME...'" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
{
responseType: "json",
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
registry.byId("countySelect").set('store',store2);
var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.NAME;
var dataItem = {
id:index,
name:name
};
return dataItem;
}));
store2 = new Memory({data:data});
registry.byId("countySelect").set('store',store2);
document.getElementById('countySelect').value = "Select County";
}));
}else if(which == "County"){
query = Counties.createQuery();
var county = (id).toString();
county = county.replace(" County", "");
query.where = "NAME='" + county + "'";
query.returnGeometry = true;
query.outFields=[];
query.outSpatialReference = view.spatialReference;
Counties.queryFeatures(query).then(function(response){
gra = response.features[0];
gra.symbol = sym;
view.graphics.add(gra);
thePoly = gra.geometry;
theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
view.goTo(theExtent);
});
}
}
};

});
</script>
</head>

<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> Select a State/County and zoom to it on the map:
<input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
<input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" data-dojo-props="maxHeight: 200" />
<input type="hidden" name="stateabbr" id="stateabbr" />
<div id="searchDiv" class='searchDiv'></div>
<div id="homeDiv" class='homeDiv'></div>
<div id="galleryDiv" class='galleryDiv'></div>
<div id="search1Div" class='search1Div'></div>
</div>

</html>

RobertScheitlin__GISP · ‎12-07-2018

Irtiza,

OK you are missing a very basic concept of AMD JavaScript programming.

You have:

require([
"esri/Map",
"esri/views/MapView",
"dojo/on",
"esri/tasks/support/Query",
"esri/layers/FeatureLayer",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/_base/lang",
"esri/request",
"dojo/parser",
"dijit/registry",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/widgets/LayerList",
"esri/widgets/BasemapGallery",

"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Search, Home, LayerList, BasemapGallery
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

AMD style programming requires the require array list and the subsequent vars to be in the same order.

require([
...
"esri/request",
"dojo/parser",
"dijit/registry",
"esri/widgets/Home",
"esri/widgets/Search",
"esri/widgets/LayerList",
"esri/widgets/BasemapGallery",
...‍‍‍‍‍‍‍‍‍‍
], function(
Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry, Home, Search, LayerList, BasemapGallery
) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Notice that the above require array has registry, Home, Search, LayerList, BasemapGallery and the functions vars has then listed in the same order.

irtizahussain · ‎12-10-2018

yeah that's the exact thing i was looking for, thanks

irtizahussain · ‎12-10-2018

there is another issue, when i select any state from drop down then it focus on that particular area, can you tell me how can i remove that focus after i search the state!?