map-style

Table of Contents

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.

Parameters

Returns Object nextState

inputMapStyleUpdater

Input a custom map style object

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

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

Parameters

Returns Object nextState

loadMapStylesUpdater

Callback when load map style success

Parameters

Returns Object nextState

mapConfigChangeUpdater

Update visibleLayerGroupsto change layer group visibility

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

Parameters

Returns Object nextState

resetMapConfigMapStyleUpdater

Reset map style config to initial state

Parameters

Returns Object nextState

Last updated