React-map-gl: map canvas position off (?)

[miccferr]

Apologies if this is a trivial error...

Everytime I create a map, its canvas position is always off in respect to the parent element. As a result the map is only 1/2 the page width (see image below).

I've checked the CSS in the geojson example folder which works (the map stretches to the full page width) , and the style for all the HTML elements is the same as mine. Weirdly enough the width and height properties are correctly set by _onViewportChange() and _resize() methods, e.g.

``javascript _resize = () => { this.setState({ viewport: { ...this.state.viewport, width: this.props.width || window.innerWidth, height: this.props.height || window.innerHeight } }); }; ```` I'm using an ejectedcreate-react-app` with suggestions from issues #312 and #323 which work smoothly. I've found the same happening both in V2 and V3-beta

Any ideas why this might happen? Cheers!

[miccferr]

Closing this as I eventually found the issue to be related to simply conflicting methods between V2 and V3 + state management.

[ibgreen]

@miccferr good to hear this was resolved.

Feel free to propose improvements to our "Upgrade Guide" if you feel that some additional information there could have saved you time debugging this, maybe it will help someone else during their upgrade.

[mdrx-io]

@miccferr I'm actually still having this problem using all the latest versions. Can you provide some more info regarding your solution if you can still recall?

[SethHamilton]

@crunchex I had this issue also... A text-align style fixed it:

<ReactMapGL style={{textAlign: 'left'}} ...