Restricting base map on specific extent in ArcGIS API for JavaScript 3?

Question

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 basemap using this question, but unable to restrict the map: Using own basemap with ArcGIS API for Javascript?

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

Answer 1

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/

Answer 2

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