How do I stop the map at just one world/globe?

Question

I am working on a project to put google maps layer and adding our data layers on top of it. using openlayers and google maps layer with out layer of top of it

now the google layer has max resolution of 156543.0339 and 22 zoom levels, I can limit the zoom levels and max resolution etc but how do I stop the map at just one world/globe

i.e. I don't want it to scrolling off to another wrapped around world!

Please see this fiddle for example, http://jsfiddle.net/eaJHn/5

Anyone !!! ?

Answer 1

OpenLayers.Layer.Google (which I assume you are using) has the property "wrapDateLine" set to true. This should be set to false, and as the source says you should also set sphericalMercator to true.

So, something like:

var layer = new OpenLayer.Layer.Google("Google", {
    wrapDateLine: false,
    sphericalMercator: true
});

Answer 2

Guessing from your description you are searching for a way to stop the user to zoom out at a certain zoom level. Am I right?

In the OpenLayers Wiki about Configuring ZoomLevels you find examples for doing that with the minZoomLevel option:

map = new OpenLayers.Map( $('map') );

var layer  = new OpenLayers.Layer.Google( "Google",
         { minZoomLevel: 3, maxZoomLevel: 8 });

// layer.numZoomLevels == 6

Though it can be a bit tricky it worked for me on a Google layer.

Answer 3

In addition to setting wrapDateLine : false as mentioned by atlefren. I found a way with restrictedExtent and pass it the bounds.

There is another way to attach listener to the openlayer map object and re-pan or re-cetner

due to popular demand here is the relevant snippet of code. However complete code can not be pasted as it spans 2 or 3 files, so see this fiddle http://jsfiddle.net/eaJHn/7/ for complete example

Rest of the answers on this questions are also very informative , as they all provide different info needed to create a proper google map with openlayers

var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
var restrictedExtent = maxExtent.clone();

var map = new OpenLayers.Map({
            div: "map",
            projection: proj4326,
            displayProjection: proj900913,
            maxExtent: maxExtent,
            restrictedExtent: restrictedExtent,
        });

Answer 4

var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508);
var restrictedExtent = maxExtent.clone();

var map = new OpenLayers.Map({
            div: "map",
            projection: proj4326,
            displayProjection: proj900913,
            maxExtent: maxExtent,
            restrictedExtent: restrictedExtent,
        });