topic Re: Constrain Map Extent in ArcGIS JavaScript Maps SDK Questions

Constrain Map Extent

DonCaviness — Mon, 11 Apr 2011 15:35:19 GMT

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.

Re: Constrain Map Extent

derekswingley1 — Mon, 11 Apr 2011 15:49:29 GMT

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

Re: Constrain Map Extent

HemingZhu — Mon, 11 Apr 2011 19:16:52 GMT

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

Re: Constrain Map Extent

BenjaminZank1 — Fri, 10 Dec 2021 22:42:08 GMT

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

Re: Constrain Map Extent

JoshJones1 — Mon, 01 Apr 2013 15:36:15 GMT

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

Re: Constrain Map Extent

PatrickTaurman — Fri, 10 Dec 2021 22:42:11 GMT

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

Re: Constrain Map Extent

ChristopherEby — Thu, 16 Jun 2016 14:44:40 GMT

This link is broken.

Re: Constrain Map Extent

KenBuja — Thu, 16 Jun 2016 22:01:40 GMT

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

Re: Constrain Map Extent

JohnSchweisinger — Tue, 21 Jun 2016 19:33:25 GMT

http://arcscripts.esri.com/

Re: Constrain Map Extent

ChristopherEby — Tue, 21 Jun 2016 20:41:07 GMT

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