I'm very new to HTML/JavaScript and I'm surprised not to find an example out there already for this. I would like to let the user pick a county from a list and zoom to that county. I see examples where the users can enter in the name into a text input, but there are a lot of issues with spelling and I'd rather let them choose.I have the dropdown list, but the value selected isn't making it into my doFind function. I've deleted a lot of our counties in this example - Missouri has over 100!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9" />
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>zoomCountyByName</title>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script type="text/javascript">
djConfig = {
parseOnLoad: true
};
</script>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.7/js/dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7">
</script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("esri.tasks.find");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.ComboBox");
var map;
var findTask, findParams;
var countyName, mySelect;
function init(){
var spatialReference = new esri.SpatialReference({
wkid: 102100
});
var startExtent = new esri.geometry.Extent(-10583000, 4287025, -9979000, 4980462, spatialReference);
map = new esri.Map("map", {
extent: startExtent
});
var streetMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(streetMapLayer);
//Create Find Task using the URL of the map service to search
findTask = new esri.tasks.FindTask("http://gis.dhss.mo.gov/arcgis/rest/services/county_simple/MapServer");
//Create the find parameters
findParams = new esri.tasks.FindParameters();
findParams.returnGeometry = true;
findParams.layerIds = [0];
findParams.searchFields = ["NAME", "NAME2"];
findParams.outSpatialReference = map.spatialReference;
dojo.connect(map, 'onLoad', function(theMap){
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
}
function doFind(){
//Set the search text to the value in the box
countyName = dojo.byId("mySelect").value;
findParams.searchText = countyName;
// findParams.searchText = dojo.byId("mySelect").value;
findTask.execute(findParams, showResults);
}
function showResults(results){
//This function works with an array of FindResult that the task returns
map.graphics.clear();
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([98, 194, 204]), 2), new dojo.Color([98, 194, 204, 0.5]));
//create array of attributes
var items = dojo.map(results, function(result){
var graphic = result.feature;
graphic.setSymbol(symbol);
map.graphics.add(graphic);
return result.feature.attributes;
});
//Zoom back to the initial map extent
var selectedExt = graphic.geometry.getExtent();
map.setExtent(selectedExt);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:40px;">
<select id="mySelect" data-dojo-type="dijit.form.ComboBox" onchange="doFind();" >
<option>Adair</option>
<option>Andrew</option>
<option>Atchison</option>
<option>Audrain</option>
<option>Barry</option>
<option>St. Charles</option>
<option>St. Clair</option>
<option>St. Francois</option>
<option>St. Louis</option>
<option>St. Louis City</option>
<option>Ste. Genevieve</option>
<option>Stoddard</option>
<option>Stone</option>
<option>Sullivan</option>
<option>Taney</option>
<option>Texas</option>
<option>Vernon</option>
<option>Warren</option>
<option>Washington</option>
<option>Wayne</option>
<option>Webster</option>
<option>Worth</option>
<option>Wright</option>
</select>
</div>
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
</div>
</body>
</html>
