1

I have dojo combo box to display district names when I select one district it should zoom to that particular district.selection is working fine but zooming not happening I am getting Districtna.getExtent().expand(2) is null.

Can any one tell me why I am not getting geometry of selected district.

Below the code I am using to zoom the selected district :

<!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></title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <style> 
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
      #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }

  </style> 

  <script src="https://js.arcgis.com/3.16/"></script>
  <script> 

    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery","esri/dijit/HomeButton","esri/dijit/Search",
       "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "dojo/parser","esri/dijit/Attribution", 
       "dijit/form/ComboBox", "dojo/data/ItemFileReadStore", "dojo/_base/array", "dijit/registry", "esri/tasks/query",  
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery,HomeButton,Search,ArcGISDynamicMapServiceLayer,FeatureLayer,
      parser,Attribution, ComboBox, ItemFileReadStore, array, registry,Query
    ) {

      parser.parse();

      map = new Map("map", {
        basemap: "topo",
         center: [77.2, 14],
         zoom: 7
      });

  var operationalLayer = new ArcGISDynamicMapServiceLayer("http://117.247.176.60:6080/arcgis/rest/services/BC_SH/BC_SH/MapServer");
   var school = new FeatureLayer("http://117.247.176.60:6080/arcgis/rest/services/BC_SH/BC_SH/MapServer/0", {  
     mode: FeatureLayer.MODE_SELECTION,  
   outFields: ["*"]  
  });  
  map.addLayers([operationalLayer,school]);

  var search = new Search({
                     map: map
                 }, "search");
                 search.startup();

  var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
 basemapGallery.on('load',function(){
 basemapGallery.remove('basemap_0'); 
 basemapGallery.remove('basemap_1');    //remove unwanted base map from base map gallery
 basemapGallery.remove('basemap_2'); 
 basemapGallery.remove('basemap_3'); 
 basemapGallery.remove('basemap_4');
basemapGallery.remove('basemap_5'); 
 basemapGallery.remove('basemap_8'); 
}); 
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });


         var populateList = function(results) {
            //Populate the ComboBox with unique values
            var zone;
            var values = [];
            var testVals = {};

            values.push({
                name: "ALL"
            })

            //Loop through the QueryTask results and populate an array
            //with the unique values
            var features = results.features;
            array.forEach(features, function(feature) {
                zone = feature.attributes.DistrictName;
                if (zone) {
                    if (!testVals[zone]) {
                        testVals[zone] = true;
                        values.push({
                            name: zone
                        });
                    }
                }
            });

            //Create a ItemFileReadStore and use it for the
            //ComboBox's data source
            var dataItems = {
                identifier: 'name',
                label: 'name',
                items: values
            };
            var store = new ItemFileReadStore({
                data: dataItems
            });
            registry.byId("mySelect").set('store', store);
        }

        queryTask = new esri.tasks.QueryTask("http://117.247.176.60:6080/arcgis/rest/services/BC_SH/BC_SH/MapServer/0");
        var query = new esri.tasks.Query();
        query.returnGeometry = false;
        query.outFields = ["DistrictName"];
        query.where = "DistrictName<> ''";
        queryTask.execute(query, populateList);

        app = {  
        zoomRow: function(id){   
        var districtname=id.toString();
        alert(districtname);
         // school.clearSelection();  
          var query = new Query();  
          query.where = "DistrictName='" + districtname + "'";  
           query.outFields = ["DistrictName"];
          query.returnGeometry = true;  
          school.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {  
            var Districtna = features[0].geometry;  
            var theExtent = Districtna.getExtent().expand(2); 
            map.setExtent(theExtent);  
          });  
        }  
      };  


});



  </script> 
</head> 

<body class="claro">
 <div id="search"></div> 
    <div id="map" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" 
         style="padding:0;">

      <div style="position:absolute; right:10px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" 
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:200px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>


      </div>
     <div style="position:absolute; right:250px; top:10px; z-Index:999;" value="Select District" id="mySelect" data-dojo-type="dijit.form.ComboBox" onchange="app.zoomRow(document.getElementById('mySelect').value);"/>
        <div id="HomeButton"></div>

    </div>
</body> 

</html>
1

You got this error because you are trying to get an Extent of point geometry , so the Point geometry does not have an extent like (polyline,polygone ...)

the school feature layer is a esriGeometryPoint Layer , so you cant work with extents here :

I used the centerAndZoom map function to zoom to the returned point geometry , and i've add graphic for better rendring and infotemplate when the graphic is clicked .

here is a solution :

