|
29 | 29 |
|
30 | 30 | [<img width="120" alt="Kepler.gl" src="https://d1a3f4spazzrp4.cloudfront.net/kepler.gl/website/icons/kepler.gl-logo.png">](http://kepler.gl) |
31 | 31 |
|
32 | | -[<img width="600" alt="Kepler.gl Demo" src="https://eng.uber.com/wp-content/uploads/2018/05/image4-3-768x493.png">](http://kepler.gl/#/demo) |
| 32 | +[<img width="600" alt="Kepler.gl Demo" src="./screenshots/screenshot.png">](https://kepler.gl/demo) |
33 | 33 |
|
34 | 34 | [Kepler.gl][web] is a data-agnostic, high-performance web-based application for visual exploration of large-scale geolocation data sets. Built on top of [MapLibre GL](https://maplibre.org/) and [deck.gl](https://deck.gl/), kepler.gl can render millions of points representing thousands of trips and perform spatial aggregations on the fly. |
35 | 35 |
|
@@ -151,26 +151,26 @@ const Map = props => ( |
151 | 151 |
|
152 | 152 | ### Props |
153 | 153 |
|
154 | | -| Prop Name | Type | Default Value | Description | |
155 | | -|-------------------------------|-------------|----------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| |
156 | | -| `id` | String | `map` | The unique identifier for the KeplerGl instance. Required when multiple KeplerGl instances exist. It maps to the state in the reducer (e.g. component with id `foo` can be found in`state.keplerGl.foo`). | |
157 | | -| `mapboxApiAccessToken` | String | `undefined` | API token for Mapbox, used for rendering base maps. Create a free token at [Mapbox](https://www.mapbox.com). | |
158 | | -| `getState` | Function | `state => state.keplerGl` | Function that specifies the path to the root KeplerGl state in the reducer. | |
159 | | -| `width` | Number | `800` | The width of the KeplerGl UI in pixels. | |
160 | | -| `height` | Number | `800` | The height of the KeplerGl UI in pixels. | |
161 | | -| `appName` | String | `Kepler.Gl` | The app name displayed in the side panel header. | |
162 | | -| `version` | String | `v1.0` | The version displayed in the side panel header. | |
163 | | -| `onSaveMap` | Function | `undefined` | A function called when the "Save Map URL" in side panel header is clicked. | |
164 | | -| `onViewStateChange` | Function | `undefined` | Triggered when the map viewport is updated. Receives `viewState` parameter with updated values like longitude, latitude, zoom, etc. | |
165 | | -| `getMapboxRef(mapbox, index)` | Function | `undefined` | Called when `KeplerGl` adds or removes a MapContainer with an inner Mapbox map. `mapbox` is a `MapRef` when added, or `null` when removed. `index` is `0` for the first map and `1` for the second map in a split view. | |
166 | | -| `actions` | Object | `{}` | Custom action creators to override the default KeplerGl action creators. Only use custom action when you want to modify action payload. | |
167 | | -| `mint` | Boolean | `true` | Determines whether to load a fresh empty state when mounted. When `false`, the state persists across remounts. Useful for modal use cases. | |
168 | | -| `theme` | Object/String| `null` | Set to `"dark"`, `"light"`, or `"base"`, or pass a theme object to customize KeplerGl’s style. | |
169 | | -| `mapboxApiUrl` | String | `https://api.mapbox.com` | The Mapbox API URL if you are using a custom Mapbox tile server. | |
170 | | -| `mapStylesReplaceDefault` | Boolean | `false` | Set to `true` to replace default map styles with custom ones. (see ```mapStyles``` prop) | |
171 | | -| `mapStyles` | Array | `[]` | An array of [custom map styles](#example-custom-map-style) for the map style selection panel. Styles replace the default ones if `mapStylesReplaceDefault` is `true`. | |
172 | | -| `initialUiState` | Object | `undefined` | The initial UI state applied to the `uiState` reducer. | |
173 | | -| `localeMessages` | Object | `undefined` | Used to modify or add new translations. Read more about [Localization][localization]. | |
| 154 | +| Prop Name | Type | Default Value | Description | |
| 155 | +| ----------------------------- | ------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 156 | +| `id` | String | `map` | The unique identifier for the KeplerGl instance. Required when multiple KeplerGl instances exist. It maps to the state in the reducer (e.g. component with id `foo` can be found in`state.keplerGl.foo`). | |
| 157 | +| `mapboxApiAccessToken` | String | `undefined` | API token for Mapbox, used for rendering base maps. Create a free token at [Mapbox](https://www.mapbox.com). | |
| 158 | +| `getState` | Function | `state => state.keplerGl` | Function that specifies the path to the root KeplerGl state in the reducer. | |
| 159 | +| `width` | Number | `800` | The width of the KeplerGl UI in pixels. | |
| 160 | +| `height` | Number | `800` | The height of the KeplerGl UI in pixels. | |
| 161 | +| `appName` | String | `Kepler.Gl` | The app name displayed in the side panel header. | |
| 162 | +| `version` | String | `v1.0` | The version displayed in the side panel header. | |
| 163 | +| `onSaveMap` | Function | `undefined` | A function called when the "Save Map URL" in side panel header is clicked. | |
| 164 | +| `onViewStateChange` | Function | `undefined` | Triggered when the map viewport is updated. Receives `viewState` parameter with updated values like longitude, latitude, zoom, etc. | |
| 165 | +| `getMapboxRef(mapbox, index)` | Function | `undefined` | Called when `KeplerGl` adds or removes a MapContainer with an inner Mapbox map. `mapbox` is a `MapRef` when added, or `null` when removed. `index` is `0` for the first map and `1` for the second map in a split view. | |
| 166 | +| `actions` | Object | `{}` | Custom action creators to override the default KeplerGl action creators. Only use custom action when you want to modify action payload. | |
| 167 | +| `mint` | Boolean | `true` | Determines whether to load a fresh empty state when mounted. When `false`, the state persists across remounts. Useful for modal use cases. | |
| 168 | +| `theme` | Object/String | `null` | Set to `"dark"`, `"light"`, or `"base"`, or pass a theme object to customize KeplerGl’s style. | |
| 169 | +| `mapboxApiUrl` | String | `https://api.mapbox.com` | The Mapbox API URL if you are using a custom Mapbox tile server. | |
| 170 | +| `mapStylesReplaceDefault` | Boolean | `false` | Set to `true` to replace default map styles with custom ones. (see `mapStyles` prop) | |
| 171 | +| `mapStyles` | Array | `[]` | An array of [custom map styles](#example-custom-map-style) for the map style selection panel. Styles replace the default ones if `mapStylesReplaceDefault` is `true`. | |
| 172 | +| `initialUiState` | Object | `undefined` | The initial UI state applied to the `uiState` reducer. | |
| 173 | +| `localeMessages` | Object | `undefined` | Used to modify or add new translations. Read more about [Localization][localization]. | |
174 | 174 |
|
175 | 175 | #### Example Custom Map Style |
176 | 176 |
|
|
0 commit comments