nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Geocode an address

KeisukeNozaki

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">
    
    <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>

タグ付けされた投稿をもっと見る

Accepted answers

JakeSkinner

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

All comments

KeisukeNozaki

It worked.
Thank you so much!

JakeSkinner

map.centerAndZoom(geom, 19);

KeisukeNozaki

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>

JakeSkinner

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

KeisukeNozaki

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.

JakeSkinner

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>

KeisukeNozaki

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>

JakeSkinner

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>

KeisukeNozaki

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"
>
    
    <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>

JakeSkinner

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"/>

KeisukeNozaki

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"/>

JakeSkinner

I would recommend creating a text input rather than textarea:

<input type="text" id="address" value="380 New York St, Redlands" size="30"/>

KeisukeNozaki

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.

JakeSkinner

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.

KeisukeNozaki

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();
            }
    });

JakeSkinner

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();
            }
    });

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.