custom-mapbox-host

Search…

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.
1
  <KeplerGl
2
      id="foo"
3
      mapboxApiAccessToken={token}
4
      mapboxApiUrl={"https://api.mapbox.cn"}
5
      width={width}
6
      height={height}/>
Copied!
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:
1
  this.token = '';
2
  this.apiHost = "https://api.mapbox.cn";
3
  this.mapStyles = [
4
    {
5
      id: 'dark',
6
      label: 'Dark Streets 9',
7
      url: 'mapbox://styles/mapbox/dark-v9',
8
      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`,
9
      layerGroups: [] // DEFAULT_LAYER_GROUPS
10
    },
11
    {
12
      id: 'light',
13
      label: 'Light Streets 9',
14
      url: 'mapbox://styles/mapbox/light-v9',
15
      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`,
16
      layerGroups: [] // DEFAULT_LAYER_GROUPS
17
    }
18
  ];
Copied!
and In render:
1
  <KeplerGl
2
      id="foo"
3
      mapboxApiAccessToken={this.token}
4
      mapboxApiUrl={}
5
      mapStyles={this.mapStyles}
6
      width={width}
7
      height={height}/>
Copied!

Custom reducer initial state

Components

Last modified 1yr ago

Copy link

Contents

1. Configuring Mapbox API hostname

2. Overriding the default MapStyles