LogoLogo
  • Welcome
  • What's new?
  • Docs
    • User guides
      • Get Started
      • Kepler.gl workflow
        • Add data to layers
          • Adding Data Layers
          • Create a Layer
          • Blend and Rearrange Layers
          • Hide, Edit and Delete Layers
        • Add Data to the Map
      • Layers
        • Point
        • S2 Layer
        • Icon
        • Line
        • Cluster
        • Polygon
        • Hexbin
        • Grid
        • H3
        • Heatmap
        • Arc
        • Trip layer
      • Layer Attributes
      • Color Palettes
      • Filters
      • Map Styles
      • Interactions
      • Map Settings
      • Time Playback
      • Save and Export
      • FAQ
    • API Reference
      • ecosystem
      • Get Started
      • Advanced usages
        • Saving and Loading Maps with Schema Manager
        • Replace UI Component with Component Dependency Injection
        • Forward Dispatch Actions
        • Reducer Plugin
        • Using Updaters
        • Custom reducer initial state
        • custom-mapbox-host
      • Components
      • Reducers
        • reducers
        • map-style
        • map-state
        • combine
        • overview
        • ui-state
        • vis-state
      • Processors
        • All processors
      • Schemas
      • Actions
        • All actions
      • Cloud providers
        • Provider
      • Custom theme
      • Localization
    • Jupyter Notebook
  • Examples
    • Node/Express
    • Demo App
    • Open modal
    • Open modal
    • UMD client
    • Customize kepler.gl Theme
    • Customize kepler.gl Reducer
  • Contributing
    • Developing Kepler.gl
    • Contributor Covenant Code of Conduct
  • Change Log
  • Upgrade Guide
Powered by GitBook
On this page
  • 1. Configuring Mapbox API hostname
  • 2. Overriding the default MapStyles

Was this helpful?

  1. Docs
  2. API Reference
  3. Advanced usages

custom-mapbox-host

1. Configuring Mapbox API hostname

The KeplerGL component accepts an optional parameter mapboxApiUrl to override the default value of https://api.mapbox.com.

  <KeplerGl
      id="foo"
      mapboxApiAccessToken={token}
      mapboxApiUrl={"https://api.mapbox.cn"}
      width={width}
      height={height}/>

2. Overriding the default MapStyles

The default MapStyles KeplerGL uses might not be accessible to you, in this case you will need to provide MapStyle overrides. During construction of your component:

  this.token = '';
  this.apiHost = "https://api.mapbox.cn";
  this.mapStyles = [
    {
      id: 'dark',
      label: 'Dark Streets 9',
      url: 'mapbox://styles/mapbox/dark-v9',
      icon: `${this.apiHost}/styles/v1/mapbox/dark-v9/static/-122.3391,37.7922,9.19,0,0/400x300?access_token=${this.token}&logo=false&attribution=false`,
      layerGroups: [] // DEFAULT_LAYER_GROUPS
    },
    {
      id: 'light',
      label: 'Light Streets 9',
      url: 'mapbox://styles/mapbox/light-v9',
      icon: `${this.apiHost}/styles/v1/mapbox/light-v9/static/-122.3391,37.7922,9.19,0,0/400x300?access_token=${this.token}&logo=false&attribution=false`,
      layerGroups: [] // DEFAULT_LAYER_GROUPS
    }
  ];

and In render:

  <KeplerGl
      id="foo"
      mapboxApiAccessToken={this.token}
      mapboxApiUrl={}
      mapStyles={this.mapStyles}
      width={width}
      height={height}/>
PreviousCustom reducer initial stateNextComponents

Last updated 5 years ago

Was this helpful?