"Utilize openlayers' map.updateSize function to automatically adjust the map size in response to

When trying to display a side panel, I want to ensure that the map's proportions stay within the new div width or height. Currently, the map is simply resized, causing the countries to appear distorted. I attempted to use map.updateSize without success. How can I achieve this?

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

Answer №1

Give this script a shot.

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

Answer №2

After some investigation, I discovered that the key to solving the issue was utilizing map.updateSize at a later point in time. It turns out that putting the following code snippet into the button scripts did the trick:

setTimeout(function () {
    // Refresh container dimensions
    map.updateSize()
  }, 300)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Verify the ability to view a webpage

I am currently working on creating a method to check if data access is equal to next.data.access. Since it's an array, I cannot use the includes method. It would be enough for just one of the data access values in the array to return true. auth.guard ...

javascriptangular

Section is obstructing the view of Other Section above

I am struggling to create a responsive design for these two sections, both of which display quite similarly in line. Here are the resolutions for desktop and tablet/mobile: https://i.sstatic.net/XWbSP.png https://i.sstatic.net/3KLyY.png I suspect the is ...

cssresponsivebootstrap-5displayflexboxgrid

Create a hover effect on HTML map area using CSS

Is it possible to change the background color of an image map area on hover and click without using any third-party plugins? I attempted the following code: $(document).on('click', '.states', function(){ $(this).css("backgro ...

javascripthtmljquerycsshtml5-canvas

Issues with the webpack-dev-server and React

I was just reading up on Webpack and the moment came for me to start using it, but I ran into an error. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a09180b471e1f1e ...

javascriptnode.jsreactjsnpmwebpack

Issue arises when trying to insert an image avatar onto a globe in three.js

I have successfully implemented a rotating 3D globe using three.js with the code provided below. HTML <canvas id="canvas"></canvas> JS let camera; let renderer; function main() { const canvas = document.querySelector('#ca ...

javascriptcssthree.js

Triggering a function in response to a click

I'm encountering an issue with calling a callback inside a click event. Initially, I am attaching the click event to each table row. jQuery(tr).click(function (event) { var that = this; A(event, that, function () { var $gantt_containe ...

javascriptjquerycallback

Utilizing jquery-confirm for Efficiently Redirecting Links in a Web Browser

I recently started using the jquery-confirm v3.0.3 plugin (available at ) to confirm various actions on my website. However, after implementing the code below, I noticed that the action specified in the link's href attribute is not being executed whe ...

jqueryhrefalertconfirm

Tips for enabling an item to be moved around using HTML?

How can HTML be utilized to create a draggable item without simply assigning it as draggable? ...

csshtml

When jQuery AJAX GET SUCCESS is triggered too quickly

It seems like my "success" response is firing too quickly, so I had to make some adjustments from the initial code... $('.hs_cart button').click(function(){ $.get($(this).attr('url'), { success: function(){ refresh_ ...

jqueryajaxwordpresswoocommerce

How to decode JSON data into a JavaScript array and retrieve specific values using index positioning

Upon receiving a json response via ajax, the code looks like this: echo json_encode($data); The corresponding ajax code is shown below: $.ajax({ url:"PaymentSlip/check", data:{val:val}, type: 'POST', succe ...

javascriptjqueryjsonajax-request

Issue with sender field in contact form and mailer function

Having issues with my contact form that has 3 fields and a textarea... I've used jQuery for validation and PHP to handle email sending. The contact form is functioning correctly, but the From field in the received emails is not displaying as expect ...

phpjqueryhtmlajaxemail-headers

It seems that the maximum call stack size has been exceeded, resulting in a

Within this dropdown, I have incorporated a checkbox containing values in the form of an object. (refer to attached image) Every time I make a selection from the dropdown, there is a watch function that updates this new value, which is essentially an arra ...

javascriptangularjs

Pause the loading of information for a brief 2-second interval using jQuery's ajax feature

I want to enhance the user experience by loading search results using jQuery ajax within a div container. To achieve this, I am looking to introduce a 2-second delay before displaying the results or show them only after the user has entered at least three ...

jqueryajaxsearchdelay

Tips and tricks for personalizing the leaflet Lopup component using vue js

Seeking guidance on customizing the design of the LPopup component in leafletjs. I found a helpful guide at: https://i.sstatic.net/qEZol.png After inspecting the Lpopup in the dev tools, I tried adding CSS styles to the 'leaflet-popup-content-wrappe ...

javascriptvue.jsleafletpopup

Configuring Laravel and Vue together

Good evening, I am encountering an issue while trying to install Vue into my project. The error occurs when I run the command npm run watch. Can anyone provide assistance on how to troubleshoot and resolve this problem? 0 info it worked if it ends with o ...

javascriptnode.jsnpm

What methods are available for incorporating JavaScript classes from separate files into HTML while maintaining compatibility with IOS?

Currently, I find myself in a situation where I am required to utilize classes from JavaScript across various js files. For instance, there is a class named Panel located within the file js/radar-home.js. Below is how I am currently utilizing the class wit ...

javascriptioslaravel

I need either XPATH or CSS to target a specific checkbox within a list of checkboxes wrapped in span tags

I'm trying to find the XPATH or CSS locator for a checkbox in an HTML span tag that has a label with specific text, like "Allow gender mismatch". I can locate the label using XPATH, but I'm not sure how to target the input tag so I can click on t ...

csspython-2.7seleniumxpathselenium-webdriver

Discover the potential location of an element using jQuery's animate feature

Struggling to obtain the correct position of an element due to the length of my animation causing $(this).position().top to be calculated prematurely. Is there a way to predict the future position value of an element before it moves to that specific locat ...

javascriptjquery

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you r ...

javascripthtmlcsspolymer

Configure unique headers for various environments

I am looking to customize headers like "id", "env", and "name" based on different environments in my application. Each environment has a unique set of values for these headers. I am struggling to implement this effectively within my existing code logic. T ...

javascriptreactjsapicustom-headers