2

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

styled-components ThemeProvider も使用してみました:

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

どんな助けでも大歓迎です！

4

1 に答える 1

2

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>
于 2019-05-28T14:50:00.067 に答える