I have been working on openlayers 4 and specifically my question is regarding limiting the extent the user sees, let's say 2 km by 2km is the viewing area, this configuration was done using the ol.View class's extent attribute.

In that case for the initial zoom level, I'm able to see the entire area of 4kms by panning across, when I zoom into the next level, then the area I can pan across is less than 4kms, how can I maintain the original extent, even on other zoom levels while panning?

Here is the code :

var matrixIds = new Array(14);
for (var i = 0; i < 14; ++i) {
    matrixIds[i] = "EPSG:27700:" + i;

var resolutionsArray = [896.0, 448.0, 224.0, 112.0,
    56.0, 28.0, 14.0, 7.0, 3.5, 1.75,
    0.875, 0.4375, 0.21875, 0.109375

var map = new ol.Map({
    target: 'map',
    layers: [
        new ol.layer.Tile({
            source: new ol.source.WMTS({
                name: "OS Maps WMTS",
                url: "<layer_url>",
                layer: "Road 27700",
                matrixSet: "EPSG:27700",
                format: 'image/png',
                projection: "EPSG:27700",
                tileGrid: new ol.tilegrid.WMTS({
                    origin: [-238375.0, 1376256.0],
                    resolutions: resolutionsArray,
                    matrixIds: matrixIds
                style: '',
                crossOrigin: "Anonymous"
    view: new ol.View({
        center: [529449, 189252],
        zoom: 13,
        maxZoom: 16,
        minZoom: 13,
        extent: [529449 - 1000, 189252 - 1000, 529449 + 1000, 189252 + 1000]

1 Answer 1


extent is the extent of for the view's center constraint, not the extent of the viewable map. You could set an extent on the layer, but that would result in white space inside the view. To maintain a 2km x 2km constraint on the view's edges as could be done in OpenLayers 2 you would need to change the view as the resolution changes (ignoring very small changes to avoid performance issues):

    var extent = map.getView().calculateExtent(); // opening coverage
//    var extent = [529449 - 1000, 189252 - 1000, 529449 + 1000, 189252 + 1000]; // 2km box
    var resolution = 0;
    function resChange() {
        var newResolution = map.getView().getResolution();
        if (resolution == 0 || Math.abs((newResolution-resolution)/resolution) > 0.01) {
            resolution = newResolution;
            var width = map.getSize()[0] * resolution;
            var height = map.getSize()[1] * resolution;
            var view = new ol.View({
                projection: map.getView().getProjection(),
                extent: [extent[0]+(width/2), extent[1]+(height/2), extent[2]-(width/2), extent[3]-(height/2)],
                center: map.getView().getCenter(),
                resolution: resolution,
                maxZoom: map.getView().getMaxZoom(),
                minZoom: map.getView().getMinZoom()
            view.on('change:resolution', resChange);

enter image description here

UPDATE: The answer applies OpenLayers 3, 4 and 5. In OpenLayers 6 extent does define the view extent (as in did in Openlayers 2).

  • Thanks Mike for the answer, but this didn't work. Still on the next zoom level the extent that is we are able to pan is less than the initial pan extent. Oct 7, 2018 at 6:05
  • If we set the extent to the layer then it works but we get the white space area on the map view while panning. Is there a way to stop the white area? Oct 7, 2018 at 6:09
  • Your initial extent is 2km x 2km (1km x 1km before your edit) center constraint, not a 2km x 2km viewable constraint. Getting the correct center constraint for the desired viewable constraint is dependent on a calculation involving map size, so I've edited to force an immediate recalculation after loading.
    – Mike
    Oct 7, 2018 at 9:12
  • The workaround still doesn't work out because it resets the extent and restricts the area which were viewable earlier (in previous zoom levels). I'm ideally looking for something similar to solve the problem by re-setting the extent to the original when the user zooms in or setting a max extent. Oct 7, 2018 at 16:49
  • I had presumed if you wanted a 2km square constraint you wouldn't be using a map size or any resolutions which meant the viewport would cover a larger area. If that happened you wouldn't be able to pan but would see beyond the 2km box. To replace the 2km box with the opening map coverage (which depends on the map div size and is presumably more than 2km) set extent = map.getView().calculateExtent();
    – Mike
    Oct 7, 2018 at 17:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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