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

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

Find more posts tagged with

Accepted answers

AshleyPeters

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

All comments

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

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?

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

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

}

});

evtguy

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

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.