nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

populate field attributes in dojo combobox

RichardMoussopo

I would like to populate field attributes in dojo combobox and zoom to the selected feature on selected Index changed. any way to achieve this?

Encuentra más publicaciones etiquetadas con

Accepted answers

RobertScheitlin__GISP

Richard,

Here is a thread that answers this question with sample code https://community.esri.com/message/399170#399170

All comments

RobertScheitlin__GISP

Richard,

Here is a sample that show how to reuse the zoomRow for two different comboboxes:

<!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/FeatureServer/0", {  
        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/FeatureServer/0/generateRenderer";  
        var classificationDef = {"type":"uniqueValueDef","uniqueValueFields":["ZCTA5CE10"]};
        var classificationDef2 = {"type":"uniqueValueDef","uniqueValueFields":["GEOID10"]};
        var str = json.stringify(classificationDef);
        var str2 = json.stringify(classificationDef2);
        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);  
        }));
        esriRequest({  
          url:url,  
          content:{  
            classificationDef:str2,  
            f:'json'  
          },  
          handleAs:'json',  
          callbackParamName:'callback',  
          timeout:15000  
        }).then(lang.hitch(this,function(response){  
          var uniqueValueInfos2 = response && response.uniqueValueInfos;  
          if(uniqueValueInfos2){  
            var store3 = new Memory({data:[]});  
            dijit.byId("uniqueValuesSelect2").set('store',store3);  
            var data2 = array.map(uniqueValueInfos2,lang.hitch(this,function(info,index){  
              var value2 = info.value;  
              //value2 = parseFloat(value2);  
              var dataItem2 = {  
                id:index,  
                name:value2  
              };  
              return dataItem2;  
            }));  
            store3 = new Memory({data:data2});  
            dijit.byId("uniqueValuesSelect2").set('store',store3);  
          }  
        }),lang.hitch(this,function(error){  
          console.error(error);  
        }));
      }));  

      app = {  
        zoomRow: function(id, which){   
          zipcodes.clearSelection();  
          var query = new Query();
          if(which == "zip"){
            query.where = "ZCTA5CE10='" + (id).toString() + "'"; 
          }else if(which == "geo"){
            query.where = "GEOID10='" + (id).toString() + "'"; 
          }
          console.info(query.where);
          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, 'zip');" />
      <input id="uniqueValuesSelect2" data-dojo-type="dijit.form.ComboBox" value="GEOID10" onchange="app.zoomRow(document.getElementById('uniqueValuesSelect2').value, 'geo');" />
    </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>

RichardMoussopo

Thank you Robert the link was very helpful. But, now I am having a little issue.

In my case, I have 3 comboboxes populated from 3 different layers and I would like to use the same function (app ={

zoomRow:

})

for all 3 comboboxes. I thought about using the switch case depending on the ComboBox id but no success.

is there a way around this?

RobertScheitlin__GISP

Richard,

Here is a thread that answers this question with sample code https://community.esri.com/message/399170#399170

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.