Search code examples
javascriptreactjskepler.gl

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


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


Solution

  • 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