I'm trying to figure out how to customize the kepler.gl's mapbox style. I want to make the mapbox component fill the screen width and height.
I've already tried updating it using the dispatcher with no success:
this.props.dispatch(loadCustomMapStyle({inputStyle: {url: 'mapbox://styles/mapbox/navigation-guidance-day-v4', id: 'some-id', style: {width: '100%', height: '100%'}}}));
this.props.dispatch(addCustomMapStyle());
I also tried using the styled-components ThemeProvider:
<ThemeProvider theme={{width: '100%', height:'100%'}}>
<KeplerGl
id="foo"
mapboxApiAccessToken={'API_KEY'}
store={store}
/>
</ThemeProvider>
Any help would be greatly appreciated!
The KeplerGl component takes in width
and height
props (documentation here). To change these with the dimensions of a div, you can use AutoSizer. For example, for the KeplerGl component to fill the screen you could wrap it in a div that is fullscreen as follows:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
...
<div style={{position: "absolute", width: "100%", height: "100%"}}>
<AutoSizer>
{({height, width}) => (
<KeplerGl
mapboxApiAccessToken={MAPBOX_TOKEN}
id="map"
width={width}
height={height}
/>
)}
</AutoSizer>
</div>