React Map GL: map not taking the entire width

Solution 1:

this worked for me:

viewport: {
  width: "fit",
  ...
},

<ReactMapGL
  onViewportChange={nextViewport =>
    this.setState({ viewport: { ...nextViewport, width: "fit" } })
  }
...
>

Solution 2:

Using react-map-gl version 5.2.3, the map would not render when I used width: '100%', height: '100%'.

Instead of percentage units, I was able to get it to work using "vw"/"vh" units like this: width: '100vw', height: '100vh'. This is the style of syntax currently shown in the docs examples from the react-map-gl repo.

The repo example uses the width/height props directly, but in the viewPort object it would look like:

viewPort: {
  width: '100vw',
  height: '100vh',
  latitude: 21.1458,
  longitude: 79.0882,
  zoom: 4
}

Hope that helps someone.

Solution 3:

You should be able to provide the width as a percentage. Just make sure it's a string.

viewPort: {
    width: "100%",
    height: "100%",
    latitude: 21.1458,
    longitude: 79.0882,
    zoom: 4
}

Solution 4:

For me, with [email protected], I could not specify width and height to 100%. Although specifying 100vh worked but it had problems on mobile devices.

I fixed the issue by specifying viewport as below

  viewport: {
    latitude: 0,
    longitude: 0,
    zoom: 1,
    height: window.innerHeight,
    width: window.innerWidth,
  }