<!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></title>

  <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
  <style> 
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
    #HomeButton {
      position: absolute;
      top: 95px;
      left: 20px;
      z-index: 50;
    }
      #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }

  </style> 

  <script src="https://js.arcgis.com/3.16/"></script>
  <script> 

    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery","esri/dijit/HomeButton","esri/dijit/Search",
      "esri/layers/ArcGISDynamicMapServiceLayer","esri/layers/FeatureLayer", "dojo/parser","esri/dijit/Attribution", 
      "dijit/form/ComboBox", "dojo/data/ItemFileReadStore", "dojo/_base/array", "dijit/registry", "esri/tasks/query",  
      "esri/symbols/SimpleMarkerSymbol","esri/Color", "esri/InfoTemplate", "esri/graphic",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",

      "dojo/domReady!"
    ], function(
      Map, BasemapGallery,HomeButton,Search,ArcGISDynamicMapServiceLayer,FeatureLayer,
      parser,Attribution, ComboBox, ItemFileReadStore, array, registry,Query,
      SimpleMarkerSymbol,Color,InfoTemplate,Graphic
    ) {

      parser.parse();

      map = new Map("map", {
        basemap: "topo",
         center: [77.2, 14],
         zoom: 7
      });

  var operationalLayer = new ArcGISDynamicMapServiceLayer("http://117.247.176.60:6080/arcgis/rest/services/BC_SH/BC_SH/MapServer");
   var school = new FeatureLayer("http://117.247.176.60:6080/arcgis/rest/services/BC_SH/BC_SH/MapServer/0", {  
     mode: FeatureLayer.MODE_SELECTION,  
   outFields: ["*"]  
  });  
  map.addLayers([operationalLayer,school]);

  var search = new Search({
                     map: map
                 }, "search");
                 search.startup();

  var home = new HomeButton({
        map: map
      }, "HomeButton");
      home.startup();

      //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: true,
        map: map
      }, "basemapGallery");
 basemapGallery.on('load',function(){
 basemapGallery.remove('basemap_0'); 
 basemapGallery.remove('basemap_1');    //remove unwanted base map from base map gallery
 basemapGallery.remove('basemap_2'); 
 basemapGallery.remove('basemap_3'); 
 basemapGallery.remove('basemap_4');
basemapGallery.remove('basemap_5'); 
 basemapGallery.remove('basemap_8'); 
}); 
      basemapGallery.startup();

      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });


         var populateList = function(results) {
            //Populate the ComboBox with unique values
            var zone;
            var values = [];
            var testVals = {};

            values.push({
                name: "ALL"
            })

            //Loop through the QueryTask results and populate an array
            //with the unique values
            var features = results.features;
            array.forEach(features, function(feature) {
                zone = feature.attributes.DistrictName;
                if (zone) {
                    if (!testVals[zone]) {
                        testVals[zone] = true;
                        values.push({
                            name: zone
                        });
                    }
                }
            });

            //Create a ItemFileReadStore and use it for the
            //ComboBox's data source
            var dataItems = {
                identifier: 'name',
                label: 'name',
                items: values
            };
            var store = new ItemFileReadStore({
                data: dataItems
            });
            registry.byId("mySelect").set('store', store);
        }

        queryTask = new esri.tasks.QueryTask("http://117.247.176.60:6080/arcgis/rest/services/BC_SH/BC_SH/MapServer/0");
        var query = new esri.tasks.Query();
        query.returnGeometry = false;
        query.outFields = ["DistrictName"];
        query.where = "DistrictName<> ''";
        queryTask.execute(query, populateList);

        app = {  
        zoomRow: function(id){   
        var districtname=id.toString();
        alert(districtname);
         // school.clearSelection();  
          var query = new Query();  
          query.where = "DistrictName='" + districtname + "'";  
           query.outFields = ["DistrictName"];
          query.returnGeometry = true;  
          school.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {  
            var Districtna = features[0].geometry; 
            console.log(Districtna); 
            // adding graphic style
            var sms = new SimpleMarkerSymbol().setStyle(
            SimpleMarkerSymbol.STYLE_SQUARE).setColor(new Color([255,0,0,0.5]));
            // showing info on graphic click
            var infoTemplate = new InfoTemplate("Sample Text","District:"+features[0].DistrictName);
            var graphic = new Graphic(Districtna,sms,null,infoTemplate);
            map.graphics.clear();
            //adding graphic to map
            map.graphics.add(graphic);
            // get max map zoom
            maxZoom = map.getMaxZoom();  
            // center and zoom to point district
            map.centerAndZoom(Districtna,maxZoom-5);
          });  
        }  
      };  


});



  </script> 
</head> 

<body class="claro">
 <div id="search"></div> 
    <div id="map" 
         data-dojo-type="dijit/layout/ContentPane" 
         data-dojo-props="region:'center'" 
         style="padding:0;">

      <div style="position:absolute; right:10px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" 
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:200px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>


      </div>
     <div style="position:absolute; right:250px; top:10px; z-Index:999;" value="Select District" id="mySelect" data-dojo-type="dijit.form.ComboBox" onchange="app.zoomRow(document.getElementById('mySelect').value);"/>
        <div id="HomeButton"></div>

    </div>
</body> 

</html>
3
  • thank you its working fine.I have one more that can display total number of school for selected district – veena hosur Apr 29 '16 at 11:19
  • just use features.length ! but one more thing , you have a district layer but it does not contains all ditricts in your combo – Spring Apr 29 '16 at 21:41
  • no i have 30 district – veena hosur May 2 '16 at 4:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.