schlot

Can I run a find task from a dropdown list of county names?

Discussion created by schlot on Mar 22, 2012
Latest reply on Mar 23, 2012 by odoe
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>

Outcomes