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

URL coordinate parameters

JohnPeabody

I wish to be able to pass coordinate (XY) and zoom parameters via the map URL so that the map will center on the point represented by the coordinate values and zoom to the level passed in the url.

I have not had any luck in finding the code to do this (the one sample supplies a single parameter and searches for the value in a map layer (Parcel ID) which is not very helpful) and would appreciate any guidance that can be provided.

Thanks

John

Find more posts tagged with

Accepted answers

All comments

rscheitlin

Andrew,

Yes Using WAB Developer edition will give you the ability to customize code and do exactly what you are after.

RebeccaStrauch__GISP

I see https://community.esri.com/message/705716-passing-xy-coordinates-in-agol-or-agol-wab-to-outlink-url is a dupe of this conversation. Probably is best to have it as a new conversation, but if Robert (who would be the expert) answers is here, you might just want to delete the other....or include a link to the answer here and mark "assumed answered"

just an fyi, lots of good tips (including in comments) on posting to geonet https://community.esri.com/community/help-and-feedback/blog/2016/08/15/community-news-and-tips-how-to-ask-questions-and-get-answers?sr=search&searchId=8e834fa5-8913-4cb0-8afd-6c872b1ff1d0&searchIndex=0‌

Anonymous User

But using the WAB (not AGOL) I could likely have some event listener to accomplish something of this sort, right? Any insight there?

rscheitlin

Andrew,

Unfortunately in AGOL WAB you do not have access to modify code that would allow you to develop the portion to add a popup link that would append the coordinates to the url of a link. WAB by default does have a center url parameter though:

http://doc.arcgis.com/en/web-appbuilder/manage-apps/app-url-parameters.htm#ESRI_SECTION1_DFA518B2DF5945EFB77D1C925DA2CF76

Anonymous User

Is there a way to accomplish this in AGOL (or AGOL WAB)? The framework is pretty robust...

I want to basically have a user click on a point and the app stores that click's coordinates. Then in the pop-up, there is an out-link <a href></a> that appends the x & y to the end of the URL.

So if a user clicked a point of 100,30 the outlink URL would be http://website.com/index.html?x=100&y=30

Is this possible?

khutchins-esristaff‌

BenCamp

I know this post is going on 3 years old, but thank you! This code works perfectly!

DevonDunham1

Is it possible to use these functions with a webmap?

IanCooke

Thank you for the excellent suggestions. However I still don't have it working, I think because the format of the scripts in my template are so different from the examples you have provided, but at least you have given me some ideas of where to start! Will take the advice above and start a new post.

adrian.marsden_DevonCC

Another example on one of our pages http://maps2.eastdevon.gov.uk/mapping/localplan2013/?x1=311599&y1=87159&x2=312953&y2=88429

Two crucial bits

