> For the complete documentation index, see [llms.txt](https://docs.kepler.gl/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kepler.gl/docs/api-reference/advanced-usages/custom-mapbox-host.md).

# 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`.

```js
  <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:

```js
  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:

```js
  <KeplerGl
      id="foo"
      mapboxApiAccessToken={this.token}
      mapboxApiUrl={this.apiHost}
      mapStyles={this.mapStyles}
      width={width}
      height={height}/>
```