Why mapbox is not loading the map correctly?

Question

I have a very simple mapbox installed on my website. For whatever reason, it is it is only displaying roughly 50% of the map. I don't know if this is a webkit issue or something is wrong with my styling.

this is whats in my index.html file:

and here is my styling:

#map {
  display: flex;
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  height: 100%;
  width: 100%;
}

Here is a picture of what im seeing:

It's strange because when I resize the browser window, the map then fills the div element, but when I first load the webpage it only displays half?

user_8620333 · Answer

Call the resize after the load using map.on('load', function() {}) to make sur it's called when the map is loaded and not before.

mapboxgl.accessToken =
      "pk.eyJ1IjoiYnJhbmF1c3QiLCJhIjoiY2thZzlvMWJrMDVpNDJwbWprcjZuOWs0ZSJ9.fhHUkmUo3OFZpv74nmsqeA";
    var map = new mapboxgl.Map({
      container: "map",
      style: "mapbox://styles/branaust/ckah0ufz017b71jrsp5pm2w0d",
    });
map.on('load', function() {
    map.resize()
});

#map {
  display: flex;
  height: 100%;
  width: 100%;
}

.container {
  display:grid;
  grid-template-columns:1fr 1fr;
  height:500px;
  border:2px solid red;
}

Why mapbox is not loading the map correctly?

1 Answers