'openlayers map.updateSize when the width of the map changes

when displaying a side panel, I would like the proportion of the map to be kept inside the new div width (or height). There it is simply reduced, which affects the breadth of the countries. I tried to map.updateSize without success. How can i do it ? more details

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
   
  })/*,
   minResolution: "auto",
   maxResolution: "auto"*/
});
/*window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}*/
/*$('#map').on('change',function(){setTimeout(() => { this.map.updateSize(); });})*/
$("#btn").click(function(){
  $("main aside").css("display","block");
  $("main section").css("width","1000px");
  $("#map").css("width","1000px")
   }); 
$("#close").click(function(){
  $("main aside").css("display","none");
  $("main section").css("width","1100px");
  $("#map").css("width","1100px")
   });
/*map.updateSize()*/
/*map.onresize = setTimeout(() => { this.map.updateSize() })*/
$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 500)
})`var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
   
  })/*,
   minResolution: "auto",
   maxResolution: "auto"*/
});
/*window.onresize = function(event)
{
   map.zoomOut(); map.zoomIn();
}*/
/*$('#map').on('change',function(){setTimeout(() => { this.map.updateSize(); });})*/
$("#btn").click(function(){
  $("main aside").css("display","block");
  $("main section").css("width","1000px");
  $("#map").css("width","1000px")
   }); 
$("#close").click(function(){
  $("main aside").css("display","none");
  $("main section").css("width","1100px");
  $("#map").css("width","1100px")
   });
/*map.updateSize()*/
/*map.onresize = setTimeout(() => { this.map.updateSize() })*/
$(window).resize(function () {
  if (window.resizeMapUpdateTimer) {
    clearTimeout(window.resizeMapUpdateTimer)
  }
  window.resizeMapUpdateTimer= setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 500)
})

https://codepen.io/epinrap/pen/gOgwLvZ

javascriptjquerycssopenlayers


Solution 1:[1]

map.updateSize was the solution, the question was to trigger it later and it works when I put this in the button scripts :

setTimeout(function () {
    // Update container size
    map.updateSize()
  }, 300)

Solution 2:[2]

Try this code.

  window.onresize = () => {
                setTimeout(() => { 
                    this.olMap.updateSize();
                }, 500);
            }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ericire
Solution 2 tayfun K?l?รง

Related Questions