How do I pass an address into my javascript API map using URL parameters?

[GeorgeHaskett]

I am using the latest version of the ESRI JavaScript API to build a basemap template.

What I would like to do is pass an address parameter into my map so that when it opens the map is zoomed into the address in question.  I am currently doing this with the Viewer for Flex using the following code:

Viewer for Flex: (link not active)     http://myserver.com/flexviewers/actmap/index.html?search=15 Fordham St, Pocatello, Idaho

I came across this example for ArcGIS Online:

     http://www.arcgis.com/home/webmap/viewer.html?find=380 new york st,redlands,ca

How do I do this with the JavaScript API for ESRI ArcGIS?

Do I need to define parameters within the code or can I simply pass URL parameters to the map like in the above examples to the geocode or locator widgets?

Thanks in advance,

[ReneRubalcava]

The easiest way would be to use the esri/urlUtils module to turn URL parameters into an object. This should do all the heavy lifting for you.

I'm sure in there some where it utilizes dojo/io-query to parse the URL given document.location.search

[GeorgeHaskett]

Okay, so looking at the code example I beginning to see how I could do this for an attribute search, but what about an address search?

The sample code shows the url hardcoded.  How do I type it so that it knows to automatically grab the URL string that is typed into web browser?

The sample code:

    var myObject = esri.urlToObject(http://www.myworld.com?state_name=Ohio&city_name=Akron);

I'm thinking that I would add this code, but modified somehow to capture the original URL string, then pas the myObject variable to either the Locator or Geocode widget.  Does this sound correct or am I making it more difficult than it needs to be?

Or, if I typed the following into the web browser:

    http://www.myworld.com?search=123 Main St, Pocatello, Idaho

would this be automatically passed to the search/geocode widget like it was in the Flex Viewer  because of the 'search=' text or do I need a different term instead of 'search=' ?

Or do I need to manually write code to pass the 'search=' variable to the geocode widget within the javascript doc?

I miss the well documented Flex Viewer website...

Thanks again for your assistance.

[ReneRubalcava]

Yeah, you'll need to wire up the code yourself to pull the URL parameters and do the address searching. This works similar to how you might use dojo/router, which I wrote about here.

The steps would be:

1. Wait fo the map to load
2. Check for URL parameters
3. If parameters for address search provided, send address to Geocoder widget

Hope that helps.

[GeorgeHaskett]

Rene,

I'm fairly new to JavaScript.  I had been customizing the Flex Viewer in the past by tweaking the xml files.  However now I am needing to make the transition to JavaScript API.

While the gist of what you are saying is starting to come together I am struggling to figure out exactly what to write and were to place it.

Can I send you my current code or post it and get some more in-depth advice on what to write and were to place it?

Thanks,

[ReneRubalcava · Accepted solution]

Here is how you might do it.

// assume URL looks like http://myserver.com/flexviewers/actmap/index.html?address=15 Fordham St, Pocatello, Idaho
// wait for map to load
map.on("load", function() {
  // get the URL parameters
  var params = urlUtils.urlToObject(document.location.href);
  // check that parameters exist in the URL
  if (params.query && params.query.address) {
    var address = params.query.address;
    map.graphics.clear();
    // build address params
    var addressParams = {
      "SingleLine": params.query.address
    };
    locator.outSpatialReference = map.spatialReference;
    var options = {
      address: addressParams,
      outFields: ["Loc_name"]
    };
    // send to locator
    locator.addressToLocations(options);
  }
});

Here is a JSBin where I just edited an Esri example on how to geocode an address.

JS Bin - Collaborative JavaScript Debugging

Unfortunately due to the way JSBin and even JSFiddle run JS apps, I don't think you can grab the parent browsers URL, but that could should work in a standalone application.

Hope that helps

[LisCollins]

@odoe

Any suggestions on how to pass an address in URL parameter to zoom to in one of ESRI's web map JavaScript templates? (Such as the public information template: Esri/public-information-map-template-js · GitHub )

Within the public information template, the code would have to be saved in the main.js.

Since I can't add the above code into the index.html, how can I modify the code above to work in a javascript page? I get an error when I add "map.on("load", function() { " to main.js.

[ReneRubalcava]

In that case, you could do it in the _init method of main.js

At this point, the map is already loaded as other components are loading, so maybe near the end of _init, do the steps to get the URL parameters and do the geocoding.

[LisCollins]

@Rene Rubalcava I'm still getting errors with some of the variables such as the map being undefined and errors with locator.addresstoLocations(options) saying TypeError: x.toJson is not a function. Any tips?

[ReneRubalcava]

I hadn't used a template app in a while, so I forked it and added the address parameters via URL for my version.

odoe/public-information-map-template-js · GitHub

The only changes I made were in the main.js file. I added the esri/urlUtils modules.

define([
    ...
    "esri/urlUtils"
],
function(
    ...
    urlUtils
) {
...

Then I added this at the end of the _init method, after this drawer.resize() call.

_init: function() {
  ...
  this._drawer.resize();
  // MODIFICATIONS
  // check URL for address search params
  var params = urlUtils.urlToObject(document.location.href);
  if (params.query && params.query.address) {
    var address = params.query.address;
    // You could also set the value of the geocoder input box
    // or just set the value, your preference
    //this._geocoder.inputNode.value = address;
    this._geocoder.value = address;
    this._geocoder.find().then(lang.hitch(this, function(response) {
      if (response.results.length) {
        this._geocoder.select(response.results[0]);
      }
    }));
  }
}

There is also a _modileGeocoder that gets built during this whole process, but I didn't bother using that one. It would work similar if you wanted it to work with the mobile version.

Also of note, what I thought was odd behavior. The find method of the geocoder does not zoom to the first result, you have to manually do that with select(result) after running find.