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

TracySchloss — Thu, 22 Mar 2012 20:31:46 GMT

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>

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

ReneRubalcava — Sat, 11 Dec 2021 16:27:17 GMT

Actually, this will work

dojo.connect(dijit.byId("mySelect"), "onChange", function(value){
 console.log("value = ", value);
});

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

TracySchloss — Fri, 23 Mar 2012 12:18:38 GMT

Where does this go? Does it matter? I'm used to Flex and Actionscript and the order doesn't seem to matter as much there as it does in javascript.

Also, does this mean I need to remove the onchange from the <select> tag?

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

ReneRubalcava — Fri, 23 Mar 2012 21:15:06 GMT

Sorry, put it in your init function, after the dojo.connect for the map.

topic Re: Can I run a find task from a dropdown list of county names? in ArcGIS JavaScript Maps SDK Questions

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

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

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

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