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

Want to improve this post? Provide detailed answers to this question, including citations and an explanation of why your answer is correct. Answers without enough detail may be edited or deleted.

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

Answer 2

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/