Select to view content in your preferred language

Geocode an address

2843
16
Jump to solution
02-11-2014 08:08 AM
KeisukeNozaki
Frequent Contributor
I would like to trigger Locate by the Enter key as well as clicking the button.
Please let me know where I need to add codes.
Thank you very much.



<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Find Address</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body {
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      }
      #map{
        padding:0;
        border:solid 1px #343642;
        margin:5px 5px 5px 0px;
      }
      #leftPane{
        width:20%;
        border-top: solid 1px #343642;
        border-left: solid 1px #343642;
        border-bottom: solid 1px #343642;
        margin:5px 0px 5px 5px;
        color: #343642;
        font:100% Georgia,"Times New Roman",Times,serif;
        /*letter-spacing: 0.05em;*/
      }
     </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map, locator;

      require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/array", "dojo/_base/Color",
        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",

        "dijit/form/Button", "dijit/form/Textarea",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Locator, Graphic,
        InfoTemplate, SimpleMarkerSymbol,
        Font, TextSymbol,
        arrayUtils, Color,
        number, parser, dom, registry
      ) {
        parser.parse();

        map = new Map("map", {
          basemap: "streets",
          center: [-93.5, 41.431],
          zoom: 5
        });
       
        locator = new Locator("http://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
        locator.on("address-to-locations-complete", showResults);

        // listen for button click then geocode
        registry.byId("locate").on("click", locate);
       
        map.infoWindow.resize(200,125);

        function locate() {
          map.graphics.clear();
          var address = {
            "SingleLine": dom.byId("address").value
          };
          locator.outSpatialReference = map.spatialReference;
          var options = {
            address: address,
            outFields: ["Loc_name"]
          }
          locator.addressToLocations(options);
        }

        function showResults(evt) {
          var candidate;
          var symbol = new SimpleMarkerSymbol();
          var infoTemplate = new InfoTemplate(
            "Location",
            "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
          );
          symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
          symbol.setColor(new Color([153,0,51,0.75]));

          var geom;
          arrayUtils.every(evt.addresses, function(candidate) {
            console.log(candidate.score);
            if (candidate.score > 80) {
              console.log(candidate.location);
              var attributes = {
                address: candidate.address,
                score: candidate.score,
                locatorName: candidate.attributes.Loc_name
              };  
              geom = candidate.location;
              var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
              //add a graphic to the map at the geocoded location
              map.graphics.add(graphic);
              //add a text symbol to the map listing the location of the matched address.
              var displayText = candidate.address;
              var font = new Font(
                "16pt",
                Font.STYLE_NORMAL,
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
              );
            
              var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#666633")
              );
              textSymbol.setOffset(0,8);
              map.graphics.add(new Graphic(geom, textSymbol));
              return false; //break out of loop after one candidate with score greater  than 80 is found.
            }
          });
          if ( geom !== undefined ) {
            map.centerAndZoom(geom, 12);
          }
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'sidebar', gutters:false"
         style="width:100%; height:100%;">

      <div id="leftPane"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'left'">
        Enter an address then click the locate button to use a sample address locator to return the location for
        street addresses in the United States.
        <br>

        <textarea type="text" id="address"/>380 New York St, Redlands</textArea>
        <br>

        <button id="locate" data-dojo-type="dijit/form/Button">Locate</button>
      </div>

      <div id="map"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
0 Kudos
16 Replies
KeisukeNozaki
Frequent Contributor
I was able to add pop-ups but the map no longer zooms when hitting ENTER.
Here is my code.
Thanks a lot.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Find Address</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      #map{ 
        padding:0;
        border:solid 1px #343642;
        margin:5px 5px 5px 0px;
      }
 #top{
        width:20%;
        border-top: solid 1px #343642;
        border-left: solid 1px #343642;
        border-bottom: solid 1px #343642;
        margin:5px 0px 5px 5px;
        color: #343642;
        font:90% Arial,"Arial",Arial,Arial;
        /*letter-spacing: 0.05em;*/
      }
     </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map, locator;

      require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/dijit/InfoWindowLite", "esri/InfoTemplate", "esri/layers/FeatureLayer", "dojo/dom-construct",
        "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/array", "dojo/_base/Color",
        "dojo/number", "dojo/parser", "dojo/dom", "dijit/registry",

        "dijit/form/Button", "dijit/form/Textarea",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Locator, Graphic,
        InfoWindowLite, InfoTemplate, FeatureLayer, domConstruct,
        InfoTemplate, SimpleMarkerSymbol, 
        Font, TextSymbol,
        arrayUtils, Color,
        number, parser, dom, registry
      ) {
        parser.parse();

  
 
        var initExtent = new esri.geometry.Extent({"xmin":2155300,"ymin":1381110,"xmax":2157350,"ymax":1381877,"spatialReference":{"wkid":3436}});
  
  
       var map = new esri.Map("map",{extent:initExtent});
        
        var basemap = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.wiu.edu/arcgis/rest/services/mcdonough_highway_old/MapServer");
        map.addLayer(basemap);


    /*var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
    infoWindow.startup();
    map.setInfoWindow(infoWindow);*/
    
    var template = new InfoTemplate();
    template.setTitle("<b>${PARCELID}</b>");
    template.setContent("${owner1_name} <br> ${site_address}");
    
    //add a layer to the map
    var featureLayer = new FeatureLayer("http://gis.wiu.edu/arcgis/rest/services/mcdonough_highway/MapServer/21", {
        mode: FeatureLayer.MODE_ONDEMAND,
        infoTemplate:template,
        outFields: ["PARCELID" , "site_address", "owner1_name"]
    });
    
    map.addLayer(featureLayer);
    
    map.infoWindow.resize(200, 75);
   
   on(dom.byId("address"), "keyup", function(event){
       if (event.keyCode == 13 && this.value.length > 0) {
                locate();
       }
   })

       
        locator = new Locator("http://gis.wiu.edu/arcgis/rest/services/mcdonough_structure/GeocodeServer");
        locator.on("address-to-locations-complete", showResults);
        // listen for button click then geocode
        <!--registry.byId("locate").on("click", locate);-->
        
        map.infoWindow.resize(200,125);

        dojo.connect(dom.byId("address"), 'onkeyup', function(event) {
            if (event.keyCode == 13 && this.value.length > 0) {
                locate();
            }
        });

        function locate() {
          map.graphics.clear();
          var address = {
            "Street": dom.byId("address").value
          };
          locator.outSpatialReference = map.spatialReference;
          var options = {
            address: address,
            outFields: ["HouseNum"]
          }
          locator.addressToLocations(options);
        }

        function showResults(evt) {
          var candidate;
          var symbol = new SimpleMarkerSymbol();
          var infoTemplate = new InfoTemplate(
            "Location", 
            "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
          );
          symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
          symbol.setSize(10);
          symbol.setColor(new Color("#ffff00"));

          var geom;
          arrayUtils.every(evt.addresses, function(candidate) {
            console.log(candidate.score);
            if (candidate.score > 80) {
              console.log(candidate.location);
              var attributes = { 
                address: candidate.address, 
                score: candidate.score, 
                locatorName: candidate.attributes.StreetName 
              };   
              geom = candidate.location;
              var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
              //add a graphic to the map at the geocoded location
              map.graphics.add(graphic);
              //add a text symbol to the map listing the location of the matched address.
              var displayText = candidate.address;
              var font = new Font(
                "12pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
              );
             
              var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#ffff00")
              );
              textSymbol.setOffset(0,15);
              map.graphics.add(new Graphic(geom, textSymbol));
              return false; //break out of loop after one candidate with score greater  than 80 is found.
            }

            else{
            alert("No results found, please enter another address");
             }
                          
          });
          
          if ( geom !== undefined ) {
            map.centerAndZoom(geom, 0.35);
          }
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'sidebar', gutters:false" 
         style="width:100%; height:100%;">

<div id="top"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        Enter address then hit ENTER. <br>
        Example:  <b>232 e jackson st</b><br>
        <br>
        <input type="text" id="address" size="25" autofocus="autofocus"/>
        <br>
      </div>

      <div id="map" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
0 Kudos
JakeSkinner
Esri Esteemed Contributor
Instead of using 'dojo.connect', you will want to use 'on'.  Ex:

on(dom.byId("address"), 'onkeyup', function(event) {
            if (event.keyCode == 13 && this.value.length > 0) {
                locate();
            }
});


You will need to add "dojo/on" module to require and the variable "on" to the function.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Find Address</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      #map{ 
        padding:0;
        border:solid 1px #343642;
        margin:5px 5px 5px 0px;
      }
 #top{
        width:20%;
        border-top: solid 1px #343642;
        border-left: solid 1px #343642;
        border-bottom: solid 1px #343642;
        margin:5px 0px 5px 5px;
        color: #343642;
        font:90% Arial,"Arial",Arial,Arial;
        /*letter-spacing: 0.05em;*/
      }
     </style>

    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map, locator;

      require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/dijit/InfoWindowLite", "esri/InfoTemplate", "esri/layers/FeatureLayer", "dojo/dom-construct",
        "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/array", "dojo/_base/Color",
        "dojo/number", "dojo/parser", "dojo/dom", "dojo/on", "dijit/registry",

        "dijit/form/Button", "dijit/form/Textarea",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Locator, Graphic,
        InfoWindowLite, InfoTemplate, FeatureLayer, domConstruct,
        InfoTemplate, SimpleMarkerSymbol, 
        Font, TextSymbol,
        arrayUtils, Color,
        number, parser, dom, on, registry
      ) {
        parser.parse();

        
    
        var initExtent = new esri.geometry.Extent({"xmin":2155300,"ymin":1381110,"xmax":2157350,"ymax":1381877,"spatialReference":{"wkid":3436}});
        
        
       var map = new esri.Map("map",{extent:initExtent});
        
        var basemap = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.wiu.edu/arcgis/rest/services/mcdonough_highway_old/MapServer");
        map.addLayer(basemap);


    /*var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
    infoWindow.startup();
    map.setInfoWindow(infoWindow);*/
    
    var template = new InfoTemplate();
    template.setTitle("<b>${PARCELID}</b>");
    template.setContent("${owner1_name} <br> ${site_address}");
    
    //add a layer to the map
    var featureLayer = new FeatureLayer("http://gis.wiu.edu/arcgis/rest/services/mcdonough_highway/MapServer/21", {
        mode: FeatureLayer.MODE_ONDEMAND,
        infoTemplate:template,
        outFields: ["PARCELID" , "site_address", "owner1_name"]
    });
    
    map.addLayer(featureLayer);
    
    map.infoWindow.resize(200, 75);
   
   on(dom.byId("address"), "keyup", function(event){
       if (event.keyCode == 13 && this.value.length > 0) {
                locate();
       }
   })

       
        locator = new Locator("http://gis.wiu.edu/arcgis/rest/services/mcdonough_structure/GeocodeServer");
        locator.on("address-to-locations-complete", showResults);
        // listen for button click then geocode        
        
        map.infoWindow.resize(200,125);

        on(dom.byId("address"), 'onkeyup', function(event) {
            if (event.keyCode == 13 && this.value.length > 0) {
                locate();
            }
        });

        function locate() {
          map.graphics.clear();
          var address = {
            "Street": dom.byId("address").value
          };
          locator.outSpatialReference = map.spatialReference;
          var options = {
            address: address,
            outFields: ["HouseNum"]
          }
          locator.addressToLocations(options);
        }

        function showResults(evt) {
          var candidate;
          var symbol = new SimpleMarkerSymbol();
          var infoTemplate = new InfoTemplate(
            "Location", 
            "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
          );
          symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
          symbol.setSize(10);
          symbol.setColor(new Color("#ffff00"));

          var geom;
          arrayUtils.every(evt.addresses, function(candidate) {
            console.log(candidate.score);
            if (candidate.score > 80) {
              console.log(candidate.location);
              var attributes = { 
                address: candidate.address, 
                score: candidate.score, 
                locatorName: candidate.attributes.StreetName 
              };   
              geom = candidate.location;
              var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
              //add a graphic to the map at the geocoded location
              map.graphics.add(graphic);
              //add a text symbol to the map listing the location of the matched address.
              var displayText = candidate.address;
              var font = new Font(
                "12pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
              );
             
              var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#ffff00")
              );
              textSymbol.setOffset(0,15);
              map.graphics.add(new Graphic(geom, textSymbol));
              return false; //break out of loop after one candidate with score greater  than 80 is found.
            }

            else{
            alert("No results found, please enter another address");
             }
                          
          });
          
          if ( geom !== undefined ) {
            map.centerAndZoom(geom, 0.35);
          }
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'sidebar', gutters:false" 
         style="width:100%; height:100%;">

<div id="top"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        Enter address then hit ENTER. <br>
        Example:  <b>232 e jackson st</b><br>
        <br>
        <input type="text" id="address" size="25" autofocus="autofocus"/>
        <br>
      </div>

      <div id="map" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
0 Kudos
KeisukeNozaki
Frequent Contributor
I noticed locator stopped working once I added tiled map service on the top.
It seems dynamic service needs to be on the top.
Please see the codes below.
        var basemap2 = new ArcGISTiledMapServiceLayer("http://gis.wiu.edu/arcgis/rest/services/basemap/aerial_cache/MapServer");
        map.addLayer(basemap2); 
 
        var basemap = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.wiu.edu/arcgis/rest/services/mcdonough_mobile/MapServer",
        {"opacity" : 0.5,});
        map.addLayer(basemap);

