CODEWITHSUNDEEP
cssreactjsmapbox
Kristian Munter
Kristian Munter

Reputation: 137

Map canvas size MapboxGL JS

I am using Mapboxgl with React to show a map on my webpage, but I'm having great trouble with setting the size of the mapbox. I wrote my own css class to at least show the map, else it shows with 0 height for some reason. my custom css class looks like this 

.custom-map {
  display: flex;
  width: 100%;
  height: 54em;
}

I've also loaded the mapboxgl css file locally in my project, the full file loads on the page. my current source code can be found here, I've experimented with a bunch of styles where I set styles here

 <div
        ref={el => (this.mapContainer = el)}
        className="mapboxgl-map absolute custom-map top right left bottom"
 />

Currently the mapbox container look slike this, note that information pop up from mapbox goes all the way to where I want it, but the map does not.

Screenshot of map, map only takes a portion of the screen The mapbox css file sets height of the map to be in %, but height in % does for some reason not work,I have to set height using em. Disabling the custom map and setting height in em from the mapbox css file I get an actual height larger than 100%. Changing the width property from .mapboxgl-map does not do anything, even when using em.

I'm not sure where the error is so it's hard for me to post all the relevant information that may be needed to solve this, I'd be happy to post any additional information needed. Thank you in advance for your replies!

enter image description here

Upvotes: 3

Views: 4466

Answers (1)

brianbancroft
brianbancroft

Reputation: 472

I've run into a similar issue where when I create my own wrapper for a new MapboxGL map. This issue only shows itself on Firefox and Safari. This isn't the best solution, but it might be a decent a workaround. Add the following to the map component:

this.map.once('load', () => {
  this.map.resize()
})

This means that the initial render of the map will look awful. You will want something to mask the loading process. But in absence of a solution that makes it render, properly, the first time, in the virtual dom, it might work out.

Upvotes: 3

Related Questions