topic Pass Extent in URL in ArcGIS JavaScript Maps SDK Questions

Pass Extent in URL

AshleyPeters — Sun, 12 Dec 2021 05:34:17 GMT

In my current Flex map, I am able to pass an extent through the URL quite easily. I'm trying to update the map to JavaScript, but I'm having problems getting that same capability to work now.

I am currently getting an error stating, "xmin is not defined". I'm sure I've missed something simple.

Here's my code:

var urlObject = esri.urlToObject(window.location.href); 
    if (urlObject.query) 
    { 
    if (urlObject.query.XMin) 
    { xmin = urlObject.query.XMin; } 
    if (urlObject.query.XMax) 
    { xmax = urlObject.query.XMax; } 

if (urlObject.query.YMin)
{ ymin = urlObject.query.YMin; }

if (urlObject.query.YMax)
{ ymin = urlObject.query.YMax; }

var spatialRef = new SpatialReference({wkid:102100});  //set your wkid here
  var urlPassedExtent = new Extent();
  urlPassedExtent.xmin = xmin;
  urlPassedExtent.ymin = ymin;
  urlPassedExtent.xmax = xmax;
  urlPassedExtent.ymax = ymax;
  urlPassedExtent.spatialReference = spatialRef;

  mapMain.setExtent(urlPassedExtent);
  
//If extent not found in URL, use initial extent
  }else  {    mapMain.setExtent(extentInitial);
  }

Re: Pass Extent in URL

SteveCole — Thu, 28 Jan 2016 23:01:52 GMT

upper/lower case counts so make sure "xmin" in the URL is consistent with "urlObject.query.xmin" in your code..

Re: Pass Extent in URL

JordanBaumgardner — Thu, 28 Jan 2016 23:55:19 GMT

Make sure your url params line up with what your pulling in.

var map;

require(["esri/map", "esri/urlUtils", "esri/SpatialReference","esri/geometry/Extent", "dojo/domReady!"], function(Map, urlUtils, SpatialReference, Extent) {

map = new Map("map", {

basemap: "topo",

center: [-122.45, 37.75],

zoom: 13

});

// Fake URL to show the params use your document.location.href code below

var urlObject = esri.urlToObject("http://your.server.com?xmin=-8526390.734225096&ymin= 4433687.484863019&xmax=-8518747.031396376&ymax=4437389.903420679");

// Define your vars - I believe they were only scoped to the if {}

var xmin, ymin, xmax, ymax;

if (urlObject.query) {

if (urlObject.query.xmin) {

xmin = urlObject.query.xmin;

}

if (urlObject.query.xmax) {

xmax = urlObject.query.xmax;

}

if (urlObject.query.ymin) {

ymin = urlObject.query.ymin;

}

if (urlObject.query.ymax) {

ymin = urlObject.query.ymax;

}

var spatialRef = new SpatialReference({

wkid: 102100

});

// I'm not sure of the exact json syntax (the wksid is a little weird) so I use the constructor

var urlPassedExtent = new Extent(xmin, ymin, xmax, ymax,spatialRef);

}

});

Re: Pass Extent in URL

AshleyPeters — Mon, 22 Feb 2016 20:26:35 GMT

I'm able to pass an extent through the URL, but the zoom level seems to be an issue now. The map will center on the extent given, but will not zoom into the extent.

Is there a way to force a zoom level or LOD through the URL?

Re: Pass Extent in URL

JordanBaumgardner — Tue, 23 Feb 2016 17:15:51 GMT

The extent is the LOD. You could pass a Center point and a LOD.

Something like:

my.server.com/myWebApp?lod=14&center={x=123.123,y=123.123}

Then instead of setting the extent you would

- Center the map on the point

- Set the LOD on the map to the lod passed

Sorry for the lack of specifics. I'll look them up later if you are still having trouble.

Re: Pass Extent in URL

AshleyPeters — Thu, 03 Mar 2016 22:00:23 GMT

I was able to solve this by removing the zoom setting when I create the map. Thanks for the suggestions!

Re: Pass Extent in URL

AshleyPeters — Sun, 12 Dec 2021 05:34:20 GMT

Jordan,

