topic Re: Drop down list in ArcGIS JavaScript Maps SDK Questions

Drop down list

SatyanarayanaNarmala — Wed, 03 Jun 2015 12:11:55 GMT

Hi,

i am trying to implement drop down list. the first list shows state list, second list shows district and third one shows villages.

when the user selects a state from first list box then the map should zoom to that particular state polygon. and same for other two list boxs.

i have tried but the zoom to selected does not working for me.

can anyone guide me in this.

Regards,

satya

Re: Drop down list

TimWitt2 — Wed, 03 Jun 2015 12:19:01 GMT

Hi Satya,

It would be helpful to know in which program you are trying to do that (javascript, flex....). You might also get more answers if you post it in that specific space and add tags.

Tim

Re: Drop down list

YousefQuran — Wed, 03 Jun 2015 12:31:53 GMT

Hi Satyanarayana Narmala,

If you are using the JavaScript API you can zoom to a selected Polygon..

After make a query and got the results of the selected state geometry you can use this code for zooming ..

map.setExtent(StateResults.features[selected].geometry.getExtent(),true); // Change Extent to Polygon Extent and be fit ..

Re: Drop down list

SatyanarayanaNarmala — Thu, 04 Jun 2015 08:45:56 GMT

JAVA script api

Re: Drop down list

JakeSkinner — Sat, 11 Dec 2021 23:11:39 GMT

Hi Satyanarayana,

Here is an example that you can work with. You can select a state, the map will zoom to this feature, and then the second combo box will update with the state's counties. Once a county is selected, the map will zoom to this feature.

<!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>Zoom to Combo Box Selection</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
    <style>
      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
    <script src="http://js.arcgis.com/3.13/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/FeatureLayer", "esri/graphicsUtils",
        "esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/geometry/webMercatorUtils",
        "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "esri/tasks/query",
        "dojo/dom", "dijit/registry", "dojo/_base/array",
        "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox",
        "dojo/domReady!"
        ], function(
          Map, FeatureLayer, graphicsUtils,
          SimpleLineSymbol, Graphic, webMercatorUtils,
          SimpleFillSymbol, Color, on, Query,
          dom, registry, arrayUtils,
          parser) {

        parser.parse();

        map = new esri.Map("map", {
          basemap : "topo",
          center : [-69, 45.5],
          zoom : 7
        });
        
        var stateLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
        });
        
        var countyLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3",{
            mode: FeatureLayer.MODE_ONDEMAND,
            outFields: ["*"]
        });
        
        var polygonHighlightSymbol = new SimpleFillSymbol(
                  SimpleFillSymbol.STYLE_SOLID,
                  new SimpleLineSymbol(
                    SimpleLineSymbol.STYLE_SOLID,
                    new Color([255, 0, 0]), 1),
                  new Color([125, 125, 125, 0.35])
                );                        
        
        //Query State
        var query = new Query();
        query.where = "1=1";

        stateLayer.queryFeatures(query, function(featureSet) {      
          var stateList = [];
          
          
          dojo.map(featureSet.features, function(feature) {
            stateList.push(feature.attributes.state_name);
          });  
          
          arrayUtils.forEach(stateList, function(feature){                          
                registry.byId("stateName").get('store').add({ name: feature});                
          })                                                                  
        });
        
        registry.byId("countyName").set('disabled', true);
        
        registry.byId("stateName").on("change", function(){ 
            map.graphics.clear();
            registry.byId("countyName").set('disabled', false); 
            var query = new Query();  
            query.where = "state_name='" + registry.byId("stateName").get('value') + "'";   
      
            console.info(query.where);  
            query.returnGeometry = true;    
            stateLayer.queryFeatures(query, function (featureSet) {    
              var Geom = featureSet.features[0].geometry;  
              var gra = new Graphic(Geom);  
              var extent = webMercatorUtils.geographicToWebMercator(gra.geometry);
              gra.setSymbol(polygonHighlightSymbol);
              map.graphics.add(gra);  
              map.setExtent(extent.getExtent());    
            }); 
            
            //Query County
            var query = new Query();
            query.where = "state_name='" + registry.byId("stateName").get('value') + "'";
    
            countyLayer.queryFeatures(query, function(featureSet) {      
              var countyList = [];
                        
              dojo.map(featureSet.features, function(feature) {
                countyList.push(feature.attributes.name);
              });  
              
              arrayUtils.forEach(countyList, function(feature){                          
                    registry.byId("countyName").get('store').add({ name: feature});                
              })                                                                  
            });
          }); 
          
          registry.byId("countyName").on("change", function(){
              map.graphics.clear();
              var query = new Query();
              query.where = "state_name='" + registry.byId("stateName").get('value') + "' AND name='" + registry.byId("countyName").get('value') + "'";
              
              console.info(query.where);
              query.returnGeometry = true;
              countyLayer.queryFeatures(query, function(featureSet){
                  var Geom = featureSet.features[0].geometry;
                  var gra = new Graphic(Geom);
                  var extent = webMercatorUtils.geographicToWebMercator(gra.geometry);
                  gra.setSymbol(polygonHighlightSymbol);
                  map.graphics.add(gra);  
                  map.setExtent(extent.getExtent());
              })
          })               

      });
    </script>
  </head>
  <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">
        State name:
        <!--<input type="text" id="ownerName" size="60" value="Northern Girl" />-->
        <select id="stateName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;"
          value="Select a State"></select>
          County name:
        <select id="countyName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;" 
          value="Select a County"></select>
      </div>
      <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
    </div>
  </body>
