topic URL Parameters in ArcGIS JavaScript Maps SDK Questions

URL Parameters

AndyBurns — Thu, 27 May 2010 14:32:11 GMT

Hi All

Does anyone have any documentation or any ideas about what URL parameters we can pass to the javascript API?

thanks

Re: URL Parameters

derekswingley1 — Thu, 27 May 2010 17:34:39 GMT

This is pretty vague...what do you want to do? The JS API doesn't really handle URL parameters but the REST API does.

Re: URL Parameters

AndyBurns — Fri, 28 May 2010 09:53:46 GMT

A user can search for a address in a application and once a address is selected from a list etc it will fire up the mapping application created by the API and zoom to the relevant x/y co ords on the map.

If you know of any documentation to help, please let me know.

thanks

Re: URL Parameters

derekswingley1 — Fri, 28 May 2010 15:31:20 GMT

I don't think there's any native functionality in the API to help you here. But this wouldn't be too hard to do yourself. Check out window.location and dojo.queryToObject.

Re: URL Parameters

BrettLord-Castillo — Sat, 11 Dec 2021 19:34:40 GMT

There is no native functionality. Here's how I did it for our page. I'll step through with comments the basic functionality for zooming to a passed extent.
What is not in this code, is that I have a widget that, when loaded, checks to see if there is a value for urlargs.xa. If there is, then it geocodes that value and uses that result to zoom and center the map.
This should get you up and running with url arguments in general though
Notice that buildUrl has references to a lot of widgets not discussed here. This should give you a general idea of how to pattern your widgets for url arguments.

function buildUrl() { //This function constructs a url argument to use when passing shared urls. var mext, dfrom, dto, ll, ur, xa, xg, xf, xt, ct;
 mext = dijit.byId("map").getMap().extent;
 dfrom = dijit.byId("dateFrom").value;
 dto = dijit.byId("dateTo").value;
 ll = "" + mext.xmin + "," + mext.ymin;
 ur = "" + mext.xmax + "," + mext.ymax;
 xa = dijit.byId("sp").searchaddress;
 xg = dijit.byId("gmSelectAreas").value;
 xf = "" + (1 + dfrom.getMonth()) + "+" + dfrom.getDate() + "+" + dfrom.getFullYear();
 xt = "" + (1 + dto.getMonth()) + "+" + dto.getDate() + "+" + dto.getFullYear();
 ct = dojo.cookie("ct");
 //return window.location.protocol + "//" + window.location.host + window.location.pathname + "?" + dojox.encoding.crypto.Blowfish.encrypt("ll=" + ll + "&ur=" + ur + ((xa) ? "&xa=" : "") + xa + ((xg) ? "&xg=" : "") + xg + "&xf=" + xf + "&xt=" + xt + "&ct=" + ct, "slcpd");
 return window.location.protocol + "//" + window.location.host + window.location.pathname + "?ll=" + ll + "&ur=" + ur + ((xa) ? "&xa=" : "") + xa + ((xg) ? "&xg=" : "") + xg + "&xf=" + xf + "&xt=" + xt + "&ct=" + ct;
}

function getValuesFromURL(name,urlstring)
{ //Utility function for finding a url argument in a url. See how it is used below.
    //Use RegExp to clean up the URL and to search for the given parameter
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regexS = "[\\?&]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec(urlstring);
    if (results === null) {
        return "";
    } else {
        return (results[1]);
    }
}
//In body of main code for page
  var sstring = window.location.search;
  urlargs = {
   ll: dojo.map(getValuesFromURL("ll", sstring).split("%2c"),function(x) { return parseFloat(x);},this), //Lower left
   ur: dojo.map(getValuesFromURL("ur", sstring).split("%2c"),function(x) { return parseFloat(x);},this), //Upper right
   xa: getValuesFromURL("xa", sstring).split("+").join(" "), //Search Address
   xg: getValuesFromURL("xg", sstring), //geokey to a specific location
   xf: new Date(Date.parse(getValuesFromURL("xf", sstring).split("+").join(" "))), //Date from
   xt: new Date(Date.parse(getValuesFromURL("xt", sstring).split("+").join(" "))), //Date to
   xs: getValuesFromURL("xs", sstring), //Sort by
   xk: getValuesFromURL("xk", sstring),  //Skin
   ct: getValuesFromURL("ct", sstring) //Crime Types
  };
  urlargs.xf = (urlargs.xf > 0) ? urlargs.xf : "";
  urlargs.xt = (urlargs.xt > 0) ? urlargs.xt : "";

