Unpredictable resizing behaviour

First of all, let me thank you for this library. We just switched to it from uber/react-map-gl and are much happier with it. In particular, the cluster and inertia panning functionalities are great.

One thing that we are still struggling with is the auto-sizing functionality, which worked better with uber. We are using <Autosizer> from the https://github.com/bvaughn/react-virtualized library to dynamically adjust the map for responsive designs.

Our code looks basically like this:

<AutoSizer>
            {({ height, width }) => {
              return (
                  <MapGL
                    ref={this.map}
                    style={{ width, height }}
                    {...this.state.viewport}
                    mapStyle={`https://api.maptiler.com/maps/basic/style.json?key=${key}`}
                    onViewportChange={this.onViewportChange}
                    viewportChangeMethod={viewportChangeMethod}
                    viewportChangeOptions={viewPortChangeOptions}
                    onClick={onClick}
                  >
            );
      }}
</AutoSizer>

With this code, the map sometimes gets very small (or isn’t even visible), sometimes it’s just a bit too small. We’ve noticed that <AutoSizer> sometimes reports wrong sizes for a moment (like height or width being 0), but it catches up and then uses the correct sizes. It seems as if your library cannot keep up with this. It looks as if some debouncing is happening inside the library, but it doesn’t work well.

We added some safeguarding code that checks for width or height being 0 and re-using the previous sizes instead. This helped a bit, but did not completely solve our problem.

The problem is most prominent if you toggle Chrome’s developer tools on and off. Without the safe-guarding code, sometimes the map disappears completely, or it is only 20px high.

[oselz]

@derwaldgeist I never had much luck getting AutoSizer working perfectly either, as a workaround we use react-sizeme to force a map resize. It is not the cleanest, but is reliable:

import { withSize } from 'react-sizeme'

const SizeAware = withSize({ noPlaceholder: true, monitorHeight: true })(
    (props => props.children) as React.ComponentType<any>,
)

class ReactMap extends React.Component<MapProps, MapState> {
    reactMap: any

    constructor(props: any) {
        super(props)
        this.reactMap = React.createRef()
    }
    resizeMap = () => {
        this.reactMap.current.getMap().resize()
    }
    render = (): React.ReactNode => {
        return (
            <SizeAware onSize={this.resizeMap}>
                <MapGL
                    ref={this.reactMap}
                    trackResize={false}
                 >
                    {children}
                </MapGL>
            </SizeAware>
        )
    }
}

[derwaldgeist]

@cazzer Thanks for taking your time to provide a repro, that’s awesome. I just wanted to let you know that I can’t actually see this on Stackblitz. It reports the @urbica/react-map-gl library as being missing. Maybe it’s just on my end, but I thought it would be worth mentioning.