Как обновить стиль компонента Kepler.gl MapBox - PullRequest
Новая
       28

Как обновить стиль компонента Kepler.gl MapBox

0 голосов
/ 08 мая 2019

Я пытаюсь выяснить, как настроить стиль mapbox на kepler.gl.Я хочу, чтобы компонент mapbox заполнил ширину и высоту экрана.

Я уже пытался обновить его с помощью диспетчера, но безуспешно: 

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());

Я также пытался использовать стиль:Компоненты ThemeProvider: 

<ThemeProvider theme={{width: '100%', height:'100%'}}>
            <KeplerGl
                id="foo"
                mapboxApiAccessToken={'API_KEY'}
                store={store}
              />
</ThemeProvider>

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 28 мая 2019

Компонент KeplerGl принимает реквизиты width и height (документация здесь ).Чтобы изменить их с размерами div, вы можете использовать AutoSizer .Например, чтобы компонент KeplerGl заполнил весь экран, можно поместить его в полноэкранный элемент div следующим образом: 

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