function gup(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");    var regexS = "[\\?&]" + name + "=([^&#]*)";    var regex = new RegExp(regexS);    var results = regex.exec(window.location.href);    if (results == null)        return "";    else        return results[1]; }

Is the function to handle URL parameters

And


 //check to see if an envelope has been sent (ie four values in x1,x2,y1 & y20    var newExtent = new esri.geometry.Extent();    var xMin = Math.abs(gup('x1'));    var yMin = Math.abs(gup('y1'));    var xMax = Math.abs(gup('x2'));    var yMax = Math.abs(gup('y2'));    var mk, pt, gra;    //check to see if just a point has been sent in x1 & y1    if (Math.abs(gup('y2')) == 0 && (Math.abs(gup('x2')) == 0) && (Math.abs(gup('x1')) > 0) && (Math.abs(gup('y1')) > 0)) {        x1 = xMin        y1 = yMin        xMin = xMin - 50        yMin = yMin - 50        xMax = xMin + 100        yMax = yMin + 100        dojo.connect(map, "onLoad", function () { ShowLocation(x1, y1); });    }    if ((xMin > 0) && (yMin > 0) && (xMax > 0) && (yMax > 0)) {        newExtent.xmin = xMin;        newExtent.ymin = yMin;        newExtent.xmax = xMax;        newExtent.ymax = yMax;        newExtent.spatialReference = new esri.SpatialReference({ wkid: 27700 });        map.setExtent(newExtent);    }

In the init function does stuff with it - can either take an envelope or single point - probably not the best way to do it, but it worls for us

ACM

AndyBurns

cooke its probably best to start your own thread however i have had a look and your code is missing some javascript formatting, the most obvious is the curly bracket on the if statement is not closed.

Get firefox and a add on called firebug, this will help with general formatting issues etc...

Anyway, this is how i do mine, i run it through my if loop to check for each one:

var urlObject = esri.urlToObject(document.location.href);
                    // Set our default position, zoom level and layerid's
                    x = 349299;
                    y = 313074;
                    zoomLevel = 0;
                    // Do we have a qeury string on the URL?
                    if (urlObject.query) {
                        // Do we have a coords parameter?
                        if (urlObject.query.coords) {
                            var coords = urlObject.query.coords.split(',');
                            // We have an x and a y right?
                            if (coords.length == 2) {
                                x = parseFloat(coords[0]);
                                y = parseFloat(coords[1]);
                                console.log("x coord passed to map: ", x);
                                console.log("y coord passed to map: ", y);
                            }
                        }
                        // Let's check for a zoomlevel 
                        if (urlObject.query.zoomLevel) {
                            var zoomLevel = parseInt(urlObject.query.zoomLevel);
                            console.log("Zoomlevel passed to map: ", zoomLevel);
                        }
                        //Let's check if any layers are specified
                        /*if (urlObject.query.layers) {
                            //layers = parseInt(urlObject.query.layers);     
                            layers = urlObject.query.layers.split(',');
                            console.log("layer ID's passed to map: ", layers);
                        }*/
      if (urlObject.query.lgsl) {
        var lklgsl = urlObject.query.lgsl;
        layers = matchLgsl(lklgsl);
        console.log("lgsl code:", lklgsl);
      }
                        //set the visable layers that where passed in the url
                        lbsr.setVisibleLayers(layers);
      console.log("Layer ID's being drawn", layers);
                    }
                    // Position our mapto the x and y provided in the url
                    var point = new esri.geometry.Point([x, y], new esri.SpatialReference({
                        wkid: 27700
                    }));
                    //var point = esri.geometry.Point(new esri.geometry.Point(x, y));
                    console.log("Zooming to location...", point, zoomLevel);
                    map.centerAndZoom(point, zoomLevel);
                    console.log("Zoom complete");
                    // Highlight the item on our map
                    if (!graphic) {
                        addGraphic(point);
                    } else {
                        graphic.setGeometry(point);
                    };

I can then call my map like so: http://servername/site/urlparameters.html?coords=351406,329248&zoomLevel=8&layers=0,1,2,3&lgsl=1306

I have a default x,y,zoomlevel that if they are not specified in the url, it zooms to those hard coded values.

Im a bit unsure how it works with your template but dont see why there should be an issue, just ensure you calling ''map'' correctly as you dont seem to specify a map but rather a template and i dont have any experience with that method.

IanCooke

I'm a noob...trying to do the same thing, but trying to do it with a customized version of one of the ArcGIS online javascript templates (basic viewer) that points at an arcgis online web map. We have downloaded the template in order to customize colors and tools more than seems to be alowed by the "publishable" templates and placed on our own web server.

The basic code from your example looks very different from the template code I'm starting with. I've tried taking what seem to be the relevant bits of your example and inserting them into our template in various spots, but dumb luck hasn't been on my side in this case.

Here's a link to my latest (nonworkng) attempt so you can see the code. For comparison, here's a version (without the zoom and center functionality) that does work.

Is it possible to make this template take a url parameter for center and zoom? Is the problem that it is on our own web server? Is there some other way to do this entirely that we need to be looking at? If so, can anyone tell me what I'm doing wrong?

Thanks in advance for your help!

--Ian

JohnPeabody

I'll give that a try
thanks

John

khutchins

Here's an example that shows one way to do this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Topographic Map</title>
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.1/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
      .esriScalebar{
        padding: 20px 20px;
      }
      #map{
        padding:0;
      }
    </style>
    <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.1"></script>
    <script type="text/javascript">
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");

      
      var map;

      function init() {
        var initExtent = new esri.geometry.Extent({"xmin":-122.46,"ymin":37.73,"xmax":-122.36,"ymax":37.77,"spatialReference":{"wkid":4326}});
        map = new esri.Map("map",{
          extent:esri.geometry.geographicToWebMercator(initExtent)
        });

        var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
        map.addLayer(basemap);

        
         //if there are url params zoom to location 
         var coords, zoomLevel;
         var urlObject = esri.urlToObject(document.location.href);
  
  
        if(urlObject.query && urlObject.query.coords && urlObject.query.zoomLevel){
          var coords = urlObject.query.coords.split(',');
 
          var lon = parseFloat(coords[0]);
          var lat = parseFloat(coords[1]);

      
          var zoomLevel = parseInt(urlObject.query.zoomLevel);
          var point = esri.geometry.geographicToWebMercator(new esri.geometry.Point(lon,lat));

          map.centerAndZoom(point,zoomLevel);
        }


        
        dojo.connect(map, 'onLoad', function(theMap) { 
          //resize the map when the browser resizes
          dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
        });
      }

      dojo.addOnLoad(init);
    </script>
  </head>
  
  <body class="claro">
    <div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
      <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="border:1px solid #000;padding:0;">
     </div>
    </div>
  </body>

</html>

And here's the url param you'd use to enter the location and zoom level:
http://localhost/ZoomCoords.html?coords=-117.13,32.82&zoomLevel=8

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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