Trying to Use Custom Address Locator in ArcGIS Online Application

ChrisSergent · ‎08-12-2014

Here is the code that we have with our address locator. What do we need to do to get it to work?

<!DOCTYPE html>

<html>

<head>

<!--[if IE 8]>

<![endif]-->

</head>

</div>

</div>

</div>

</div>

</div>

</div>

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));

var dojoConfig = {

// The locationPath logic below may look confusing but all its doing is

// enabling us to load the api from a CDN and load local modules from the correct location.

packages : [{

name : "application",

location : package_path + '/js'

}, {

name : "config",

location : package_path + '/config'

}]

};

</script>

require(["application/template", "application/main"], function(Template, Main) {

// create the template. This will take care of all the logic required for template applications

var myTemplate = new Template();

var myApp = new Main();

myTemplate.startup().then(function(config) {

myApp.startup(config);

}, function(error) {

// something went wrong. Let's report it.

myApp.reportError(error);

});

</script>

var map;

var locatorUrl = "http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer";

var myGeocoders = [{

url: locatorUrl,

singleLineFieldName: "SingleLine",

}];

geocoder = new Geocoder({

map: map,

autoComplete: true,

arcgisGeocoder: false,

geocoders: myGeocoders

},"search");

geocoder.startup();

</script>

</body>

</html>

KellyHutchins · ‎08-12-2014

If you aren't using the Esri world geocoder and your custom locator then auto complete won't be enabled. To enable it edit the main.js file and at approximately line 301 you'll see code like this:

var options = {

map: this.map,

autoNavigate: false,

theme: "simpleGeocoder",

autoComplete:hasEsri

}

Modify the line with autoComplete: hasEsri to be autoComplete: true

View solution in original post

RobertScheitlin__GISP · ‎08-12-2014

Chris,

Your locator service has the single field name of "Single Line Input" and your code has it as "SingleLine" right now.

RobertScheitlin__GISP · ‎08-12-2014

Chris,

Sorry I did not notice all the other issues in your code...

Here is a sample using your geocode service:

<!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>Geocoder Widget</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height:100%;
        width:100%;
        margin:0;
        padding:0;
      }
      body {
        background-color:#FFF;
        overflow:hidden;
        font-family:"Trebuchet MS";
      }
      #search {
        display: block;
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 75px;
      } 
    </style>

    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      var map;
      var geocoder;
      var locatorUrl = "http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer";
      require([
        "esri/map", "esri/dijit/Geocoder", "dojo/domReady!"
      ], function(
        Map, Geocoder
      ) {
        map = new Map("map",{
          basemap: "topo",
          center: [-117.19,34.05], // lon, lat
          zoom: 13
        });
        
        var myGeocoders = [{
          url: locatorUrl,
          name: "Enter Address",
          singleLineFieldName: "Single Line Input",
          outfields: "*"

        }];
        geocoder = new Geocoder({
          map: map,
          autoComplete: true,
          arcgisGeocoder: false,
          geocoders: myGeocoders
        },"search");
        geocoder.startup();
      });
    </script>
  </head>
  <body>
    <div id="search"></div>
    <div id="map"></div>
  </body>
</html>

ChrisSergent · ‎08-12-2014

I posted the wrong code, but posted an update.

KyleBelott · ‎08-12-2014

Chris,

Should your geocoder DOMNode parameter be "panelSearch" or "panelGeocoder" instead of "search"?

ChrisSergent · ‎08-12-2014

I posted the wrong code but I posted an update.

RobertScheitlin__GISP · ‎08-12-2014

Chris,

You still have the same issue with not having all the options provided in your myGeocoders object.

     var myGeocoders = [{
        url: locatorUrl,
        name: "Enter Address",
        singleLineFieldName: "Single Line Input",
        outfields: "*"
      }];

But the fact that I can not take your code and run it without significant error, does not allow me to debug it very well. Maybe you can provide the styles.css and any significant /js files.

ChrisSergent · ‎08-12-2014

This actually should have been the code that is not working:

<!DOCTYPE html>

<html>

<head>

<!--[if IE 8]>

<![endif]-->

</head>

</div>

</div>

</div>

</div>

</div>

</div>

var package_path = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/'));

var dojoConfig = {

// The locationPath logic below may look confusing but all its doing is

// enabling us to load the api from a CDN and load local modules from the correct location.

packages : [{

name : "application",

location : package_path + '/js'

}, {

name : "config",

location : package_path + '/config'

}]

};

</script>

require(["application/template", "application/main"], function(Template, Main) {

// create the template. This will take care of all the logic required for template applications

var myTemplate = new Template();

var myApp = new Main();

myTemplate.startup().then(function(config) {

myApp.startup(config);

}, function(error) {

// something went wrong. Let's report it.

myApp.reportError(error);

});

</script>

var map;

var geocoder;

var locatorUrl = "http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer";

require([

"esri/map", "esri/dijit/Geocoder", "dojo/domReady!"

], function(

Map, Geocoder

) {

map = new Map("mapDiv",{

basemap: "topo",

center: [-117.19,34.05], // lon, lat

zoom: 13

});

var myGeocoders = [{

url: locatorUrl,

}];

geocoder = new Geocoder({

map: map,

autoComplete: true,

arcgisGeocoder: false,

geocoders: myGeocoders,

value: "146317"

},"search");

geocoder.startup();

});

</script>

</body>

</html>

KellyHutchins · ‎08-12-2014

Looks like you are using code from one of the Online templates - I think maybe Panels? If so then you shouldn't have to add the locator its already included in the application. If you want to update the template to use your locator you'll need to edit the commonConfig.js file to add your locator info. You'll also want to set queryForOrg to false. Here's an example of an updated config file:

define(

[],

function() {

var config = {

bingMapsKey:"",

units: null,

helperServices: {

geometry:{

url: location.protocol + "//utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"

},

printTask: {

url: location.protocol + "//utility.arcgisonline.com/arcgis/rest/services/Utilities/PrintingTools/GPServer/Export%20Web%20Map%20Task"

},

elevationSync:{

url: location.protocol + "//elevation.arcgis.com/arcgis/rest/services/Tools/ElevationSync/GPServer"

},

geocode: [{

url: location.protocol + "//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"

},{

url: "http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer",

singleLineFieldName: "Single Line Input",

placefinding:true

}]

},

queryForOrg: false

};

// could use a has() test to optionally populate some global

// property so that the stuff defined is in some global identifier

//

// instead, just populate a global, will need to remove the next line when

// when we remove support for loading modules with dojo.require

// which will be when we move to Dojo 2.0

commonConfig = config;

// instead of using a global, this should probably be added to some namespace...

// do the templates have a common namespace that they use?

return config;

});

ChrisSergent · ‎08-12-2014

Kelly,

That works, but the autocomplete does not. I thought I would need to add a block for a new Geocoder, but that does not seem to be working.

Here is my modified commonConfig.js file. Do you know what I need to do?

define(

[],

function() {

var config = {

bingMapsKey:"",

units: null,

helperServices: {

geometry:{

url: location.protocol + "//maps.decaturil.gov/arcgis/rest/services/Utilities/Geometry/GeometryServer"

},

printTask: ,

elevationSync:,

geocode: []

},

queryForOrg: false

};

// could use a has() test to optionally populate some global

// property so that the stuff defined is in some global identifier

//

// instead, just populate a global, will need to remove the next line when

// when we remove support for loading modules with dojo.require

// which will be when we move to Dojo 2.0

commonConfig = config;

// instead of using a global, this should probably be added to some namespace...

// do the templates have a common namespace that they use?

return config;

});