baileyr

Project Geocode Results

Discussion created by baileyr on Jun 1, 2010
Latest reply on Jun 2, 2010 by baileyr
When using the "Geocode an Address" sample from the 1.6 version of the JavaScript API, I would like to use the ESRI_Geocode_USA locator as listed but show results on a local map service that has a different spatial reference. Can anyone assist with the best approach?
Thanks in advance.
<!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 Address</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
    <script type="text/javascript">
      dojo.require("esri.map");
      dojo.require("esri.tasks.locator");

      var map, locator;

      function init() {
        map = new esri.Map("map", { extent: new esri.geometry.Extent(1490176.82038304,648636.119034206,1493286.59857839,651174.565886689, new esri.SpatialReference({ wkid: 3735})) });
        dojo.connect(map, "onLoad", function() {
          //after map loads, connect to listen to mouse move & drag events
          dojo.connect(map, "onMouseMove", showCoordinates);
          dojo.connect(map, "onMouseDrag", showCoordinates);
        });

        var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://maps.cityofdayton.org/ArcGIS/rest/services/Maps/HansenSRbase_Tile/MapServer");
        map.addLayer(tiledMapServiceLayer);

        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([255,0,0,0.75]));

        var points =  new esri.geometry.Multipoint(map.spatialReference); 

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


      function showCoordinates(evt) {
        //get mapPoint from event
        var mp = evt.mapPoint;
        //display mouse coordinates
        dojo.byId("info").innerHTML = mp.x + ", " + mp.y;
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  <body class="tundra">
    Address : <input type="text" id="address" size="60" value="4604 Silver Oak St, Dayton, OH, 45424" /> <i>(Address, City, State, Zip)</i>
    <input type="button" value="Locate" onclick="locate()" /><br />
    <br />
    <div id="map" style="position:relative; width:1200px; height:600px; border:1px solid #000;">
      <span id="info" style="position:absolute; right:25px; bottom:5px; color:#000; z-index:50;"></span>
  </body>
</html> 

Outcomes