topic Re: use Locator to search an address and return result to a table in ArcGIS JavaScript Maps SDK Questions

use Locator to search an address and return result to a table

jamesa — Thu, 15 Aug 2019 20:15:13 GMT

I try to search an input address using Locator then return result to a table instead of show on the map. See my code below and help me to see how to perform this simple task. Thanks.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

var locatorTask = new Locator({
url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
});
var addressParams = {
"SingleLine": dom.byId("address").value
};

on(dom.byId('btnGo'), 'click', function(){
locatorTask.addressToLocations({address:addressParams}).then(function(response){
console.log(response);
console.log(response[0].address);
showResults(response);
});
});

function showResults(results) {

var rtable = dom.byId("resultsdiv");
rtable.innerHTML = "<p><b>" + results.length + " Matching Results:</b></p>";
var content = [];
//start table
content.push("<table border='0'><tr>");
arrayUtils.forEach(results, function(result, index) {
content.push("<tr><td>");
content.push("</td>" + (index + 1) + result.address + "<td>");
content.push("</td></tr>");
});

content.push("</tr></table>");
rtable.innerHTML += content.join("");
}

});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width:100%; height:100%;">

<div id="content1" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
Find address:
<br />
<br />
Address:
<input type='text' id='address' size ="60" value="380 New York St, Redlands, California, 92373"></input>
<button type="button" id='btnGo'>Locate</button>
</div>
<div id="content2" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="resultsdiv"></div>
</div>
</div>
</body>
</html>

Re: use Locator to search an address and return result to a table

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:27:54 GMT

James,

Here is my adjustment to your code:

<!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="https://js.arcgis.com/4.11/esri/css/main.css">

  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #map {
      padding: 0;
      border: solid 2px #666;
      margin: 0 5px 5px 5px;
    }

    #content1 {
      border: solid 2px #666;
      color: #666;
      I want to use A font-size: 1.1em;
      height: auto;
      margin: 5px;
      overflow: hidden;
      padding: 10px 0 10px 20px;
      text-align: left;
    }

    #content2 {
      border: solid 2px #666;
      color: #666;
      font-family: sans-serif;
      font-size: 1.1em;
      height: auto;
      margin: 5px;
      overflow: hidden;
      padding: 10px 0 10px 20px;
      text-align: left;
    }

    .roundedCorners {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
    }
  </style>

  <script src="https://js.arcgis.com/4.11/"></script>
  <script>
    var map;
    require([
      "esri/Map", "esri/views/MapView", "esri/tasks/Locator", "esri/Graphic",
      "esri/geometry/support/webMercatorUtils",
      "esri/PopupTemplate", "esri/geometry/SpatialReference", "esri/geometry/Point",
      "dojo/number", "dojo/parser", "dojo/dom", "dojo/on",
      "dojo/dom-construct",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
    ], function (
      Map, MapView, Locator, Graphic,
      webMercatorUtils,
      PopupTemplate, SpatialReference, Point,
      number, parser, dom, on,
      domConstruct
    ) {
      parser.parse();

      var locatorTask = new Locator({
        url: "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
      });
      var addressParams = {
        "SingleLine": dom.byId("address").value
      };

      on(dom.byId('btnGo'), 'click', function () {
        locatorTask.addressToLocations({
          address: addressParams
        }).then(function (response) {
          console.log(response);
          console.log(response[0].address);
          showResults(response);
        });
      });

      function showResults(results) {
        var rtable = dom.byId("resultsdiv");
        rtable.innerHTML = "<p><b>" + results.length + " Matching Results:</b></p>";
        //start table
        var myTable = domConstruct.create('table',{"border":0}, "myTableDiv");
        console.info(results);
        results.map(function(result, index){
          var tr = domConstruct.create("tr", {}, myTable),
            td = domConstruct.toDom("<td>(" + (index + 1) + ") " + result.address + "</td>");
            domConstruct.place(td, tr);
        });
      }

    });
  </script>
</head>

<body class="claro">
  <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false"
    style="width:100%; height:100%;">

    <div id="content1" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      Find address:
      <br />
      <br />
      Address:
      <input type='text' id='address' size="60" value="380 New York St, Redlands, California, 92373"></input>
      <button type="button" id='btnGo'>Locate</button>
    </div>
    <div id="content2" class="roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
      <div id="resultsdiv"></div>   
      <div id="myTableDiv"></div>
    </div>
  </div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: use Locator to search an address and return result to a table

jamesa — Fri, 16 Aug 2019 17:04:16 GMT

Thank you.