How to add Widgets in excisting code.

1825
19
Jump to solution
12-03-2018 08:25 PM
irtizahussain
Occasional Contributor

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>
Tags (1)
0 Kudos
19 Replies
RobertScheitlin__GISP
MVP Emeritus

Irtiza,

  You need to try an understand the code. You will see that the zoomRow function is what zooms to the state and county . So you need to remove code that call this function.

onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');"
irtizahussain
Occasional Contributor

sir, i changed the drop down fields from state and county to region and city. First we have to select the region then the cities drop down allows us to select city, the service that i provide to the city, there are many cities but in drop down only the name of selected region is appearing. It is like when we select a region x then in city column only x is shown instead of name of different cities!! how can i fix this??

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Irtiza,

  Sounds like you have something wrong in your code changes. It is had to tell without seeing your changes.

0 Kudos
irtizahussain
Occasional Contributor

Thanks Robert,

i sort out the issue. I was placing the wrong field name.

Can you tell me  is there is any way to remove the highlighted area automatically !! how can i remove the highlighted area automatically which appear on screen after choose any option from drop down.

Here is the picture

0 Kudos
irtizahussain
Occasional Contributor

yess but i didn't get how to do this!!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Irtiza,

   Hmm not sure how much simpler I could make it.. Remove the onchange property.

<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" data-dojo-props="maxHeight: 200" />
      <input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select 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>‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
irtizahussain
Occasional Contributor

sir i did the same as above but still it is still not working!!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

I am not sure I can help you. You can not expect someone to write your code for you. I have provided guidance and code that I know works so the issue is on your end.

0 Kudos
irtizahussain
Occasional Contributor

ok sir thanks for your guidance.

0 Kudos