nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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,

Najděte více příspěvků označených jako

Accepted answers

RRubalcava

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

All comments

GeorgeHaskett

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

RRubalcava

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!

OwenEarley

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.

RRubalcava

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

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,

RRubalcava

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.

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.

RRubalcava

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

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.