show legend by default on a kepler gl point map

Question

I would like to export my point map done using kepler gl to an interactive html file. This interactive html file should have a legend (colour key) visible by default. What I mean is i shouldn't click on the show legend button to see the meaning of colours on the map - the show legend should be visible and fixed by default after exporting. Is this possible? Can anyone please guide me on how to achive this?

Answer 1

I am not sure about html exporting thing, and I am also not sure if you mean how to do it with the demo, basically using a front-end (GUI), or by the API components.

Since I made the legend open by default using react, I'll talk about it.

/* store.js */
// some of your import
import { createStore, applyMiddleware } from "redux";
import keplerGlReducer, { uiStateUpdaters } from 'kepler.gl/reducers';
import { taskMiddleware } from "react-palm/tasks";
// rest of them

const customizedKeplerGlReducer = keplerGlReducer
  .initialState({
    uiState: {
      mapControls: {
        ...uiStateUpdaters.DEFAULT_MAP_CONTROLS,
        mapLegend: {
          show: true,
          active: false
        },
        /* another map controls */
        //toggle3d: {
        //  show: true
        //},
      }
    }
  });

export default createStore(customizedKeplerGlReducer, {}, applyMiddleware(taskMiddleware));

This way your legend will be open (clicked) by default, unless this is not what you asked for.

Full example by kepler.gl