Using Drop Down Menu to Select Polygon

MichaelGlassman2 · ‎10-29-2013

I am using the Dojo ComboBox to create a drop down menu with the names of polygons in one layer. How can I get the map to zoom to the specific polygon and display a popup window with the polygon's attributes based on the the drop down menu input? I know it would similar to a Select by Attributes in ArcMap but I cannot seem to figure how to this with JavaScript. I think I might need to do a Query or Identify task but I am not sure how to implement this. Thanks.

SteveCole · ‎10-29-2013

You're on the right track. You would use a query to look for your polygon of interest and then perform the "zoom to" functionality once you have the query results. On the javaScript side, you write a function such as this:

function zoomRow(id){
  theFeatureLayer.clearSelection();
  var query = new esri.tasks.Query();
  query.where = "NAME='" + (id).toString() + "'";
  query.returnGeometry = true;
  theFeatureLayer.queryFeatures(query,function(features){
         thePoly = features[0].geometry;
  theExtent = thePoly.expand(2); //Zoom out slightly from the polygon's extent
  map.setExtent(theExtent);
  });
 };

And then in your comboBox's HTML, you set up the onChange event to something like this:
[HTML]<input id="cboPolygonList" onChange="zoomRow(document.getElementById('cboPolygonList').value);"/>[/HTML]

I'm leaving out some details since you didn't provide your code but hopefully you get the idea.

Steve

MichaelGlassman2 · ‎11-06-2013

I have been having a bit of trouble getting this to work. I am attaching my code and hopefully you can help me sort this out. Thanks.

<!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/3.7/js/esri/css/esri.css">
 <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
    <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 dojoConfig = { parseOnLoad: true };</script>
 <script src="http://js.arcgis.com/3.7/"></script>
    <script>
  dojo.require("esri.layers.agstiled");
  dojo.require("esri.map");
  dojo.require("esri.dijit.Popup");
  dojo.require("dijit.layout.BorderContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.form.Button");
  dojo.require("esri.tasks.query");
  dojo.require("esri.tasks.query");
  dojo.require("dijit.form.ComboBox");

      var map;
   function init() {
   esri.config.defaults.io.proxyUrl = "/proxy";      
        map = new esri.Map("map", {
    slider:true,
    sliderStyle: 'large',
    spatialReference:2248,
          zoom: 1,
    navigationModel:  'css-transforms',
        });  
  var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("SERVERLINK/Basemap1025/MapServer");
            map.addLayer(baseMapLayer);
  var bldgs = new esri.layers.ArcGISTiledMapServiceLayer("SERVERLINK/Buildings2/MapServer");
            map.addLayer(bldgs);
    }   
   dojo.ready(init);   
      function zoomRow(id){
  bldgs.clearSelection();
  var query = new esri.tasks.Query("SERVERLINK/Buildings2/MapServer");
  query.where = "BUILDINGID='" + (id).toString() + "'";
  query.returnGeometry = true;
  bldgs.queryFeatures(query,function(features){
   thePoly = features[0].geometry;
   theExtent = thePoly.expand(2); //Zoom out slightly from the polygon's extent
   map.setExtent(theExtent);
  });
 };
    </script>
  </head>
  <body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" 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:10pt; color: #FFFFFF;background: #000000; ">
 <input id="cboPolygonList" data-dojo-type="dijit.form.ComboBox" value="Buildings" onChange="zoomRow(document.getElementById('cboPolygonList').value);"/> 
  </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>

JasonZou · ‎11-06-2013

Michael, query is normally performed against a feature layer or table in a map service, not against to the map service itself. To run a query against a feature layer, typically you will need the following steps:

Create a feature layer using its REST endpoint, or create a query task using esri.tasks.QueryTask.

Create a query that defines the query parameters

Perform the query, and define the callback function to process the query result.

There are many query samples under Query and Select section. Here is one.

TomVo1 · ‎08-21-2014

any solutions to this?

MichaelGlassman2 · ‎08-25-2014

I used the advice Jason Zou‌ post. I typically use the value of the drop down to build a query statement and then zoom to the extent of the polygon.

        on(dom.byId("cboPolygonList"), "change", execute);


        function execute() {
          query.where = "BUILDINGID = '" + dom.byId("cboPolygonList").value + "'";
          //execute query
          queryTask.execute(query);
        }

