React-mapbox-gl: Canvas Size issues

[alex3165]

Hi @andreas-koch could you reproduce the issue with the webpackbin template

[andreas-koch]

Hi,
honestly I could not.
Using map.resize() in componentDidUpdate of the parent component fixes the issue.

The div with class mapboxgl-map always did update correctly. But in the dev tools of chrom I could see that the canvas still had old values for width and height. Not really sure right now, what causes the issue.

Thanks,
Andreas

[alex3165]

Probably related to https://github.com/alex3165/react-mapbox-gl/issues/395

[alex3165]

I will close this issue, please try to reproduce it and open a new issue if it is still a problem

[dedan]

@andreas-koch On what exactly are you calling map.resize()? I have the same issue

[mlg87]

@dedan call it on the map that is passed to onStyleLoad (i suppose you could probably also do it in componentDidMount assuming you have a ref to the map and its defined). here is an example:

render() {
  return (
    <ReactMapboxGlMap
      containerStyle={{ height: '100%', width: '100%' }}
      onStyleLoad={this.handleStyleLoad}
    />
  )
}

handleStyleLoad = map => (map.resize())

[dedan]

Thank you very much!

On Mon, Aug 20, 2018 at 11:52 PM Mason Goetz [e-mail]
wrote:

@dedan https://github.com/dedan call it on the map that is passed to
onStyleLoad (i suppose you could probably also do it in componentDidMount
assuming you have a ref to the map and its defined). here is an example:

render() {
return (
containerStyle={{ height: '100%', width: '100%' }}
onStyleLoad={this.handleStyleLoad}
/>
)
}
handleStyleLoad = map => (map.resize())

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/alex3165/react-mapbox-gl/issues/372#issuecomment-414475535,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAMBKWYB_-_07T0XHEC6FfLbwO1cABElks5uSy-lgaJpZM4PjSCY
.

[arjunsajeev]

Thanks a lot @mlg87

@dedan call it on the map that is passed to onStyleLoad (i suppose you could probably also do it in componentDidMount assuming you have a ref to the map and its defined). here is an example:

render() {
  return (
    <ReactMapboxGlMap
      containerStyle={{ height: '100%', width: '100%' }}
      onStyleLoad={this.handleStyleLoad}
    />
  )
}

handleStyleLoad = map => (map.resize())

[ollydixon]

@dedan call it on the map that is passed to onStyleLoad (i suppose you could probably also do it in componentDidMount assuming you have a ref to the map and its defined). here is an example:

render() {
  return (
    <ReactMapboxGlMap
      containerStyle={{ height: '100%', width: '100%' }}
      onStyleLoad={this.handleStyleLoad}
    />
  )
}

handleStyleLoad = map => (map.resize())

For TS users what type is Map?

[ollydixon]

Found it, you need to install mapbox-gl types npm install @types/mapbox-gl

Then the following.

import * as MapboxGl from 'mapbox-gl';

const handleStyleLoad = (map: MapboxGl.Map) => (map.resize())

onStyleLoad={handleStyleLoad}