Search code examples
openlayers

How can I guarantee zooming out completely will show the whole world?

If I zoom out completely, I still may need to scroll the map up or down or left or right to see everything. I would like to be able to define that when zoomed complete out, the whole world can be viewed within the containing div. I understand that in this state, the map may not fill the containing div fully and that is ok.

How can I do this?

const map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [120, 15],
    zoom: 2
  })
});
#map {
  aspect-ratio: 3 / 1;
  background-color: blue;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>
<div id="map"></div>

Solution

  • Use showFullExtent: true in the view options

    const map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    projection: "EPSG:4326",
    center: [120, 15],
    zoom: 2,
    showFullExtent: true,
  })
});
    #map {
  aspect-ratio: 3 / 1;
  background-color: blue;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/7.3.0/dist/ol.min.js"></script>
<div id="map"></div>