Hope this helps.

RobertScheitlin__GISP · ‎08-25-2014

Michael,

If you are looking for a way to populate the dropdown with unique vales from a layer then my example demonstrates that as well.

RobertScheitlin__GISP · ‎08-22-2014

Michael,

Here is a full AMD sample:

<!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/3.10/js/dojo/dijit/themes/claro/claro.css">   
  <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
  <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 dojoConfig = {
      parseOnLoad: true
    };
  </script>
  <script src="http://js.arcgis.com/3.10/"></script>
  <script>
    var map;
    require([
      "esri/map",
      "dojo/on",
      "esri/tasks/query",
      "esri/layers/FeatureLayer",
      "dojo/store/Memory",
      "dojo/_base/array",
      "dojo/_base/lang",
      "esri/request",
      "dojo/json",
      "dijit/layout/BorderContainer",
      "dijit/layout/ContentPane",
      "dijit/form/Button",
      "dijit/form/ComboBox",
      "dojo/domReady!"
    ], function(
      Map, on, Query, FeatureLayer, Memory, array, lang, esriRequest, json
    ) {
      map = new Map("map", {
        basemap: "topo",
        center: [-120.1883, 37.0868],
        zoom: 6
      });
       
      var zipcodes = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/california-zip-codes-census-2010/Fe...", {
        mode: FeatureLayer.MODE_SELECTION,
        outFields: ["*"]
      });

      map.addLayers([zipcodes]);
      map.on("layers-add-result", lang.hitch(this, function(){
        var url = "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/california-zip-codes-census-2010/Fe...";
        var classificationDef = {"type":"uniqueValueDef","uniqueValueFields":["ZCTA5CE10"]};
        var str = json.stringify(classificationDef);
        esriRequest({
          url:url,
          content:{
            classificationDef:str,
            f:'json'
          },
          handleAs:'json',
          callbackParamName:'callback',
          timeout:15000
        }).then(lang.hitch(this,function(response){
          var uniqueValueInfos = response && response.uniqueValueInfos;
          if(uniqueValueInfos){
            var store2 = new Memory({data:[]});
            dijit.byId("uniqueValuesSelect").set('store',store2);
            var data = array.map(uniqueValueInfos,lang.hitch(this,function(info,index){
              var value = info.value;
              value = parseFloat(value);
              var dataItem = {
                id:index,
                name:value
              };
              return dataItem;
            }));
            store2 = new Memory({data:data});
            dijit.byId("uniqueValuesSelect").set('store',store2);
          }
        }),lang.hitch(this,function(error){
          console.error(error);
        }));
      }));
     
      app = {
        zoomRow: function(id){ 
          zipcodes.clearSelection();
          var query = new Query();
          query.where = "ZCTA5CE10='" + (id).toString() + "'";
          query.returnGeometry = true;
          zipcodes.selectFeatures(query, FeatureLayer.SELECTION_NEW, function (features) {
            var thePoly = features[0].geometry;
            var theExtent = thePoly.getExtent().expand(2); //Zoom out slightly from the polygon's extent 
            map.setExtent(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 California Zip Code and zoom to it on the map:  
      <input id="uniqueValuesSelect" data-dojo-type="dijit.form.ComboBox" value="Zipcode" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect').value);" />
    </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>

MaheshPathak · ‎08-28-2014

Hi Robert,

I am learning JavaScript API and the above example is really helpful for me to understand query task and select feature from field value.

I have tried the example with the layer "http://services1.arcgis.com/a0b6GuyTJaCYvfET/arcgis/rest/services/new_CIP3/FeatureServer/0"

it is working with numeric field ( 'District') but it shows 'NaN' in dropdown list when using field with text value ('ProjectNam').

Any suggestion will be appreciated.

Regards,

Mahesh

RobertScheitlin__GISP · ‎08-28-2014

Mahesh,

If you look at the code there is the function that gets the Unique values from the layer and adds them to the data store to be used in the combobox. That function is expecting a numeric data type in my example. All you need to do is delete of comment out this line that is changing the the value to a number:

Line: 88

value = parseFloat(value);