Geocode an address

1831
16
Jump to solution
02-11-2014 08:08 AM
KeisukeNozaki
Occasional Contributor II
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
1 Solution

Accepted Solutions
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);

View solution in original post

0 Kudos
16 Replies
JakeSkinner
Esri Esteemed Contributor
Hi Keisuke,

Try adding the following before the locate() function:

dojo.connect(dom.byId("address"), 'onkeyup', function(event) {
            if (event.keyCode == 13 && this.value.length > 0) {
                locate();
            }
    });
0 Kudos
KeisukeNozaki
Occasional Contributor II
It works great!
I may not need Locate button.
But if I remove <button id="locate" data-dojo-type="dijit/form/Button">Locate</button>, it stops working.
Is there a good way to hide the button?

Hi Keisuke,

Try adding the following before the locate() function:

dojo.connect(dom.byId("address"), 'onkeyup', function(event) {
            if (event.keyCode == 13 && this.value.length > 0) {
                locate();
            }
    });
0 Kudos
JakeSkinner
Esri Esteemed Contributor
It will work after you comment out the following line:

registry.byId("locate").on("click", locate);


Also, here is an update to the previous code I sent using the new "dojo/on" module if you're interested:

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


You will need to add "dojo/on" and "on" to require and function.
0 Kudos
KeisukeNozaki
Occasional Contributor II
When I hit ENTER, a cursor automatically moves to the second line while map zooming.
Is it possible to disable the second line or stay on the first line?
If not, clear button for textbox would be useful.
Thanks a lot!

It will work after you comment out the following line:

registry.byId("locate").on("click", locate);


Also, here is an update to the previous code I sent using the new "dojo/on" module if you're interested:

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


You will need to add "dojo/on" and "on" to require and function.
0 Kudos
JakeSkinner
Esri Esteemed Contributor
I would recommend creating a text input rather than textarea:

<input type="text" id="address" value="380 New York St, Redlands" size="30"/>
0 Kudos
KeisukeNozaki
Occasional Contributor II
May I ask couple questions?

1. When address does not match, no error message shows up. User may think program is not working.
2. Starting this page, user needs to click textbox to enter address. Is there a way to highlight textbox as default to save user's steps?

Thank you very much.


I would recommend creating a text input rather than textarea:

<input type="text" id="address" value="380 New York St, Redlands" size="30"/>
0 Kudos
JakeSkinner
Esri Esteemed Contributor
1.  You can add an 'else' statement with an alert message if the matching candidate is not greater than 80.  Ex:

       
if (candidate.score > 80) {
            console.log(candidate.score);
            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.
        }
        else{
            alert("No results found, please enter another address");
        }
        });


2.  Add 'autofocus' property to the input tag.  Ex:

<input type="text" id="address" value="380 New York St, Redlands" size="30" autofocus="autofocus"/>
0 Kudos
KeisukeNozaki
Occasional Contributor II
I have a code for pop-up window.
Is it possible to combine this function to the existing code?

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"
>
    <!--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>Info Window Lite</title>


    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
    <style>
      html, body, #mapDiv { height: 100%; margin: 0; padding: 0; }
    </style>

    <script src="http://js.arcgis.com/3.7/"></script>
    <script>

      require([
        "esri/map",
        "esri/dijit/InfoWindowLite",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "dojo/dom-construct",
        "dojo/domReady!"
      ], function(
          Map,
          InfoWindowLite,
          InfoTemplate,
          FeatureLayer,
          domConstruct
         ) {

        var map = new Map("mapDiv", {
          basemap: "topo",
          center: [-98.416, 39.781],
          zoom: 6
        });

        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}  \n  ${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);


      });
    </script>
  </head>
 
  <body c>
    <div id="mapDiv"></div>
  </body>

</html>
0 Kudos
JakeSkinner
Esri Esteemed Contributor
Yes, here is an example:


<!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/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();

    map = new Map("map", {
        basemap: "topo",
        center: [-90.674923, 40.460873],
        zoom: 17
    });
    
    /*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} \n ${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://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.score);
            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.
        }
        else{
            alert("No results found, please enter another address");
        }
        });
        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>
<input type="text" id="address" value="380 New York St, Redlands" size="30" autofocus="autofocus"/>
<!--<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