[GIS] Openlayers min-zoom to view all map

javascriptopenlayersopenstreetmap

I'm using openlayers with OSM as a map source. I would like to change map settings co I cannot zoom more than map size.

enter image description here

This is a situation now. I do not want to see the white space. I do not want map to wrap X (I already did that with wrapX : false in OSM constructor). But how can I set up the map to see it just once? I tried to set min zoom to some value But I could still see the white space.

This is my init function

    this._source = new OSM({
        cacheSize: 10000,
        wrapX : false
    });

    this._layer = new OlTileLayer({
        source: this._source
    });

    this._view = new OlView({
        center: [-7916041.528716288, 5228379.045749711],
        zoom: 4,
        minZoom: 2
    });

    this.map = new OlMap({
        target: 'map',
        layers: [this._layer],
        view: this._view,
        controls: [
            new OlControlZoom(),
            new OlControlZoomSlider()
        ]
    });

Can anyone help me?

Best Answer

As I comment on the question, you can use extent which limits center coordinates to move within the range.
You figure out which is the exact coordinates of map images(e.g. for OSM, it's [-20027724.40316874, -20027724.40316874, 20027724.403168738, 20032616.372978993]), then set this as a extent then the map center doesn't go outside of the map.
This is you can do for now though you may see half area of white space when you reach its boundary.

Another way is, if you support few levels, setting extent as a little inside points from boundary so it can display map images instead white. but extent is based on coordinates and doesn't care about visual things so when you zoom-in/out, you will loose boundary images if you set too deep inside coordidnates from boundary, you will see white space if you set too shallow insdie coordinates from boundary.

https://codepen.io/anon/pen/eMBeMM is example for zoom:2, width:500px, height: 600px with OSM

view: new ol.View({
  center: [0, 0],
  zoom: 2,
  minZoom: 2,
  extent: [-7435794.111581946, -8766409.899970295, 8688138.383006273, 9314310.518718438]
})
Related Question