3

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

2

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;
},
  • Interesting approach (and what you suggested definitely works but like you said, IDK if setting it to false is best here). – Nubtacular Nov 20 '13 at 17:18
  • You have to set it to false otherwise OpenLayers will adjust the extent to the size of the map and you won't be able to zoom out further like in your original problem. – Julien-Samuel Lacroix Nov 20 '13 at 18:11
  • Which version of OpenLayers are you using, the behavior changed a little bit in the last few years. – Julien-Samuel Lacroix Nov 21 '13 at 17:11
  • Thanks for the very detailed update! I think wrapDateLine will suffice for now. See my 'Update 2' in original post as I'm trying to 'cut off' the sides. Feel like I've tried everything with bounds and haven't had success with resolutions. Let me know what you think. – Nubtacular Nov 22 '13 at 0:20
  • 1
    OpenLayers simply creates a div to contain the GoogleMaps tiles. Since OpenLayers doesn't have access to the tiles directly, it's not possible to do (Against the Google Maps Terms of Use). – Julien-Samuel Lacroix Nov 22 '13 at 15:58
1

I took a look at your codeshare. Try setting the maxExtent property.

I believe you might have placed 360 and -360 because you want to zoom farther out?

var options = {
        maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),
        controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.LayerSwitcher(),
                new OpenLayers.Control.PanZoomBar()
        ]
        //zoomToExtent: bounds.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
};

Update:

Actually, not sure you'll be able to zoom farther out than new OpenLayers.Bounds(-180, -90, 180, 90) with the google maps layer.

In my web mapping application the OpenStreet maps layer allows me to but not the google maps layer. The service might be restricted to that.

enter image description here enter image description here

  • You are definitely on the right track (and your example is clearly working). See my update in my original question: any idea why I have to use such strange values? Not that it is even perfected yet. – Nubtacular Nov 20 '13 at 17:19

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.