I'm sorry I'm just getting back to you, but it's been a busy morning! I had already caught the changes that Steve suggested, so tried your suggestions out. I took the code block you provided and placed it into my project. I'm not sure if it's placed correctly or not. I'm still quite new to JavaScript, and this is a little beyond what I truly understand. Here's the pertinent portion of my code:

require([
    "dojo/dom-construct",
    "esri/map",
    "esri/Color",
    "dojo/keys",
    "esri/sniff",
    "esri/SnappingManager",
    "esri/renderers/SimpleRenderer",
    "esri/config",
    "esri/geometry/Extent",
    "esri/geometry/webMercatorUtils",
    "esri/dijit/BasemapGallery",
    "esri/dijit/HomeButton",
    "esri/dijit/Search",
    "esri/dijit/Popup",
    "esri/dijit/Scalebar",
    "esri/dijit/Print",
    "esri/dijit/Measurement",
    "esri/InfoTemplate",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/layers/FeatureLayer",
    "esri/tasks/GeometryService",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/toolbars/draw",
    "esri/graphic",
    "esri/urlUtils",
    "esri/SpatialReference",
    "agsjs/dijit/TOC",
    "dojo/_base/array",
    "dojo/aspect",
    "dojo/dom",
    "dojo/ready",
    "dojo/on",
    "dojo/domReady!",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/TitlePane",
    "dijit/form/Button"],

function (domConstruct, Map, Color, keys, has, SnappingManager, SimpleRenderer, esriConfig, Extent, webMercatorUtils, BasemapGallery, HomeButton, Search, Popup, Scalebar, Print, Measurement, InfoTemplate, ArcGISDynamicMapServiceLayer, FeatureLayer, GeometryService, SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Draw, Graphic, urlUtils, SpatialReference, TOC, array, aspect, dom, ready, on

) {

ready(function() {

esriConfig.defaults.geometryService = new GeometryService("https://conservationgis.alabama.gov/adcnrweb/rest/services/Utilities/Geometry/GeometryServer");

//Create Symbols
var popupLine = new SimpleLineSymbol ("solid", new Color("#84CCDA"), 3);
var popupFill = new SimpleFillSymbol ("solid", popupLine, new Color([134, 208, 218, 1.25]));
var drawMarker = new SimpleMarkerSymbol ();
    drawMarker.setStyle(SimpleMarkerSymbol.STYLE_CIRCLE);
    drawMarker.setColor(new Color("#FF0000"));
    drawMarker.setOutline(null);
    drawMarker.setSize("8");
var drawLine = new SimpleLineSymbol ("solid", new Color("#FF0000"), 3);
var drawFill = new SimpleFillSymbol ("null", drawLine, new Color(["#FF0000", 1.25]));

//Create Popup
var popup = new Popup({
    fillSymbol: popupFill,
    lineSymbol: null,
    markerSymbol: null,
}, domConstruct.create("div"));

//get URL     
    var urlObject =  urlUtils.urlToObject(window.location.href);

// Fake URL to show the params use your document.location.href code below

  var urlObject = esri.urlToObject("http://your.server.com?xmin=-8526390.734225096&ymin= 4433687.484863019&xmax=-8518747.031396376&ymax=4437389.903420679");

// Define your vars - I believe they were only scoped to the if {}

  var xmin, ymin, xmax, ymax;

  if (urlObject.query) {

    if (urlObject.query.xmin) {

      xmin = urlObject.query.xmin;

    }



    if (urlObject.query.xmax) {

      xmax = urlObject.query.xmax;

    }



    if (urlObject.query.ymin) {

      ymin = urlObject.query.ymin;

    }



    if (urlObject.query.ymax) {

      ymin = urlObject.query.ymax;

    }



    var spatialRef = new SpatialReference({

      wkid: 102100

    });



    // I'm not sure of the exact json syntax (the wkid is a little weird) so I use the constructor

  var urlPassedExtent = new Extent(xmin, ymin, xmax, ymax,spatialRef);

  }

//Create initial extent
var extentInitial = new Extent({
"xmin":-10077457.809115015,
"ymin":3391939.9753557443,
"xmax":-9157767.48478802,
"ymax":4263933.594032803,
"spatialReference":{"wkid":102100}
});