-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
CARTO cloud native integration (#5859)
- Loading branch information
Showing
32 changed files
with
1,640 additions
and
639 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| # CartoLayer | ||
|
|
||
| `CartoLayer` is the layer to visualize data using the CARTO Maps API. | ||
|
|
||
| ## Usage | ||
|
|
||
| ```js | ||
| import DeckGL from '@deck.gl/react'; | ||
| import {CartoLayer, setDefaultCredentials, MAP_TYPES, API_VERSIONS} from '@deck.gl/carto'; | ||
|
|
||
| setDefaultCredentials({ | ||
| apiVersion: API_VERSIONS.V2, | ||
| username: 'public', | ||
| apiKey: 'default_public' | ||
| }); | ||
|
|
||
| function App({viewState}) { | ||
| const layer = new CartoLayer({ | ||
| type: MAP_TYPES.QUERY, | ||
| data: 'SELECT * FROM world_population_2015', | ||
| pointRadiusMinPixels: 2, | ||
| getLineColor: [0, 0, 0, 125], | ||
| getFillColor: [238, 77, 90], | ||
| lineWidthMinPixels: 1 | ||
| }) | ||
|
|
||
| return <DeckGL viewState={viewState} layers={[layer]} />; | ||
| } | ||
| ``` | ||
|
|
||
| ## Usage Carto Cloud Native | ||
|
|
||
| ```js | ||
| import DeckGL from '@deck.gl/react'; | ||
| import {CartoLayer, setDefaultCredentials, MAP_TYPES, API_VERSIONS} from '@deck.gl/carto'; | ||
|
|
||
| setDefaultCredentials({ | ||
| apiVersion: API_VERSIONS.V3 | ||
| apiBaseUrl: 'https://gcp-us-east1.api.carto.com', | ||
| accessToken: 'XXX', | ||
| }); | ||
|
|
||
| function App({viewState}) { | ||
| const layer = new CartoLayer({ | ||
| type: MAP_TYPES.QUERY, | ||
| connection: 'bigquery', | ||
| data: 'SELECT * FROM cartobq.testtables.points_10k', | ||
| pointRadiusMinPixels: 2, | ||
| getLineColor: [0, 0, 0, 200], | ||
| getFillColor: [238, 77, 90], | ||
| lineWidthMinPixels: 1 | ||
| }) | ||
|
|
||
| return <DeckGL viewState={viewState} layers={[layer]} />; | ||
| } | ||
| ``` | ||
|
|
||
| > **CARTO Cloud Native** is currently available only in a private beta. If you want to test it, please contact us at [support@carto.com](mailto:support@carto.com?subject=Access%20to%20Cloud%20%Native%20%API%20(v3)). | ||
| ## Installation | ||
|
|
||
| To install the dependencies from NPM: | ||
|
|
||
| ```bash | ||
| npm install deck.gl | ||
| # or | ||
| npm install @deck.gl/core @deck.gl/layers @deck.gl/carto | ||
| ``` | ||
|
|
||
| ```js | ||
| import {CartoLayer} from '@deck.gl/carto'; | ||
| new CartoLayer({}); | ||
| ``` | ||
|
|
||
| To use pre-bundled scripts: | ||
|
|
||
| ```html | ||
| <script src="https://unpkg.com/deck.gl@^8.5.0/dist.min.js"></script> | ||
| <script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script> | ||
|
|
||
| <!-- or --> | ||
| <script src="https://unpkg.com/@deck.gl/core@^8.5.0/dist.min.js"></script> | ||
| <script src="https://unpkg.com/@deck.gl/layers@^8.5.0/dist.min.js"></script> | ||
| <script src="https://unpkg.com/@deck.gl/geo-layers@^8.5.0/dist.min.js"></script> | ||
| <script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script> | ||
| ``` | ||
|
|
||
| ```js | ||
| new deck.carto.CartoLayer({}); | ||
| ``` | ||
|
|
||
| ## Properties | ||
|
|
||
| This layer allows to work with the different CARTO Maps API versions (v1, v2 and v3). When using version v1 and v2, the layer always works with vector tiles so it inherits all properties from [`MVTLayer`](/docs/api-reference/geo-layers/mvt-layer.md). When using v3, the layer works with vector tiles if the `type` property is `MAP_TYPES.TILESET` and with GeoJSON data if the `type` is `MAP_TYPES.QUERY` or `MAP_TYPES.TABLE`. When using GeoJSON data, the layer inherits all properties from [`GeoJsonLayer`](/docs/api-reference/layers/geojson-layer.md). | ||
|
|
||
| ##### `data` (String) | ||
|
|
||
| Required. Either a SQL query or a name of dataset/tileset. | ||
|
|
||
| ##### `type` (String) | ||
|
|
||
| Required. Data type. Possible values are: | ||
|
|
||
| - `MAP_TYPES.QUERY`, if `data` is a SQL query. | ||
| - `MAP_TYPES.TILESET`, if `data` is a tileset name. | ||
| - `MAP_TYPES.TABLE`, if `data` is a dataset name. Only supported with API v3. | ||
|
|
||
| ##### `connection` (String) | ||
|
|
||
| Required when apiVersion is `API_VERSIONS.V3`. | ||
|
|
||
| Name of the connection registered in the [CARTO workspace]. | ||
|
|
||
| ##### `uniqueIdProperty` (String) | ||
|
|
||
| * Default: `cartodb_id` | ||
|
|
||
| Optional. A string pointing to a unique attribute at the result of the query. A unique attribute is needed for highlighting with vector tiles when a feature is split across two or more tiles. | ||
|
|
||
| ##### `credentials` (Object) | ||
|
|
||
| Optional. Overrides the configuration to connect with CARTO. Check the parameters [here](overview#carto-credentials). | ||
|
|
||
|
|
||
| ### Callbacks | ||
|
|
||
| #### `onDataLoad` (Function, optional) | ||
|
|
||
| `onDataLoad` is called when the request to the CARTO Maps API was completed successfully. | ||
|
|
||
| * Default: `data => {}` | ||
|
|
||
| Receives arguments: | ||
|
|
||
| * `data` (Object) - Data received from CARTO Maps API | ||
|
|
||
| ##### `onDataError` (Function, optional) | ||
|
|
||
| `onDataError` is called when the request to the CARTO Maps API failed. By default the Error is thrown. | ||
|
|
||
| * Default: `null` | ||
|
|
||
| Receives arguments: | ||
|
|
||
| * `error` (`Error`) | ||
|
|
||
| ## Source | ||
|
|
||
| [modules/carto/src/layers/carto-layer.js](https://github.com/visgl/deck.gl/tree/master/modules/carto/src/layers/carto-layer.js) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.