CODEWITHSUNDEEP
htmlcssmapbox
Brandon Austin
Brandon Austin

Reputation: 222

Why mapbox is not loading the map correctly?

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: 

<div id="map" class="map">
      <script>
        mapboxgl.accessToken =
          "pk.eyJ1IjoiYnJhbmF1c3QiLCJhIjoiY2thZzlvMWJrMDVpNDJwbWprcjZuOWs0ZSJ9.fhHUkmUo3OFZpv74nmsqeA";
        var map = new mapboxgl.Map({
          container: "map",
          style: "mapbox://styles/branaust/ckah0ufz017b71jrsp5pm2w0d",
        });
        map.resize()
      </script>
      </div>

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?

Upvotes: 3

Views: 2435

Answers (1)

Temani Afif
Temani Afif

Reputation: 272742

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;
}
<script src="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css" rel="stylesheet" />
<div class="container">
<div id="map" class="map">
</div>
<div>

</div>
</div>

Upvotes: 2

Related Questions