Drop down list

SatyanarayanaNarmala · ‎06-03-2015

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

TimWitt2 · ‎06-03-2015

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

YousefQuran · ‎06-03-2015

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 ..

SatyanarayanaNarmala · ‎06-04-2015

JAVA script api

JakeSkinner · ‎06-05-2015

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>

SatyanarayanaNarmala · ‎06-08-2015

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.

JakeSkinner · ‎06-08-2015

Hi Sayuanarayana,

Can you share your code?

SatyanarayanaNarmala · ‎06-08-2015

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>

JakeSkinner · ‎06-09-2015

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);
      })

  })

SatyanarayanaNarmala · ‎06-09-2015

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?