Please let me know if any workaround.
Thank you very much.
0 Kudos
JakeSkinner
Esri Esteemed Contributor
The dynamic layer is not drawing because the coordinate system is set to NAD83 / Illinois West (ftUS).  The tiled service is set to  WGS 1984 Web Mercator Auxiliary Sphere.  Try the following:

1.  Open the mcdonough_mobile.mxd in ArcMap
2.  Set the data frame project to WGS 1984 Web Mercator (aux sphere)
3.  Save the MXD
4.  Publish the MXD to ArcGIS Server and use this service
0 Kudos
KeisukeNozaki
Frequent Contributor
Maps display after matching the projection.
However, geocoding still does not work.
Here is a site and code.
Thanks a lot.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Find Address</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">
    <style>
      html, body { 
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      } 
      #map{ 
        padding:0;
        border:solid 1px #343642;
        margin:5px 5px 5px 0px;
      }
 #top{
        width:20%;
        border-top: solid 1px #343642;
        border-left: solid 1px #343642;
        border-bottom: solid 1px #343642;
        margin:5px 0px 5px 5px;
        color: #343642;
        font:90% Arial,"Arial",Arial,Arial;
        /*letter-spacing: 0.05em;*/
      }
     </style>


<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){
  (i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-21888440-1', 'wiu.edu');
  ga('send', 'pageview');

</script>


    <script src="http://js.arcgis.com/3.8/"></script>
    <script>
      var map, locator;

      require([
        "esri/map", "esri/tasks/locator", "esri/graphic",
        "esri/dijit/InfoWindowLite", "esri/InfoTemplate", "esri/layers/FeatureLayer", "dojo/dom-construct",
        "esri/InfoTemplate", "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/Font", "esri/symbols/TextSymbol",
        "dojo/_base/array", "dojo/_base/Color",
        "dojo/number", "dojo/parser", "dojo/dom", "dojo/on", "dijit/registry",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ArcGISTiledMapServiceLayer",

        "dijit/form/Button", "dijit/form/Textarea",
        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, Locator, Graphic,
        InfoWindowLite, InfoTemplate, FeatureLayer, domConstruct,
        InfoTemplate, SimpleMarkerSymbol, 
        Font, TextSymbol,
        arrayUtils, Color,
        number, parser, dom, on, registry,
        ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer
      ) {
        parser.parse();
    
        -->var initExtent = new esri.geometry.Extent({"xmin":2155300,"ymin":1381110,"xmax":2157350,"ymax":1381877,"spatialReference":{"wkid":3436}});
        var initExtent = new esri.geometry.Extent({"xmin":-10093755,"ymin":4932648,"xmax":-10093139,"ymax":4933004,"spatialReference":{"wkid":3857}});
                
        var map = new esri.Map("map",{extent:initExtent});

        var basemap2 = new ArcGISTiledMapServiceLayer("http://gis.wiu.edu/arcgis/rest/services/basemap/aerial_cache/MapServer");
        map.addLayer(basemap2); 

        var basemap = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.wiu.edu/arcgis/rest/services/mcdonough_mobile/MapServer");
        map.addLayer(basemap);

    /*var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
    infoWindow.startup();
    map.setInfoWindow(infoWindow);*/
    
    var template = new InfoTemplate();
    template.setTitle("<b>${PARCELID}</b>");
    template.setContent("${owner1_name} <br> ${site_address}");
    
    //add a layer to the map
    var featureLayer = new FeatureLayer("http://gis.wiu.edu/arcgis/rest/services/mcdonough_highway/MapServer/21", {
        mode: FeatureLayer.MODE_ONDEMAND,
        infoTemplate:template,
        outFields: ["PARCELID" , "site_address", "owner1_name"]
    });
    
    map.addLayer(featureLayer);
    
    map.infoWindow.resize(200, 75);
   
   on(dom.byId("address"), "keyup", function(event){
       if (event.keyCode == 13 && this.value.length > 0) {
                locate();
       }
   })

       
        locator = new Locator("http://gis.wiu.edu/arcgis/rest/services/mcdonough_structure/GeocodeServer");
        locator.on("address-to-locations-complete", showResults);
        // listen for button click then geocode        
        
        map.infoWindow.resize(200,125);

        on(dom.byId("address"), 'onkeyup', function(event) {
            if (event.keyCode == 13 && this.value.length > 0) {
                locate();
            }
        });

        function locate() {
          map.graphics.clear();
          var address = {
            "Street": dom.byId("address").value
          };
          locator.outSpatialReference = map.spatialReference;
          var options = {
            address: address,
            outFields: ["HouseNum"]
          }
          locator.addressToLocations(options);
        }

        function showResults(evt) {
          var candidate;
          var symbol = new SimpleMarkerSymbol();
          var infoTemplate = new InfoTemplate(
            "Location", 
            "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}"
          );
          symbol.setStyle(SimpleMarkerSymbol.STYLE_SQUARE);
          symbol.setSize(10);
          symbol.setColor(new Color("#ffff00"));

          var geom;
          arrayUtils.every(evt.addresses, function(candidate) {
            console.log(candidate.score);
            if (candidate.score > 80) {
              console.log(candidate.location);
              var attributes = { 
                address: candidate.address, 
                score: candidate.score, 
                locatorName: candidate.attributes.StreetName 
              };   
              geom = candidate.location;
              var graphic = new Graphic(geom, symbol, attributes, infoTemplate);
              //add a graphic to the map at the geocoded location
              map.graphics.add(graphic);
              //add a text symbol to the map listing the location of the matched address.
              var displayText = candidate.address;
              var font = new Font(
                "12pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
              );
             
              var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#ffff00")
              );
              textSymbol.setOffset(0,15);
              map.graphics.add(new Graphic(geom, textSymbol));
              return false; //break out of loop after one candidate with score greater  than 80 is found.
            }

            else{
            alert("No results found, please enter another address");
             }
                          
          });
          
          if ( geom !== undefined ) {
            map.centerAndZoom(geom, 0.5);
          }
        }
      });
    </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" 
         data-dojo-props="design:'sidebar', gutters:false" 
         style="width:100%; height:100%;">

<div id="top"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        Enter address then hit ENTER. <br>
        Example:  <b>232 e jackson st</b><br>
        <br>
        <input type="text" id="address" size="25" autofocus="autofocus"/>
        <br>
      </div>

      <div id="map" 
           data-dojo-type="dijit/layout/ContentPane" 
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
0 Kudos
JakeSkinner
Esri Esteemed Contributor
Actually, the geocode is working, it's the centering and zoom that is not.  When using an ArcGISTiledMapServiceLayer, the map is zoomed to the level specified.  When using a DynamicMapServiceLayer,  the map is zoomed in or out by the specified factor.  Since you are using an ArcGISTiledMapServiceLayer you will need to specify a scale level.  Try the following;

map.centerAndZoom(geom, 19);
0 Kudos
KeisukeNozaki
Frequent Contributor
It worked.
Thank you so much!
0 Kudos