Unpredictable resizing behaviour

[Tom Brückner]

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.

[Stepan Kuzmin]

Hi @derwaldgeist

Thanks for filling the PR for this, could you please provide a reproducible example for that?

[Daniel Brownlees]

@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>
        )
    }
}

[Paul Yakovlev]

Just recently switched from uber/react-map-gl as well!
@oselz thank you for sharing this workaround, we were struggling with resizing too and this is doing the trick for now.

[Caleb]

@stepankuzmin Here's a Stackblitz that reproduces the issue: https://stackblitz.com/edit/urbica-map-resize-repro, (note that you'll need to drop in an access token).

This example allows you to change the height via a property passed into the map component. The top map will not correctly resize which causes the center of the map to no longer to correspond to the latitude and longitude props pass to it. The bottom map implements useEffect to watch for changes to the height property upon which it uses the same ref.current.getMap().resize() workaround that @oselz suggested.

Here's a fun gif that clearly shows the behavior:

Also, thank you so much for this library. Like others in this thread, I switched from Uber/Visgl and have been incredibly impressed with the performance of this library.

[Tom Brückner]

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

[Caleb]

@derwaldgeist I think it just needs your access token, I see the same message but the maps rendered fine for me. I did have some challenges getting this library installed on Stackblitz, so if nothing else works perhaps reinstalling the libraries will help. I installed all peer dependencies and optional dependencies, without the optional deps installed, (language and traffic), I get an error trying to install this library.