CODEWITHSUNDEEP
zoomingopenlayers-3
A. M.
A. M.

Reputation: 565

Openlayers 3 - limit possible zoom levels on the map

I need to keep the zoom level between certain levels (5-19) and not allow the user to zoom in/out any further. I've tried setting the minZoom/maxZoom properties of the view, and also the minResolution/maxResolution, but it doesn't seem to work.

Here is the code:

map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM( {crossOrigin: null} )
        })
    ],
    target: 'map',
    controls: ol.control.defaults({
        attributionOptions: ({
            collapsible: false
        })
    }),
    view: new ol.View({
        center: [0, 0],
        zoom: 5,
        minZoom: 5,
        maxZoom: 19,
        minResolution: 4891.96981025128,
        maxResolution: 39135.75848201024,
        projection: new ol.proj.get("EPSG:900913")
    })
});

I've tried it using just the settings for minZoom/maxZoom, just the ones for minResolution/maxResolution or all of them... nothing happens, I am stil able to zoom further.

Edit: it was "zoom: 5", not "zoom: 2" in the code above.

Upvotes: 3

Views: 12255

Answers (2)

Patrik Kelemen
Patrik Kelemen

Reputation: 179

try to add maxResolution property to ol.view in map element. 

`  view: new ol.View({
            center: ol.proj.transform([20.6031834, 48.6325657], 'EPSG:4326', 'EPSG:3857'),
            zoom: 11,
            maxResolution: 4000

        })`

Easy map example

 var map = new ol.Map({
        layers: [map, satMap],
        target: 'map',
        controls: ol.control.defaults({
            attributionOptions: ({
                collapsible: false
            })
        }),
        view: new ol.View({
            center: ol.proj.transform([20.6031834, 48.6325657], 'EPSG:4326', 'EPSG:3857'),
            zoom: 11,
            maxResolution: 4000

        })
    });

Upvotes: 3

shahida
shahida

Reputation: 335

view: new ol.View({
    center: [0, 0],
    zoom: 5,
    minZoom: 5,
    maxZoom: 19,
    minResolution: 4891.96981025128,
    maxResolution: 39135.75848201024,
    projection: new ol.proj.get("EPSG:900913")
})

Change zoom parameter to 5 or more. It will fix your issue.

Upvotes: 3

Related Questions