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">
<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",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, MapView, Locator, Graphic,
webMercatorUtils,
PopupTemplate, SpatialReference, Point,
number, parser, dom, on
) {
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>";
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>
Solved! Go to Solution.
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>
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>
Thank you.