topic Re: How do I pass an address into my javascript API map using URL parameters? in ArcGIS JavaScript Maps SDK Questions

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

GeorgeHaskett — Wed, 18 Feb 2015 17:38:11 GMT

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,

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

ReneRubalcava — Wed, 18 Feb 2015 17:45:45 GMT

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

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

GeorgeHaskett — Wed, 18 Feb 2015 17:59:17 GMT

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.

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

ReneRubalcava — Wed, 18 Feb 2015 18:32:11 GMT

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:

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

Hope that helps.

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

GeorgeHaskett — Wed, 18 Feb 2015 20:44:23 GMT

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,

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

ReneRubalcava — Sun, 12 Dec 2021 04:38:08 GMT

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

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

OwenEarley — Sun, 12 Dec 2021 04:38:11 GMT

Have a look at the reply by Kelly Hutchins in this question - Re: URL coordinate parameters

You can get the URL parameters using urlToObject:

var urlObject = esri.urlToObject(document.location.href);

// check for a URL query and address parameter
if(urlObject.query && urlObject.query.search){ 
  var addr = urlObject.query.search;
  console.log("Address: ", addr);
}

EDIT - Rene just beat me to it and has the correct approach.

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

LisCollins — Thu, 19 Feb 2015 03:25:18 GMT

@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.

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

ReneRubalcava — Thu, 19 Feb 2015 03:46:40 GMT

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.

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

LisCollins — Thu, 19 Feb 2015 14:18:50 GMT

@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?

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

ReneRubalcava — Sun, 12 Dec 2021 04:38:13 GMT

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.

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

LisCollins — Thu, 19 Feb 2015 15:56:35 GMT

Thanks so much odoe!

It now works!!

I'm just wondering now why it works. Lol. Do you mind explaining what it's doing?

I wonder why this code works vs the one you mention before below:

// 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);

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

ReneRubalcava — Thu, 19 Feb 2015 16:07:44 GMT

That code uses the esri/tasks/locator task to do the address lookup. The Locator task is what powers the Geocoder widget. So in the Geocoder widget (which is on github too) it's doing something very similar to that code.

So it builds address parameters which assume the Geocoder service takes a single line as the address. You set the outSpatialReference so the geocoded results come back in the same spatial reference as the map. And the locator has an addressToLocations method that does the address lookup.

However, the template app already has a Geocoder widget in it, actually it has two for some reason, it also has a mobile it toggles between depending on screen size or device, whatever. So when I saw that, I figured why reinvent the wheel, since you can use the Geocoder find method and select method to get the same result.

Hope that clears it up a bit. Maybe I can do a blog post on this subject too.

Thanks!

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

GeorgeHaskett — Thu, 19 Feb 2015 23:00:27 GMT

Rene,

I'm still struggling with this one. I have modified my map code attempting to follow your examples. I am currently not getting any visual error when the web browser searches for the address, however nothing appears to be happening. I copied my code and pasted it below.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    
    <meta name="viewport"
          content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>PC Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"/>

    </script>
</head>
<body>
    <div id="search"></div>
    <div id="HomeButton"></div>
    <div id="logo"></div>
    <div id="mapDiv"></div>
    <div id="BasemapToggle"></div>
</body>
</html>

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

ReneRubalcava — Thu, 19 Feb 2015 23:16:23 GMT

I think it's this line.

map.popup.resize(200, 75);

I think what you meant was

map.infoWindow.resize(200, 75);

Once I fixed that, I was able to get the load function to work and it zoomed to an address I passed in the URL.

Hope that helps!

Thanks!

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

LisCollins — Fri, 20 Feb 2015 19:35:32 GMT

A blog post would be great! I'm surprised this topic is not talked about more. It seems like most web maps could make use of this functionality.

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

GeorgeHaskett — Fri, 27 Feb 2015 21:50:32 GMT

Rene, oddly enough I finally got it working by removing the line in question.

Once I removed the following line, everything seemed to work correctly.

map.popup.resize(200, 75);