lallen4585

Geocode doesn't zoom to point

Discussion created by lallen4585 on Apr 30, 2010
I have modified the API Geocode task so that it doesn't show multiple points, however, now it won't zoom the gecoded result.  Here is the code.  Thanks for any help.

Lee

<!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" />
    <title>Find Commissioner</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.0"></script>
    <script type="text/javascript">
        dojo.require("esri.map");
        dojo.require("esri.tasks.locator");

        var map, locator;

        function init() {
            var initExtent = new esri.geometry.Extent({ "xmin": -10689976, "ymin": 4701665, "xmax": -10629428, "ymax": 4754219, "spatialReference": { "wkid": 102100} });
            map = new esri.Map("map", { extent: initExtent });
            var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
            map.addLayer(tiledMapServiceLayer);
            var imageParameters = new esri.layers.ImageParameters();
            imageParameters.format = "PNG8";  //set the image type to PNG24, note default is PNG8.
            //Takes a URL to a non cached map service.
            var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.snco.us/ArcGIS/rest/services/Commission/MapServer", { "opacity": 0.7, "imageParameters": imageParameters });
            map.addLayer(dynamicMapServiceLayer);
            locator = new esri.tasks.Locator("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Locators/ESRI_Geocode_USA/GeocodeServer");
            dojo.connect(locator, "onAddressToLocationsComplete", showResults);
        }

        function locate() {
            map.graphics.clear();
            var add = dojo.byId("address").value.split(",");
            var address = {
                Address: add[0],
                City: add[1],
                State: add[2],
                Zip: add[3]
            };
            locator.addressToLocations(address, ["Loc_name"]);
        }

        function showResults(candidates) {
            var candidate;
            var symbol = new esri.symbol.SimpleMarkerSymbol();
            var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");

            symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
            symbol.setColor(new dojo.Color([235, 20, 0, 0.75]));

            var point = new esri.geometry.Point(map.spatialReference);

            for (var i = 0, il = candidates.length; i < il; i++) {
                candidate = candidates[i];
                if (candidate.score > 80) {
                    var attributes = { address: candidate.address, score: candidate.score, locatorName: candidate.attributes.Loc_name };
                    var geom = esri.geometry.geographicToWebMercator(candidate.location);
                    var graphic = new esri.Graphic(geom, symbol, attributes, infoTemplate);
                    map.graphics.add(graphic);
                    map.graphics.add(new esri.Graphic(geom, new esri.symbol.TextSymbol(attributes.address).setOffset(0, 8)));
                    point.addPoint(geom);
                }
            }
            map.setExtent(point.getExtent().expand(0));
        }

        dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Address : <input type="text" id="address" size="60" value="200 SE 7th St, Topeka, KS" /> <i>(Address, City, State)</i>
    <input type="button" value="Locate" onclick="locate()" /><br />
    <br />
    <div id="map" style="width:600px; height:600px; border:3px solid #100;"></div>
  </body>
</html>

Outcomes