Display legend by default on a kepler gl point map

[elolelo]

Is your feature request related to a problem? Please describe.
I'm always frustrated when I export my point map made 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 of the points on the map.

Describe the solution you'd like
I'd like that when I export an html file of a map to instantly see the legend without clicking the legend button.

Describe alternatives you've considered
Instead of exporting the map, I have tried hosting it in one of the cloud services but the outcome is still the same. Then I tried using react instead but the problem is I will have tom create 10 react map apps because I want 10 maps.

Additional context
I would like to have (as the below image shows ) that legend fixed and displaying by default on the exported html kepler.gl map

[lixun910]

@elolelo Here is a workaround if you can modify the keplerGl.keplerGlReducer.initialState in the downloaded HTML file. For example:

1. Open the downloaded HTML file (e.g. kepler.gl.html) in an editor (e.g. visual studio code)
2. Locate the code section of /** STORE **/ (around line 88?) e.g.

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

Add mapControls with mapLegend with parameters: show: true and active:true:

          /** STORE **/
          const reducers = (function createReducers(redux, keplerGl) {
            return redux.combineReducers({
              // mount keplerGl reducer
              keplerGl: keplerGl.keplerGlReducer.initialState({
                uiState: {
                  readOnly: true,
                  currentModal: null,
                  mapControls: {
                    mapLegend: {
                      show: true,
                      active: true
                    }
                  }
                }
              })
            });
          }(Redux, KeplerGl));

3. Save the HTML file. Then, reload it in a browser. You should be able to get the kepler.gl map with legend displaying by default.

[elolelo]

@lixun910 Thank you very much - this has worked.