8

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.

4

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

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

4

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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