topic Why does map.on 'extent-change' fire when the the map first loads? in ArcGIS JavaScript Maps SDK Questions

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

PamelaBond — Wed, 08 Oct 2014 18:39:56 GMT

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

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

SteveCole — Thu, 09 Oct 2014 21:23:21 GMT

I would try using a boolean variable in order to avoid running your code during that initial map extent change that occurs. So, something like:

//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;
var initLoad = true;  
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(){
  if(initLoad) {
    //this is the initial map extent change at page load
    initLoad = false;
  } else { 
       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);  
       } 
  } 
});

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

PamelaBond — Fri, 17 Oct 2014 18:46:38 GMT

Thanks for your reply Steve. If I run your code as is, none of my initLoad (in my case window.load) code runs. I am not sure how this helps me.