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

Constrain Map Extent

DonCavinessGeo

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.

Vind meer berichten getagd met

Accepted answers

BenjaminZank1

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

All comments

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

JohnSchweisinger

http://arcscripts.esri.com/

kenbuja

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

ChristopherEby

This link is broken.

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

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

BenjaminZank1

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

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

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.