Search code examples
htmldata-visualizationdata-sciencekepler.gl

Disable side panel when exporting Kepler.gl map?


I loaded my data into kepler.gl (https://kepler.gl/) and created a visual I would like to post online by embedding the code into a blogpost. However, I want the readers/users not to be able to see and access the side panel, but rather only with the main view of the map.

Is there any way to do so or any parameters I can change when exporting the html?


Solution

  • To solve the issue, one must replace the reducers block:

    const reducers = (function createReducers(redux, keplerGl) {
                return redux.combineReducers({
                  // mount keplerGl reducer
                  keplerGl: keplerGl.keplerGlReducer
                });
              }(Redux, KeplerGl));
    

    With the following:

          const reducers = (function createReducers(redux, keplerGl) {
            const customizedKeplerGlReducer = keplerGl.keplerGlReducer.initialState({
               uiState: {readOnly: true}
            });            
            return redux.combineReducers({
              // mount keplerGl reducer
              keplerGl: customizedKeplerGlReducer
            });
          }(Redux, KeplerGl));
    

    And in the end, change the line with addDataToMap to: store.dispatch(keplerGl.addDataToMap(loadedData, {readOnly: true}));