//This part is wrapped in a large try...catch because bad arguments can throw errors
   if (urlargs.xs) {
    dojo.cookie("xs", urlargs.xs);   
   }

//Then still yet farther down, when I am creating the map object
   options = {
    extent: urlargs.urlextent || urlargs.initextent
    //There is more, but that is the key part for extent
   };
//And then I pass that options object as the 2nd argument when creating the map


   if (urlargs.ll[0] && urlargs.ll[1] && urlargs.ur[0] && urlargs.ur[1]) {
    urlargs.urlextent = new esri.geometry.Extent({
     "xmin": urlargs.ll[0],
     "ymin": urlargs.ll[1],
     "xmax": urlargs.ur[0],
     "ymax": urlargs.ur[1],
     "spatialReference": {
      "wkid": 102113
     }
    });
   } else {
    urlargs.initextent = new esri.geometry.Extent({
     "xmin": -10137766.624432003,
     "ymin": 4628644.247807602,
     "xmax": -9998498.358896358,
     "ymax": 4711960.608638476,
     "spatialReference": {
      "wkid": 102113
     }
    });
   }

Re: URL Parameters

BernieConnors — Wed, 29 Sep 2010 11:11:16 GMT

In my humble opinion ESRI should add functionality to each of the APIs (JavaScript, Flex, and SilverLight) so that url parameters can be handled in the same away for each API. If you agree you can promote this idea:

http://ideas.arcgis.com/ideaView?id=087300000008F4Y&returnUrl=%2Fapex%2FideaList%3Fc%3D09a300000004xET%26category%3DWeb%2BApps%2Band%2BAPIs

Thanks,
Bernie.

Re: URL Parameters

AxelSchaefer — Fri, 01 Oct 2010 07:09:17 GMT

This has been described more than 2 years ago in the "Pass Map Extent Parameters from one page to another in Javascript API" example at the Resources Gateway: http://resources.esri.com/arcgisserver/apis/javascript/arcgis/index.cfm?fa=codeGalleryDetails&scriptID=15672

Normally, URL parameters should be handled by a server component, not a client component. JS Apis in general are client components. The only server component for the JS API client is the webserver URL to download the API. Later you may access several GIS application servers but that's out of scope of the general architecture of a JS API client.

In the last years of internet protocols and usage there was a common idea that URL parameters are handled in the backend of a server component, maybe ASPX, JAVA, PHP, Perl or some other environment. The URL parameters are parsed, processed and the result passed back to the client.

JavaScript clients running in a webbrowser don't have a similar concept for handling URL parameters except doing it the JavaScript way: accessing it over the DOM and windows.location.href. That's all. Go up the DOM until you are at the browser location bar and grab the text in it. In theory you even don't have to write a '?' and '&' signs. You can type anything behind that because the way JS accesses it is not depending on a protocol definition. Although the hosting webserver of the JS app would be irritated and that's the only reason to adapt this HTTP concept.

Best regards.
Axel

Re: URL Parameters

GlenRhea — Sat, 11 Dec 2021 19:34:43 GMT

I think the parent was talking about parsing URL parameters in the browser, yall are making too much of it. Here is the function I use:

function getUrlParam(name, url) { // optionally pass an URL to parse
 if (!url) url = window.location.href;        // if no parameter url is given, use the page URL
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");   // instruction needed if we want to extract an array
 var results = new RegExp("[\\?&]"+name+"=([^&#]*)").exec(url);
 if( results == null ) 
  return null;         // if the name is not found, return null
 else // decodeURIComponent doesn't recognize '+' as encoding for space
  return decodeURIComponent(results[1].replace(/\+/g," ")); 
}

Which I got from here:
http://www.netlobo.com/comments/url_query_string_javascript (about half way down, search for "gup")

It is more flexible that the one I wrote and most of the ones I've found on the net, you can use it to check for params, assign them, encode a URL within the app and it handles spaces or (+) better.

Re: URL Parameters

JohnGrayson — Sat, 11 Dec 2021 19:34:45 GMT

