Edward,
I think this sample is what you are looking for (be aware the use of the "target" SMS style is undocumented and subject to change):
<!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 src="http://js.arcgis.com/3.10/"></script>
<script>
var map;
require([
"esri/map",
"dojo/on",
"esri/tasks/query",
"esri/graphic",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/CartographicLineSymbol",
"esri/Color",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/_base/lang",
"esri/request",
"dojo/json",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, on, Query, Graphic, FeatureLayer, SimpleMarkerSymbol, CartographicLineSymbol, Color, Memory, array, lang, esriRequest, json, parser, registry
) {
parser.parse();
map = new Map("map", {
basemap: "topo",
center: [-120.1883, 37.0868],
zoom: 6
});
var vendors = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ALL_City_Vendors/FeatureServer/0", {
outFields: ["*"]
});
//point target symbol
var cls = new CartographicLineSymbol(CartographicLineSymbol.STYLE_SOLID, new Color([0,255,255,1]), 2, CartographicLineSymbol.CAP_ROUND, CartographicLineSymbol.JOIN_ROUND);
var sms = new SimpleMarkerSymbol("target", 16, cls, new Color([0,0,0,0]));
sms._spikeSize = 7;
sms._targetHeight = 17;
sms._targetWidth = 17;
sms.setAngle(0);
map.addLayers([vendors]);
map.on("layers-add-result", lang.hitch(this, function(){
var url = "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/ALL_City_Vendors/FeatureServer/0/ge...";
var classificationDef = {"type":"uniqueValueDef","uniqueValueFields":["Vendor_Name"]};
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:[]});
registry.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});
registry.byId("uniqueValuesSelect").set('store',store2);
}
}),lang.hitch(this,function(error){
console.error(error);
}));
}));
registry.byId("clearBtn").on("click", function(){
map.graphics.clear();
});
registry.byId("uniqueValuesSelect").on("change", function(){
var query = new Query();
query.where = "Vendor_Name='" + registry.byId("uniqueValuesSelect").get('value') + "'";
console.info(query.where);
query.returnGeometry = true;
vendors.queryFeatures(query, function (featureSet) {
var Geom = featureSet.features[0].geometry;
var gra = new Graphic(Geom, sms);
map.graphics.add(gra);
map.centerAndZoom(Geom, 16);
});
});
});
</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 Vendor name and it will be selected and zoomed to it on the map:
<select id="uniqueValuesSelect" data-dojo-type="dijit/form/ComboBox"></select>
<button id="clearBtn" data-dojo-type="dijit/form/Button">Clear Selection</button>
</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>
