Search code examples
javascriptopenlayersviewport

How to set the maxResolution depending on the container size?

I created an openlayers map, whose min zoom level should be fixed at 2.

This works fine, if the <div>, that contains the map, has a size of round about 1000 px x 750 px:

enter image description here

Now we have container sizes that are varying very strongly. So it comes that we have a container div, that is only, lets say 700px x 300px, which results in:

enter image description here

Now I want to have the same view of the map as in the first picture, also in the second, smaller container size/viewport.

Normally I would adjust the zoomlevel, but I must disabled the panning of the map, if the min zoom is set.

I would expect the zoom level to be independant from the container size, but its not, so i need to find a way to restrict the shown data depending on the maxResolution and also restrict the panning accordingly.

Now I could not find a suitable way to do this. Can anybody provide me a function or formula on how I can calculate the maxResolution property for the openlayers map(view), so the shown map extent is always the same, regardless of the container/target(div) size?

Solution

  • you are not looking for some way to set maxResolution or minResolution

    this is what you need http://openlayers.org/en/latest/apidoc/ol.View.html#fit

    fit your map to 

    minLongitude: -80
maxLongitude: 80
minLatitude: -180
maxLatitude: 180

    Example: adjust to your wanted view the first array => [minx, miny, maxx, maxy]. My coordinates are in EPSG:4326!

    map.getView().fit([-80, -180, 80, 180], { padding: [0, 0, 0, 0], size: map.getSize() });

    this one way to do it if you need an example or didnt uderstood just ask