Select to view content in your preferred language

Address Locator - what am I doing wrong?

2212
12
10-12-2011 06:55 AM
MatthewGerbrandt
Emerging Contributor
Hello there.  I've got an Address Locator set up and it seems to be working.  When I go to the service properties and enter the address "202 Birch Loop", it returns results as expected:

http://restdata.umatilla.nsn.us/ArcGIS/rest/services/CTUIRAddressLocator/GeocodeServer/findAddressCa...

Using code from the JS Samples (http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jssamples_start.htm#jssa...), I tried to create a web page.  Unfortunately, when I click the button to execute the search and return results to my map, nothing happens. 

If someone could please look at my code and tell me what I'm doing wrong, I'd really, really appreciate it.

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



Thank you very, very much in advance for your time and expertise!
0 Kudos
12 Replies
derekswingley1
Deactivated User
Try with the latest version of the API:  http://help.arcgis.com/en/webapi/javascript/arcgis/index.html

Let us know if you have any luck using v2.5 and this sample as a template:  http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples/locator_address.html
0 Kudos
MatthewGerbrandt
Emerging Contributor
Thanks for the heads-up, Derek.  I've re-created the web page using the latest API but I'm having the same problem as before - no errors, no results. 

The problem may be in the follow assignment:

geom = candidate.location;

My service has no "location" attribute.  Then again, I couldn't find one in the ESRI sample, either.  I'm totally mystified here, folks.  All help is greatly appreciated.

Here's my modified version of the sample code and I've tried to bold all of the changes I made:

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


0 Kudos
derekswingley1
Deactivated User
What are you using to debug your app?

I prefer a mix of firefox+firebug and chrome (with its built-in dev tools).

If I take a look at the network section of Chrome dev tools, I see this request being sent when the "Locate" button is clicked:  http://restdata.umatilla.nsn.us/ArcGIS/rest/services/CTUIRAddressLocator/GeocodeServer/findAddressCa...{%22wkid%22%3A102100}&callback=dojo.io.script.jsonp_dojoIoScript2._jsonpCallback

So...the street parameter is missing.

Change this:
var Street = { "SingleLine": dojo.byId("address").value };


To this:
var Street = { "Street": dojo.byId("address").value };
0 Kudos
derekswingley1
Deactivated User
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);
0 Kudos
HemingZhu
Frequent Contributor
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);


I remembered a while ago there is similiar issue with locator. 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.
0 Kudos
derekswingley1
Deactivated User
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".
0 Kudos
HemingZhu
Frequent Contributor
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".


I would not say JSON and Javascript Object is the same thing. JSON is subset of the Object (it only specifies properties not the methods, you can say JSON is Object, not the way around). The reason i answer this poster is that me and someone else had the similiar issues before http://forums.arcgis.com/threads/23457-Geocoding-Service-Not-returning-Candidates-to-quot-Applicatio... . Using new Object() is the solution i found. Since Javascript is dynamic, weakly typed script language, so specifing new object let Javascript runtime deal with it. Quite frankly it works great for me dealing with all the JSON input and do not have to warry about the formats such as single quote or double quotes and orders (like in geoprocessing parameters).
0 Kudos
derekswingley1
Deactivated User
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.
0 Kudos
HemingZhu
Frequent Contributor
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.


Me and someone else had the same issue before. I am pretty sure the problem was not the property names and it is the syntax that i used that made the difference. Obviously there is something that did not produce the same result. If ESRI really wants to help guys that post the problems and seek help,  should tackle the issue (such as var Street = { "Single Line Input": dojo.byId("address").value};  -why it doesn't work). I think 22 years of education plus 12 years of programming definitely help me understand the difference between JSON data object and Javascript Object.
0 Kudos