Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Geocode details
Explore in the sandbox
Open in CodePen
View live sample
Description
This sample shows how to geocode an address using the locator from http://tasks.arcgis.com. To use the sample enter an address then click the Locate button. The map will geocode the address and zoom to that location. The resulting location is displayed on the map and the location information is displayed in various formats including GeoRSS, Esri Json and GeoJSON.
The sample also displays the current map extent for the results. The extent is in JSON format and can be copied to use as the extent for your mapping applications.
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>Geocode Details</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
color: #353129;
}
fieldset {
border: 1px solid #353129;
color: #353129;
}
#map{
margin: 0;
padding: 0;
}
#footerPane{
border: none;
height: 300px;
}
</style>
<script src="https://js.arcgis.com/3.46/"></script>
<script>
var locator, map;
require([
"esri/map", "esri/tasks/locator",
"esri/SpatialReference", "esri/graphic",
"esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol",
"esri/symbols/Font", "esri/symbols/TextSymbol",
"esri/geometry/Point", "esri/geometry/Extent",
"esri/geometry/webMercatorUtils",
"dojo/_base/array", "esri/Color",
"dojo/number", "dojo/parser", "dojo/dom", "dojo/json", "dijit/registry",
"dijit/form/Button", "dijit/form/Textarea",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
], function(
Map, Locator,
SpatialReference, Graphic,
SimpleLineSymbol, SimpleMarkerSymbol,
Font, TextSymbol,
Point, Extent,
webMercatorUtils,
arrayUtils, Color,
number, parser, dom, JSON, registry
) {
parser.parse();
map = new Map("map",{
basemap: "topo-vector",
center: [-96.311, 43.676],
zoom: 3
});
locator = new Locator("https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer");
registry.byId("locate").on("click", locate);
//Draw and zoom to the result when the geocoding is complete
locator.on("address-to-locations-complete", function(evt) {
map.graphics.clear();
arrayUtils.forEach(evt.addresses, function(geocodeResult, index) {
//create a random color for the text and marker symbol
var r = Math.floor(Math.random() * 250);
var g = Math.floor(Math.random() * 100);
var b = Math.floor(Math.random() * 100);
var symbol = new SimpleMarkerSymbol(
SimpleMarkerSymbol.STYLE_CIRCLE,
20,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([r, g, b, 0.5]),
10
), new Color([r, g, b, 0.9]));
var pointMeters = webMercatorUtils.geographicToWebMercator(geocodeResult.location);
var locationGraphic = new Graphic(pointMeters, symbol);
var font = new Font().setSize("12pt").setWeight(Font.WEIGHT_BOLD);
var textSymbol = new TextSymbol(
(index + 1) + ".) " + geocodeResult.address,
font,
new Color([r, g, b, 0.8])
).setOffset(5, 15);
//add the location graphic and text with the address to the map
map.graphics.add(locationGraphic);
map.graphics.add(new Graphic(pointMeters, textSymbol));
});
var ptAttr = evt.addresses[0].attributes;
var minx = parseFloat(ptAttr.Xmin);
var maxx = parseFloat(ptAttr.Xmax);
var miny = parseFloat(ptAttr.Ymin);
var maxy = parseFloat(ptAttr.Ymax);
var esriExtent = new Extent(minx, miny, maxx, maxy, new SpatialReference({wkid:4326}));
map.setExtent(webMercatorUtils.geographicToWebMercator(esriExtent));
showResults(evt.addresses);
});
map.on("extent-change", updateExtent);
function updateExtent() {
dom.byId("currentextent").innerHTML = "<b>Current Extent JSON:</b> " + JSON.stringify(map.extent.toJson());
dom.byId("currentextent").innerHTML += "<br/><b>Current Zoom level:</b> " + map.getLevel();
}
function showResults(results) {
var rdiv = dom.byId("resultsdiv");
rdiv.innerHTML = "<p><b>Results : " + results.length + "</b></p>";
var content = [];
arrayUtils.forEach(results, function(result, index) {
var x = result.location.x.toFixed(5);
var y = result.location.y.toFixed(5);
content.push("<fieldset>");
content.push("<legend><b>" + (index + 1) + ". " + result.address + "</b></legend>");
content.push("<i>Score:</i> " + result.score);
content.push("<br/>");
content.push("<i>Address Found In</i> : " + result.address);
content.push("<br/><br/>");
content.push("Latitude (y): " + y);
content.push(" ");
content.push("Longitude (x): " + x);
content.push("<br/><br/>");
content.push("<b>GeoRSS-Simple</b><br/>");
content.push("<georss:point>" + y + " " + x + "</georss:point>");
content.push("<br/><br/>");
content.push("<b>GeoRSS-GML</b><br/>");
content.push("<georss:where><gml:Point><gml:pos>" + y + " " + x + "</gml:pos><gml:Point></georss:where>");
content.push("<br/><br/>");
content.push("<b>Esri JSON</b><br/>");
content.push("<b>WGS:</b> " + JSON.stringify(result.location.toJson()));
content.push("<br/>");
var location_wm = webMercatorUtils.geographicToWebMercator(result.location);
content.push("<b>WM:</b> " + JSON.stringify(location_wm.toJson()));
content.push("<br/><br/>");
content.push("<b>Geo JSON</b><br/>");
content.push('"geometry": {"type": "Point", "coordinates": [' + y + ',' + x + ']}');
content.push("<br/><br/>");
content.push("<input type='button' value='Center At Address' onclick='zoomTo(" + y + "," + x + ")'/>");
content.push("</fieldset>");
});
rdiv.innerHTML += content.join("");
}
//Perform the geocode. This function runs when the "Locate" button is pushed.
function locate() {
var address = {
SingleLine: dom.byId("address").value
};
var options = {
address: address,
outFields: ["*"]
};
//optionally return the out fields if you need to calculate the extent of the geocoded point
locator.addressToLocations(options);
}
});
function zoomTo(lat, lon) {
require([
"esri/geometry/Point", "esri/geometry/webMercatorUtils"
], function(Point, webMercatorUtils) {
var point = new Point(lon, lat, {
wkid: "4326"
});
var wmpoint = webMercatorUtils.geographicToWebMercator(point);
map.centerAt(wmpoint);
});
}
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="gutters:false, design:'sidebar'"
style="width:100%;height:100%;">
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'">
</div>
<div id="footerPane"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'bottom'">
<div>Address :
<input type="text" id="address" size="60" value="380 New York St, Redlands, CA, 92373"/>
<button id="locate" data-dojo-type="dijit/form/Button">Locate</button>
</div>
<div id="currentextent"></div>
<div id="resultsdiv"></div>
</div>
</div>
</body>
</html>