Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

Currently I am using ArcGIS JS API ver 3.3/3.5 in my application.

I want to restrict the basemap for US only .For example one can use default navigation features like zoom in, zoom out for the US Country only.

Trying following things:

1.I have set the US extent code in my application but when I zoom out then I can see the whole world map I want to restrict it to certain extent only

2.Going through this question Restrict pan and zoom in ArcGIS Javascript API?

3.Restricting the streets base map using this question but unable to restricting the map How do I use my own basemap with Javascript API?

4.I am using this sample map in my application.

Any help regarding this will be great!!!

Thanks in advance !!!

share|improve this question
up vote 4 down vote accepted

Here is an example of one way to do this: http://jsfiddle.net/gh/gist/library/pure/6050806/

share|improve this answer
    
Thanks for the reply. I will check and let you know. thanks once again : ) – Sunil Jul 22 '13 at 4:04
    
Its working fine.. thanks a lot : ) – Sunil Jul 22 '13 at 6:22
    
No problem, my pleasure! – CLJ Jul 22 '13 at 12:33

Here is an example of the code I used to do this. This will work for your case if you set the initial extent of the map to show the US:

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

Here's a working jsFiddle example: http://jsfiddle.net/sirhcybe/aL1p24xy/

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.