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?
Solved! Go to Solution.
Richard,
Here is a thread that answers this question with sample code https://community.esri.com/message/399170#399170
Richard,
Here is a thread that answers this question with sample code https://community.esri.com/message/399170#399170
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?
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/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 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>