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

Ferdy

Can you create a plunkr showing the code? check this out embed.plnkr.co/LJ7K5csN5paJaiUgLlB8 – Gorlicki

You can give width:'100%' in viewport. – Berar

Thanks @MurliPrajapati it worked. – Ferdy

Answer 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
}

Underscore

Answer 2

this worked for me:

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

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

Carbine

Answer 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.

Exsanguinate

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. – Kaplan

Answer 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,
  }

Belay

Answer 5

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}
    />

Cataclinal