React Map GL: map not taking the entire width

Question

I am using semantic react ui as a ui library and react map gl to render maps in my react application. But the Maps rendered from react-map-gl are not taking the entire width of the column. Please find the image below:

The dotted line represents the column. There's still enough width for the map to stretch. But as per the docs we have to provide width and height of the map in pixels.

The container code is as below:

    render() {
    return (
        <Grid style={{ padding: '20px' }}>
            <Grid.Row>
                <Grid.Column mobile={16} computer={12} style={{ border: 'dotted', paddingLeft: 0 }}>
                    <PincodesMap
                        viewPort={this.props.viewPort}
                        handleViewportChange={this.handleViewportChange.bind(this)}
                    />
                </Grid.Column>
                <Grid.Column mobile={16} computer={4} style={{ border: 1 }}>
                    This is test
                </Grid.Column>
            </Grid.Row>
        </Grid>
    );
}

Whereas the component which holds the map looks like below:

import React from 'react';
import ReactMapGL from 'react-map-gl';

const PincodesMap = ({ viewPort, handleViewportChange }) => (
    <ReactMapGL
        {...viewPort}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxApiAccessToken="key"
        onViewportChange={handleViewportChange}
    />
);

export default PincodesMap;

The viewport code for the map is as below:

viewPort: {
        width: 800,
        height: 800,
        latitude: 21.1458,
        longitude: 79.0882,
        zoom: 4
    }

We cannot provide width in percentages. How do we make it appear full width ? Also, how to auto resize the map on mobile ?

Thanks

Can you create a plunkr showing the code? check this out http://embed.plnkr.co/LJ7K5csN5paJaiUgLlB8/ — Ahmad Alfy, Jan 06 '19 at 10:06

score 4 · Answer 1 · answered Aug 03 '20 at 15:55

4

this worked for me:

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

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

answered Aug 03 '20 at 15:55

yaya

7,675
1
39
38

cjn · Answer 2 · 2020-05-01T05:08:46.053

3

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.

edited May 01 '20 at 05:08

answered Apr 25 '20 at 18:39

cjn

1,331
1
16
22

1

The issue with setting 100vw is that this will include the width of the vertical scrollbar, making a horizontal one appear for everyone who is using a browser that has a scrollbar which takes up space. (So basically anything that's not mobile or macOS) This cannot be fixed in a clean way by setting a smaller width since the scrollbar width still differs between platforms. – DysphoricUnicorn Nov 29 '21 at 09:49

score 1 · Accepted Answer · answered Jan 18 '19 at 16:15

1

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
}

answered Jan 18 '19 at 16:15

dugtoni

160
1
13

score 1 · Answer 4 · answered Apr 29 '20 at 12:47

For me, with react-map-gl@5.2.3, 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,
  }

score 0 · Answer 5 · edited Jan 23 '22 at 17:33

0

Try to add width="100vw" height="100vh" in props.

<ReactMapGL
        {...viewPort}
        width="100vw"
        height="100vh"
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxApiAccessToken="key"
        onViewportChange={handleViewportChange}
    />

edited Jan 23 '22 at 17:33

ouflak

2,458
10
44
49

answered Jan 23 '22 at 16:05

user18010487

1

React Map GL: map not taking the entire width

5 Answers5