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); }); };
<!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>
any solutions to this?
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.
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.
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>
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
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);