<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>Find Address</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.tasks.locator");
var map, locator;
function init() {
map = new esri.Map("map", { extent: new esri.geometry.Extent(358704.7747, 5019963.41681, 400356.3737, 5074307.67359, new esri.SpatialReference({ wkid: 26911 }))
});
var BoundaryLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://restdata.umatilla.nsn.us/ArcGIS/rest/services/ReservationBoundary/MapServer");
map.addLayer(BoundaryLayer);
locator = new esri.tasks.Locator("http://restdata.umatilla.nsn.us/ArcGIS/rest/services/CTUIRAddressLocator/GeocodeServer");
dojo.connect(locator, "onAddressToLocationsComplete", showResults);
}
function locate() {
map.graphics.clear();
// this service was published using ArcGIS Server 10, so the following format should work...
var StreetName = { "SingleLine": "202 Birch Loop" };
locator.addressToLocations(StreetName);
}
function showResults(candidates) {
var candidate;
var symbol = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");
symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND);
symbol.setColor(new dojo.Color([255, 0, 0, 0.75]));
var points = new esri.geometry.Multipoint(map.spatialReference);
for (var i = 0, il = candidates.length; i < il; i++) {
candidate = candidates;
if (candidate.score > 70) {
var attributes = { address: candidate.StreetName, score: candidate.score, locatorName: candidate.attributes.StreetName };
var graphic = new esri.Graphic(candidate.location, symbol, attributes, infoTemplate);
map.graphics.add(graphic);
map.graphics.add(new esri.Graphic(candidate.location, new esri.symbol.TextSymbol(attributes.address).setOffset(0, 8)));
points.addPoint(candidate.location);
}
}
map.setExtent(points.getExtent().expand(3));
}
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
Address : <input type="text" id="address" size="60" value="202 Birch Loop" />
<input type="button" value="Locate" onclick="locate()" /><br /><label id="label1" title="asdf" />
<br />
<div id="map" style="width:1200px; height:600px; border:1px solid #000;"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!--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" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
#map{
padding:0;
border:solid 1px #343642;
margin:5px 5px 5px 0px;
}
.roundedCorners{
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.shadow{
box-shadow: 4px 4px 8px #adadad;
-webkit-box-shadow: 4px 4px 8px #adadad;
-moz-box-shadow: 4px 4px 8px #adadad;
-o-box-shadow: 4px 4px 8px #adadad;
}
#leftPane{
width:20%;
border-top: solid 1px #343642;
border-left: solid 1px #343642;
border-bottom: solid 1px #343642;
background-color:#DCDAC5;
margin:5px 0px 5px 5px;
color: #343642;
font:100% Georgia,"Times New Roman",Times,serif;
letter-spacing: 0.05em;
}
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.tasks.locator");
dojo.require("dojo.number");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
var map, locator;
function init() {
var initExtent = new esri.geometry.Extent({ "xmin": -13343554, "ymin": 2967656, "xmax": -7473190, "ymax": 5902838, "spatialReference": { "wkid": 102100} });
map = new esri.Map("map", { extent: initExtent });
var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(tiledMapServiceLayer);
dojo.connect(map, 'onLoad', function(map) {
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
});
locator = new esri.tasks.Locator("http://restdata.umatilla.nsn.us/ArcGIS/rest/services/CTUIRAddressLocator/GeocodeServer");
dojo.connect(locator, "onAddressToLocationsComplete", showResults);
map.infoWindow.resize(200, 125);
}
function locate() {
map.graphics.clear();
var Street = { "SingleLine": dojo.byId("address").value };
locator.outSpatialReference = map.spatialReference;
locator.addressToLocations(Street);
}
function showResults(candidates) {
var candidate;
var symbol = new esri.symbol.SimpleMarkerSymbol();
var infoTemplate = new esri.InfoTemplate("Location", "Address: ${address}<br />Score: ${score}<br />Source locator: ${locatorName}");
symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setColor(new dojo.Color([153, 0, 51, 0.75]));
var geom;
dojo.every(candidates, function(candidate) {
console.log(candidate.score);
if (candidate.score > 80) {
console.log(candidate.location);
var attributes = { address: candidate.Street, score: candidate.score, locatorName: candidate.attributes.Street };
geom = candidate.location; // this may be my problem
var graphic = new esri.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.Street;
var font = new esri.symbol.Font("16pt", esri.symbol.Font.STYLE_NORMAL, esri.symbol.Font.VARIANT_NORMAL, esri.symbol.Font.WEIGHT_BOLD, "Helvetica");
var textSymbol = new esri.symbol.TextSymbol(displayText, font, new dojo.Color("#666633"));
textSymbol.setOffset(0, 8);
map.graphics.add(new esri.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);
}
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="sidebar" gutters="false" style="width:100%; height:100%;">
<div id="leftPane" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="left">
Enter an address:
<br />
<textarea type="text" id="address"/>202 Birch Loop</textArea>
<br />
<button dojotype="dijit.form.Button" onclick="locate()"> Locate</button>
</div>
<div id="map" class="roundedCorners shadow" dojotype="dijit.layout.ContentPane" region="center">
</div>
</div>
</body>
</html>
var Street = { "SingleLine": dojo.byId("address").value };
var Street = { "Street": dojo.byId("address").value };
dojo.connect(locator, "onError", errorHandler);
Also, for future debugging, it's a good idea to pass an errBack function when calling addressToLocations or connect to your locator's onError event to log events(this applies to all tasks in the JS API). Something like this:dojo.connect(locator, "onError", errorHandler);
The solution will be use javascript Object instead of JSON to specify your address parameter. It's more consistent.
Replace your statement var Street = { "SingleLine": dojo.byId("address").value }; with these:
var Street =new Object();
Street.Street =dojo.byId("address").value;
I am pretty sure it will work.
Heming- those two produce the same thing, it's just two different syntactical styles. After all, JSON stands for JavaScript Object Notation. Explicitly creating an object via new Object() or with object literal notation will produce the same thing.
In the case of gis_tech's code, the problem was the name of the property being specified. The locator expected "Streets" and the code was using "SingleLine".
True, JSON is a subset of object literal notation. But functionally, using a JSON object or creating an object via the new keyword will produce the same result. JSON does have more constraints but in the specific case outlined by gis_tech, the problem was the property name, not the syntax used to create the object.