CODEWITHSUNDEEP
cssreactjsresponsivereact-map-gl
Ashy Ashcsi
Ashy Ashcsi

Reputation: 1597

React Map GL: map not taking the entire width

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: enter image description here

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

Upvotes: 5

Views: 9504

Answers (5)

user18010487
user18010487

Reputation: 1

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

Upvotes: 0

yaya
yaya

Reputation: 8253

this worked for me:

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

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

Upvotes: 5

cjn
cjn

Reputation: 1461

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.

Upvotes: 4

Saad
Saad

Reputation: 308

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

Upvotes: 1

dugtoni
dugtoni

Reputation: 170

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
}

Upvotes: 1

Related Questions