map-style

Table of Contents

• mapStyleUpdaters

  • INITIAL_MAP_STYLE

    • Properties

  • initMapStyleUpdater

  • inputMapStyleUpdater

  • loadCustomMapStyleUpdater

  • loadMapStyleErrUpdater

  • loadMapStylesUpdater

  • mapConfigChangeUpdater

  • mapStyleChangeUpdater

  • resetMapConfigMapStyleUpdater

mapStyleUpdaters

Updaters for mapStyle. Can be used in your root reducer to directly modify kepler.gl's state. Read more about Using updaters

Examples

import keplerGlReducer, {mapStyleUpdaters} from '@kepler.gl/reducers';
// Root Reducer
const reducers = combineReducers({
 keplerGl: keplerGlReducer,
 app: appReducer
});

const composedReducer = (state, action) => {
 switch (action.type) {
   // click button to hide label from background map
   case 'CLICK_BUTTON':
     return {
       ...state,
       keplerGl: {
         ...state.keplerGl,
         foo: {
            ...state.keplerGl.foo,
            mapStyle: mapStyleUpdaters.mapConfigChangeUpdater(
              mapStyle,
              {payload: {visibleLayerGroups: {label: false, road: true, background: true}}}
            )
         }
       }
     };
 }
 return reducers(state, action);
};

export default composedReducer;

INITIAL_MAP_STYLE

Default initial mapStyle

Properties

• styleType string Default: 'dark'
• visibleLayerGroups Object Default: {}
• topLayerGroups Object Default: {}
• mapStyles Object mapping from style key to style object
• mapboxApiAccessToken string Default: null
• inputStyle Object Default: {}
• threeDBuildingColor Array Default: [r, g, b]

initMapStyleUpdater

Propagate mapStyle reducer with mapboxApiAccessToken and mapStylesReplaceDefault. if mapStylesReplaceDefault is true mapStyles is emptied; loadMapStylesUpdater() will populate mapStyles.

• Action: keplerGlInit

Parameters

• state Object
• action Object

  • action.payload Object

    • action.payload.mapboxApiAccessToken string

Returns Object nextState

inputMapStyleUpdater

Input a custom map style object

• Action: inputMapStyle

Parameters

• state Object mapStyle
• action Object action object

  • action.payload Object inputStyle

    • action.payload.url string style url e.g. 'mapbox://styles/heshan/xxxxxyyyyzzz'
    • action.payload.id string style url e.g. 'custom_style_1'
    • action.payload.style Object actual mapbox style json
    • action.payload.name string style name
    • action.payload.layerGroups Object layer groups that can be used to set map layer visibility
    • action.payload.icon Object icon image data url
  • action.payload.inputStyle

  • action.payload.mapState

Returns Object nextState

loadCustomMapStyleUpdater

Callback when a custom map style object is received

• Action: loadCustomMapStyle

Parameters

• state Object mapStyle
• action Object

  • action.payload Object

    • action.payload.icon string
    • action.payload.style Object
    • action.payload.error any

  • action.payload.icon

  • action.payload.style

  • action.payload.error

Returns Object nextState

loadMapStyleErrUpdater

Callback when load map style error

• Action: loadMapStyleErr

Parameters

• state Object mapStyle
• action Object

  • action.payload any error

Returns Object nextState

loadMapStylesUpdater

Callback when load map style success

• Action: loadMapStyles

Parameters

• state Object mapStyle
• action Object

  • action.payload Object a {[id]: style} mapping

Returns Object nextState

mapConfigChangeUpdater

Update visibleLayerGroupsto change layer group visibility

• Action: mapConfigChange

Parameters

• state Object mapStyle
• action Object

  • action.payload Object new config {visibleLayerGroups: {label: false, road: true, background: true}}

Returns Object nextState

mapStyleChangeUpdater

Change to another map style. The selected style should already been loaded into mapStyle.mapStyles

• Action: mapStyleChange

Parameters

• state Object mapStyle
• action Object

  • action.payload string

Returns Object nextState

resetMapConfigMapStyleUpdater

Reset map style config to initial state

• Action: resetMapConfig

Parameters

• state Object mapStyle

Returns Object nextState