AnsweredAssumed Answered

Why does map.on 'extent-change' fire when the the map first loads?

Question asked by pib30 on Oct 8, 2014
Latest reply on Oct 17, 2014 by pib30

I am trying to create a unique url string based on the map zoom level and center coordinate.  This is easy enough until, in some cases, I must remove part of the url before doing so.  I thought that using a combination of window.onload to remove part of the initial url and using map.on("extent-change", ...) to create the new url would work great, until I found out that extent-change will fire be window.onload finishes.  I am a little new at javascript (approx. 1 year in, mostly self-taught) and was wondering if anyone knew of a work around of sorts or another way to accomplish this.  Maybe some kind of deferred.  Here is a bit of code:

 

//get the variables of areaID (hunt area, IOG area, or Access Yes! area), layerID (which layer to apply the ID query to), and label (what will appear in the legend).  Get the zoom and map center coordinate variables.
var layerID, urlZoom, urlX, urlY, homeURL, zoomLevel, centerpoint, cX, cY, newURL, extentI, extentC;
window.onload = function(){
  layerID = getVariableByName('lyr');
  urlZoom = getVariableByName('zoom');
  urlX = getVariableByName('X');
  urlY = getVariableByName('Y');

  if (typeof areaID != 'undefined'){
    doQuery(layerID);
  }

  if (typeof urlZoom != 'undefined'){
    var point = new Point(urlX, urlY, new SpatialReference({ wkid: 4326}));
    map.setLevel(urlZoom);
    map.centerAt(point);
  }

  //Get the url.
  homeURL = window.location.href;
  zoomLevel = map.getZoom();
  centerpoint = webMercatorUtils.webMercatorToGeographic(map.extent.getCenter());
  cX = parseFloat(centerpoint.x.toFixed(3));
  cY = parseFloat(centerpoint.y.toFixed(3));
  newURL ="?zoom=" + zoomLevel + "&X=" + cX + "&Y=" + cY;
  //If the url contains an lyr parameter, remove part of url from ? to end.
  if (window.location.href.indexOf("lyr") > 0){
    $("#viewURL").append(homeURL);
    window.history.pushState(null,null,window.location.href.slice(0,(window.location.href).indexOf('?')));
  //If url has no lyr parameter.
  } else {
    $("#viewURL").empty();
    homeURL = window.location.href;
    $("#viewURL").append(homeURL + newURL);
  }
  
  //Create variable for load extent.
  extentI = map.extent;
  var I = "";
  I = "ExtentI:  XMin: " + extentI.xmin + "YMin: " + extentI.ymin + "XMax: " + extentI.xmax + "YMax: " + extentI.ymax;
}

//On extent change, change the url zoom and coordinate parameters.
map.on("extent-change", function(){
  extentC = map.extent;
  var C = "";
  C = "ExtentC:  XMin: " + extentC.xmin + "YMin: " + extentC.ymin + "XMax: " + extentC.xmax + "YMax: " + extentC.ymax;
  if (extentI == extentC){
    console.log("Extent hasn't changed");
  }
  if (extentI != extentC){
    $("#viewURL").empty();
    homeURL = window.location.href;
    zoomLevel = map.getZoom();
    centerpoint = webMercatorUtils.webMercatorToGeographic(map.extent.getCenter());
    cX = parseFloat(centerpoint.x.toFixed(3));
    cY = parseFloat(centerpoint.y.toFixed(3));
    newURL ="?zoom=" + zoomLevel + "&X=" + cX + "&Y=" + cY;
    $("#viewURL").append(homeURL + newURL);
  }
});

Outcomes