Since this functionality is application specific, here's one example of how I've done it before:

  
  var urlObject = esri.urlToObject(document.location.href);
  if (urlObject.query) {
    if (urlObject.query.lon && urlObject.query.lat) {
      var lon = parseFloat(urlObject.query.lon);
      var lat = parseFloat(urlObject.query.lat);
      var initialLocation = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lon, lat, new esri.SpatialReference({
        wkid: 4326
      })));
      map.centerAndZoom(initialLocation, 14);
    }
  }

Re: URL Parameters

RajasekharReddyMayaluru — Sat, 11 Dec 2021 19:34:48 GMT

Hi Grayson,

I'm new to this API, I'm trying to integrate with Arc GIS with my web application .

Can you please send me full example (with some URL with static values),So that i can customize it.

I'm looking for an example to locate a point using Arc GIS javascript API to pass lat/lng as input .

Thanks,
Rajasekhar

Since this functionality is application specific, here's one example of how I've done it before:

  
  var urlObject = esri.urlToObject(document.location.href);
  if (urlObject.query) {
    if (urlObject.query.lon && urlObject.query.lat) {
      var lon = parseFloat(urlObject.query.lon);
      var lat = parseFloat(urlObject.query.lat);
      var initialLocation = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lon, lat, new esri.SpatialReference({
        wkid: 4326
      })));
      map.centerAndZoom(initialLocation, 14);
    }
  }

Re: URL Parameters

MichaelOlkin — Mon, 23 Jan 2012 13:21:49 GMT

I've been interested for quite some time in being able to use url parameters to select & zoom to features by using the parameters in attribute queries. It's disappointing that this basic function is still not included among the ArcGIS API for Javascript code samples. I've gone ahead & developed my own code sample, which I've posted to ArcGIS.com here: http://www.arcgis.com/home/item.html?id=92ff586d7e934fde9ee62356592f8761

The sample that I posted uses two parameters to select a tax parcel. Clicking a different parcel on the map revises the parameters. The UrlToObject method in the Esri namespace is used to convert the url parameters into variables & the HTML5 Pushstate method is used for updating the parameters when a different parcel is clicked.

I hope that this sample is helpful. All suggestions and comments are welcome.

Michael Olkin
GIS Administrator
Town of Amherst, MA
http://www.amherstma.gov/maps

Re: URL Parameters

KellyHutchins — Mon, 23 Jan 2012 14:36:00 GMT

Nice sample Mike. This is a frequently asked question so we really should have a sample that shows how to do this in the help.

Re: URL Parameters

derekswingley1 — Mon, 23 Jan 2012 15:54:11 GMT

The Specify WebMap via URL sample shows this.

Re: URL Parameters

MichaelOlkin — Tue, 24 Jan 2012 12:04:28 GMT

The Specify WebMap via URL sample shows this.

That's a good sample and it uses a URL parameter, but not to select a feature.

Re: URL Parameters

BulbulMajumder1 — Wed, 23 Dec 2015 16:58:23 GMT

Hi there Can I see how you have been used this code?

Re: URL Parameters

JeffJacobson — Wed, 23 Dec 2015 19:08:00 GMT

I created a module that will update the browser's query string as the map is zoomed, panned, and layers are turned on and off.

WSDOT-GIS/arcgis-query-string-utilities · GitHub

Re: URL Parameters

JordanBaumgardner — Thu, 31 Dec 2015 16:18:47 GMT

lol, Me: Well that's a big flippn question! Gotta see what the answer is ; )

Re: URL Parameters

MichaelVolz — Mon, 11 Jan 2016 17:08:24 GMT

Does this page exist anymore? If not, can anyone tell me where it has been moved to or at least some similar sample code?

Re: URL Parameters

KenBuja — Mon, 11 Jan 2016 17:18:16 GMT

Here's its new address: Web map using url parameters | ArcGIS API for JavaScript

Re: URL Parameters

MichaelVolz — Mon, 11 Jan 2016 17:39:52 GMT

Ken:

According to your reply this sample URL is:

http://developers.arcgis.com/javascript/samples/ags_basic

Does I just add the extents the end of the URL for it to zoom in at start-up like this:

http://developers.arcgis.com/javascript/samples/ags_basic?Extent=-8427510.777,4867167.541,-8425000.479,4869435.962

I got the extents by loading in an ESRI basemap which I thought would be the projection that would work with your sample, but it does not zoom to anything and just shows white space.

Am I using the wrong coordinate system in my test URL?