Pass Extent in URL

[AshleyPeters]

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

[SteveCole]

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

[JordanBaumgardner]

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

  }

});

[AshleyPeters]

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

[AshleyPeters]

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?

[JordanBaumgardner]

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.

[AshleyPeters · Accepted solution]

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