Constrain Map Extent

[DonCaviness]

Has anyone been able to constrain map extent to the initial extent of the map?  I am wanting to limit where the user can pan the map. I want to keep the user inside of a giving county or state.  Is this possible with the JavaScript API? Any and all help is appreciated.

[derekswingley1]

You can do this by passing in a custom levels of detail when you create your map. There's a sample showing this here:  http://arcscripts.esri.com/details.asp?dbid=16956

[ChristopherEby]

This link is broken.

[KenBuja]

This sample shows how to set up custom LODs when creating the map: Specify LODs (levels of detail) | ArcGIS API for JavaScript

[HemingZhu]

Has anyone been able to constrain map extent to the initial extent of the map?  I am wanting to limit where the user can pan the map. I want to keep the user inside of a giving county or state.  Is this possible with the JavaScript API? Any and all help is appreciated.

......
dojo.require("esri.toolbars.navigation");
......

var iniExtent, navToolbar;

function init(){
.....
dojo.connect(map, "onLoad", function(){
  ........
  navToolbar = new esri.toolbars.Navigation(map);
  //bypass initLoad
  dojo.connect(map, "onExtentChange", function(extent){
       var buffer = 5; //in my case, unit is 5 meter
       // set costraint extent to initExtent +buffer
       var constraintExtent = new esri.geometry.Extent(iniExtent.xmin - buffer, iniExtent.ymin - buffer,  iniExtent.xmax + buffer, iniExtent.ymax + buffer);
       if (!constraintExtent.contains(extent) && !constraintExtent.intersects(extent)) {
                // zoom back to previous extent
                navToolbar.zoomToPrevExtent();
            }
  });
  .......
});
.....
}

[BenjaminZank1 · Accepted solution]

I realize this is a little late to help Dan, but here is a another simple function that constrains the map extent to a user specified area:

dojo.connect(map, "onExtentChange", function (){ 
 var extent = map.extent.getCenter();
 if(initialExtent.contains(extent)){}
 else{map.setExtent(initialExtent)}
 });

The event handler listens for the map "onExtentChange" event. When the event occurs the center of the current map extent is passed to a variable called extent the extent.contains method is used to verify if the center point falls within the initial map extent. If it does nothing happens, if it doesn't the map extent is set back to the initial extent.

Hopefully somebody searching on this topic will be able to make use of this.

Cheers,
Ben

[JoshJones1]

Thanks Ben, that worked really well for me except for one thing.


I am still very new to the JavaScript API, and I was curious if there was a way to not have the map also zoom to the original zoom level as well.  I have six zoom levels available, and the map is zoomed out at the highest zoom level when the map opens, and if somebody is panning around at the closest zoom level and they go outside the map window it will pan to the original location as well as the original zoom level.


Thanks again Ben.



-Josh

[PatrickTaurman]

Hi Josh,

You could try something like this:

// Get the current zoom level on initialization, then every time the map is zoomed.
var currentZoom = map.getZoom();
dojo.connect( map, "onZoomEnd", function(){
     currentZoom = map.getZoom();
});
  
// Re-center the map at the current zoom level when the user pans outside of the initial map extent.
dojo.connect( map, "onPanEnd", function() {
     var currCenter = map.extent.getCenter();
   
     if (initialExtent.contains( currCenter)) {
     } else {
          map.centerAndZoom( center, currentZoom);
     }
});

[JohnSchweisinger]

http://arcscripts.esri.com/

[ChristopherEby]

I came up with my own version based on what was posted above and things I found elsewhere on the web. Here's a jsFiddle example: Esri Map Limit Extent - JSFiddle

And here's the relevant code:

//This function limits the extent of the map to prevent users from scrolling
//far away from the initial extent.
function limitMapExtent(map) {
  var initialExtent = map.extent;
  map.on('extent-change', function(event) {
  //If the map has moved to the point where it's center is
  //outside the initial boundaries, then move it back to the
  //edge where it moved out
  var currentCenter = map.extent.getCenter();
  if (!initialExtent.contains(currentCenter) &&
  event.delta.x !== 0 && event.delta.y !== 0) {

  var newCenter = map.extent.getCenter();

  //check each side of the initial extent and if the
  //current center is outside that extent,
  //set the new center to be on the edge that it went out on
  if (currentCenter.x < initialExtent.xmin) {
  newCenter.x = initialExtent.xmin;
  }
  if (currentCenter.x > initialExtent.xmax) {
  newCenter.x = initialExtent.xmax;
  }
  if (currentCenter.y < initialExtent.ymin) {
  newCenter.y = initialExtent.ymin;
  }
  if (currentCenter.y > initialExtent.ymax) {
  newCenter.y = initialExtent.ymax;
  }
  map.centerAt(newCenter);
  }
  });
}