How to hide Side Panel and the add data popup when the map is created?

Question

Trying to create a Kepler.gl map and passing dynamic data and do some actions on the map, I followed this tutorial and added data layers and everything working with the data, but now I need to hide the Side Panel on creating the map how can I do that, do i need to add something to the KeplerGl state? so when it's initing don't show the Side Panel, or I need to use the map actions toggleSidePanel? and how can I use this action, also I need to hide or remove the add data popup, please help and many thanks in advance

Answer 1

in step 3 of the vis academy tutorial you will find the following code:

// addDataToMap action to inject dataset into kepler.gl instance this.props.dispatch(addDataToMap({datasets: dataset, config: nycConfig}));

addDataToMap can take a third parameter where you can pass few options to interact with Kepler.gl UI. In your case what you want to do is the following:

// addDataToMap action to inject dataset into kepler.gl instance this.props.dispatch(addDataToMap({datasets: dataset, config: nycConfig, options: {centerMap: true, readOnly: true}}));

Kepler.gl will automatically hide the left panel for you.

Let me know if that works for you

Answer 2

It didn't work for me with readOnly flag.

You can hide panel and the popup at the time of initializing the kepler reducer.

const keplerReducer = keplerGlReducer.initialState({
    uiState: {
        activeSidePanel: null,  
        currentModal: null      
    }
});
const reducers = combineReducers({
    keplerGl: keplerReducer,
    app: appReducer
});