</html>

Re: Drop down list

SatyanarayanaNarmala — Mon, 08 Jun 2015 11:40:20 GMT

Hi Jake,Jake Skinner

the code u sent is working fine with the base map such as imagery or topo. But when i add feature layers, and select the state its not displaying anything.

Re: Drop down list

JakeSkinner — Mon, 08 Jun 2015 14:41:57 GMT

Hi Sayuanarayana,

Can you share your code?

Re: Drop down list

JeffJacobson — Mon, 08 Jun 2015 15:38:43 GMT

If you don't mind combining all three boxes' functionality into a single box, you could use the Search widget.

Re: Drop down list

SatyanarayanaNarmala — Tue, 09 Jun 2015 05:46:01 GMT

Hi Jake,

here is my code. let me know where i am wrong.

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Zoom to Combo Box Selection</title>

<style>

html, body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

}

</style>

var map;

require([

"esri/map", "esri/layers/FeatureLayer", "esri/graphicsUtils",

"esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/geometry/webMercatorUtils",

"esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "esri/tasks/query",

"dojo/dom", "dijit/registry", "dojo/_base/array",

"dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox",

"dojo/domReady!"

], function(

Map, FeatureLayer, graphicsUtils,

SimpleLineSymbol, Graphic, webMercatorUtils,

SimpleFillSymbol, Color, on, Query,

dom, registry, arrayUtils,

parser) {

parser.parse();

map = new esri.Map("map", {

basemap : "satellite",

center : [79, 19],

zoom : 7

});

var stateLayer = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/sample/patta1/MapServer/1",{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

var countyLayer = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/sample/patta1/MapServer/2",{

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

map.addLayer(stateLayer);

map.addLayer(countyLayer);

var polygonHighlightSymbol = new SimpleFillSymbol(

SimpleFillSymbol.STYLE_SOLID,

new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color([255, 0, 0]), 1),

new Color([125, 125, 125, 0.35])

);

//Query State

var query = new Query();

query.where = "1=1";

stateLayer.queryFeatures(query, function(featureSet) {

var stateList = [];

dojo.map(featureSet.features, function(feature) {

stateList.push(feature.attributes.dname);

});

arrayUtils.forEach(stateList, function(feature){

registry.byId("stateName").get('store').add({ name: feature});

})

});

registry.byId("countyName").set('disabled', true);

registry.byId("stateName").on("change", function(){

map.graphics.clear();

registry.byId("countyName").set('disabled', false);

var query = new Query();

query.where = "dname='" + registry.byId("stateName").get('value') + "'";

console.info(query.where);

query.returnGeometry = true;

stateLayer.queryFeatures(query, function (featureSet) {

var Geom = featureSet.features[0].geometry;

var gra = new Graphic(Geom);

var extent = webMercatorUtils.geographicToWebMercator(gra.geometry);

gra.setSymbol(polygonHighlightSymbol);

map.graphics.add(gra);

map.setExtent(extent.getExtent());

});

//Query County

var query = new Query();

query.where = "dname='" + registry.byId("stateName").get('value') + "'";

countyLayer.queryFeatures(query, function(featureSet) {

var countyList = [];

dojo.map(featureSet.features, function(feature) {

countyList.push(feature.attributes.mname);

});

arrayUtils.forEach(countyList, function(feature){

registry.byId("countyName").get('store').add({ name: feature});

})

});

registry.byId("countyName").on("change", function(){

map.graphics.clear();

var query = new Query();

query.where = "dname='" + registry.byId("stateName").get('value') + "' AND mname='" + registry.byId("countyName").get('value') + "'";

console.info(query.where);

query.returnGeometry = true;

countyLayer.queryFeatures(query, function(featureSet){

var Geom = featureSet.features[0].geometry;

var gra = new Graphic(Geom);

var extent = webMercatorUtils.geographicToWebMercator(gra.geometry);

gra.setSymbol(polygonHighlightSymbol);

map.graphics.add(gra);

map.setExtent(extent.getExtent());

})

});

</script>

</head>

State name:

<select id="stateName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;"

value="Select a State"></select>

County name:

<select id="countyName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;"

value="Select a County"></select>

</div>

</div>

</body>

</html>

Re: Drop down list

JakeSkinner — Sat, 11 Dec 2021 23:11:41 GMT

The services I used in the example are in a geographic coordinate system, so I need to use the geographicToWebMercator method to convert the geometry to Web Mercator. Your data is already projected to Web Mercator, so you do not need to use this method. If you update your code with the following, it should work:

  registry.byId("stateName").on("change", function(){
    map.graphics.clear();
    registry.byId("countyName").set('disabled', false);
    
    var query = new Query(); 
    query.where = "dname='" + registry.byId("stateName").get('value') + "'";  

    console.info(query.where); 

    query.returnGeometry = true;   
    stateLayer.queryFeatures(query, function (featureSet) {   
      var Geom = featureSet.features[0].geometry; 
      var gra = new Graphic(Geom); 
      gra.setSymbol(polygonHighlightSymbol);
      map.graphics.add(gra); 
      map.setExtent(gra._extent);   
    });
   
    //Query County
    var query = new Query();
    query.where = "dname='" + registry.byId("stateName").get('value') + "'";
    countyLayer.queryFeatures(query, function(featureSet) {     
      var countyList = [];
               
      dojo.map(featureSet.features, function(feature) {
       countyList.push(feature.attributes.mname);
      }); 
     
      arrayUtils.forEach(countyList, function(feature){                         
            registry.byId("countyName").get('store').add({ name: feature});               
      })                                                                 
    });
  });


  registry.byId("countyName").on("change", function(){
      map.graphics.clear();
      var query = new Query();
      query.where = "dname='" + registry.byId("stateName").get('value') + "' AND mname='" + registry.byId("countyName").get('value') + "'";
     
      console.info(query.where);

      query.returnGeometry = true;
      countyLayer.queryFeatures(query, function(featureSet){
          var Geom = featureSet.features[0].geometry;
          var gra = new Graphic(Geom);                                   
          gra.setSymbol(polygonHighlightSymbol);
          map.graphics.add(gra); 
          map.setExtent(gra._extent);
      })

  })

Re: Drop down list

SatyanarayanaNarmala — Tue, 09 Jun 2015 11:22:48 GMT

Hi Jake,

Thanks, Got it

Instead of disabling the other polygon's of layer, we can just highlight the selected content and displaying others right?

Re: Drop down list

PriyaRanjanJena — Mon, 20 Jul 2015 10:49:49 GMT

Thanks for the code.

But I am facing a problem when state is selected then Country list is populated, again when another state is selected then country name are populated with the previous values. How to clear the dropDown before populating the values.

Thanks.

Re: Drop down list

SatyanarayanaNarmala — Mon, 20 Jul 2015 11:02:31 GMT

Hi priya,

Can share your code

Re: Drop down list

JakeSkinner — Sat, 11 Dec 2021 23:11:44 GMT

Hi Priya,

You will need to set the datastore of the combobox dijit to an empty array. Ex:

countyLayer.queryFeatures(query, function(featureSet) {
  var countyList = [];
            
  dojo.map(featureSet.features, function(feature) {
    countyList.push(feature.attributes.name);
  });  
  
  countyList.sort();       
  
  registry.byId("countyName").get('store').data = [];                   
  
  arrayUtils.forEach(countyList, function(feature){                          
        registry.byId("countyName").get('store').add({ name: feature});                                  
  })                                                                  
});

Re: Drop down list

PriyaRanjanJena — Mon, 20 Jul 2015 12:40:11 GMT

I used the same code by you did not change any thing.

Re: Drop down list

JakeSkinner — Mon, 20 Jul 2015 12:46:56 GMT

I added the following line to the queryFeatures method:

registry.byId("countyName").get('store').data = [];

Here is a working fiddle example.

Re: Drop down list

PriyaRanjanJena — Mon, 20 Jul 2015 19:13:27 GMT

Thanks Jake.

Is there any way to display the country name and add a popup window on click event to display other details about the country ?