[GIS] Openlayers using Google Maps as base layer: possible to zoom out farther than max extent

google mapsopenlayers-2

See attached picture. This is how it is when the page loads. I'm currently using

map.zoomToMaxExtent();

enter image description here

Everything is working pretty well but I'd like to zoom out more/see the whole world using OSM/Google Map Layers: is this even possible?

Note that the zoom bar on the left is set to the lowest bar when the page loads (if you can't see the map well, just right click the image and paste into a new browser tab).

This post was somewhat helpful but even when I do MIN_ZOOM_LEVEL that doesn't do much.

Also note I am not setting any bounds, extents, or resolutions. Toying with those did not seem to do the trick either.

Any input is appreciated.

Edit: here's a codeshare if you want to take a look: http://codeshare.io/GLC4i

UPDATE: http://i.imgur.com/mSpTchY.png This is not perfected yet (and it makes me think something may be wrong with my OL code itself) but currently I am using this

var extent = new OpenLayers.Bounds(-1.32,81.71,-1.18,-61.80).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:3857"));

I tried

var extent = new OpenLayers.Bounds(-20037508.34279,-10018754.17139,20037508.34279,10018754.17139);

(both with and without transform) but this did not do anything.

UPDATE 2: http://i.imgur.com/XzuGxrn.png

wrapDateLine: false works fine for now: can zoom out farther, pan around, etc etc.

Now I would like to cut off everything to the left of the date line on the left side of the map (the 'first' portion), and cut off everything to the right of the date line on the right side of the map (the '3rd' portion) WHILE still keeping the map full screen. I've tried bounds, resolutions, but no go. Is this even feasible?

Something like this but it should take up the full screen: possible to do? See below:

http://i.imgur.com/feBEnx3.png

Best Answer

This is the default behavior of OpenLayers when using Google layers. The parameter that controls this is wrapDateLine: false. Simply modify your code with this to be able to zoomout further: 

    var google_default =  new OpenLayers.Layer.Google("Google Default", {wrapDateLine: false})
    var google_satellite = new OpenLayers.Layer.Google("Google Satellite", {type: google.maps.MapTypeId.SATELLITE, wrapDateLine: false})

When using WFS layers it is a good idea to not use wrapDateLine: false anyway. Otherwise you could end up with your vectors on the wrong side of the DateLine and outside of the visible map.

Update:

You are using a GoogleMaps Layer. This layer already set the maxExtent to the default value -20037508.34,-20037508.34,20037508.34,20037508.34. You don't have to play with that.

In some cases, OpenLayers adjust the minimum (zoomed-out) level to make it fit in your map size. If you are using the wrapDateLine: true (which is the default value with Google layers) in your baseLayer, the zoom level is adjusted to shows a map not wider than its maxExtent.

Now, to answer your original question, to be able to zoom out further, you can:

  • set wrapDateLine: false in your Google layers

  • or disable this code directly in OpenLayers (Note that this is not a clean solution): 

    OpenLayers.Map.prototype.adjustZoom = function(zoom) {
    return zoom
}

This is the revelant OpenLayers code that prevent you from zooming out further when wrapDateLine is set to true in your layer. This is always called when you zoom in/out with OpenLayers >= 2.13:

 /**
 * Method: adjustZoom
 *
 * Parameters:
 * zoom - {Number} The zoom level to adjust
 *
 * Returns:
 * {Integer} Adjusted zoom level that shows a map not wider than its
 * <baseLayer>'s maxExtent.
 */
adjustZoom: function(zoom) {
    if (this.baseLayer && this.baseLayer.wrapDateLine) {
        var resolution, resolutions = this.baseLayer.resolutions,
            maxResolution = this.getMaxExtent().getWidth() / this.size.w;
        if (this.getResolutionForZoom(zoom) > maxResolution) {
            if (this.fractionalZoom) {
                zoom = this.getZoomForResolution(maxResolution);
            } else {
                for (var i=zoom|0, ii=resolutions.length; i<ii; ++i) {
                    if (resolutions[i] <= maxResolution) {
                        zoom = i;
                        break;
                    }
                }
            } 
        }
    }
    return zoom;
},
Related Question