Openlayers H3 Binning works but map only displays on page load

Question

I focused on an example of H3-JS binning work on Mapbox map canvas. https://gis.utah.gov/developer/applications/suitability/

However, I wanted to work with Openlayers map. With some help I was able to make H3-JS work with Openlayers.

Here is the working code: https://jsbin.com/nosoyonemi/edit?html,output

Now I would only like to load that map when a button is clicked, not on page load. So I added a button and called the map load.

Code here: https://jsbin.com/waqojixipo/1/edit?html,output

I made the map display to none

<div id="mapContainer" style="display: none;"></div>

and added the following code

<input id="clickMe" type="button" value="Show Map" onclick="displayMap();" />

function displayMap(){
       var x = document.getElementById("mapContainer");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

But on the button click, no map is displayed

Even if I change the following code, to make the map not visible upon load

const vectorLayer = new ol.layer.Vector({
    **"visible":false,** //added to make it visible

and then make it visible later on in the code

for (let input of inputs) {
  input.addEventListener("change", () => {
    console.log("event listener")
    //refreshMap2(vectorLayer); //wasnt showing so lets call another function
    **vectorLayer.setVisible(true)**; 
  });
} 

It still is not visible upon button click. Though The map zoom option does display.

I was hoping someone could tell me how to display the map - not on page load, but on button click.

Please feel free to modify the JSBIN code: https://jsbin.com/waqojixipo/1/edit?html,output

Answer 1

If you make changes to the map div visibility or size you must call map.updateSize().

In your case you must declare map before defining the displayMap function:

  <script>
    let map;
    function displayMap(){
      var x = document.getElementById("mapContainer");
      if (x.style.display === "none") {
        x.style.display = "block";
        map.updateSize();
      } else {
        x.style.display = "none";
      }
    }
  </script>

so further down in your code const map = should be changed to map =.