Skip to content

Commit 972de85

Browse files
alasarralasarr
authored
CARTO cloud native integration (visgl#5859)
1 parent aa22186 commit 972de85

32 files changed

+1640
-639
lines changed

‎docs/api-reference/carto/basemap.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,14 +35,14 @@ import {BASEMAP} from '@deck.gl/carto';
3535
To use pre-bundled scripts:
3636

3737
```html
38-
<script src="https://unpkg.com/deck.gl@^8.2.0/dist.min.js"></script>
39-
<script src="https://unpkg.com/@deck.gl/carto@^8.2.0/dist.min.js"></script>
38+
<script src="https://unpkg.com/deck.gl@^8.5.0/dist.min.js"></script>
39+
<script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script>
4040

4141
<!-- or -->
42-
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
43-
<script src="https://unpkg.com/@deck.gl/layers@^8.2.0/dist.min.js"></script>
44-
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.2.0/dist.min.js"></script>
45-
<script src="https://unpkg.com/@deck.gl/carto@^8.2.0/dist.min.js"></script>
42+
<script src="https://unpkg.com/@deck.gl/core@^8.5.0/dist.min.js"></script>
43+
<script src="https://unpkg.com/@deck.gl/layers@^8.5.0/dist.min.js"></script>
44+
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.5.0/dist.min.js"></script>
45+
<script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script>
4646
```
4747

4848
```js

‎docs/api-reference/carto/carto-bqtiler-layer.md‎

Lines changed: 35 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
2-
31
# CartoBQTilerLayer
2+
>CartoBQTilerLayer will be deprecated in future versions. Use CartoLayer instead. If you've existing code using this layer, check [the migration steps](#migration-to-cartolayer).
43
54
`CartoBQTilerLayer` is a layer to visualize large datasets (millions or billions of rows) directly from [Google BigQuery](https://cloud.google.com/bigquery) without having to move data outside of BigQuery.
65

7-
First you need first to generate a tileset of your dataset in your BigQuery account using CARTO BigQuery Tiler. For more info click [here](https://carto.com/bigquery/beta/).
8-
6+
First you need first to generate a tileset of your dataset in your BigQuery account using CARTO BigQuery Tiler. For more info click [here](https://carto.com/bigquery-tiler/).
7+
98
```js
109
import DeckGL from '@deck.gl/react';
1110
import {CartoBQTilerLayer} from '@deck.gl/carto';
@@ -23,6 +22,28 @@ function App({viewState}) {
2322
}
2423
```
2524

25+
## Migration to CartoLayer
26+
27+
To migrate from `CartoBQTilerLayer` to `CartoLayer` you only need to change the layer name and set `type` property to `MAP_TYPES.TILESET`:
28+
29+
```js
30+
import DeckGL from '@deck.gl/react';
31+
import {CartoLayer, MAP_TYPES} from '@deck.gl/carto';
32+
33+
function App({viewState}) {
34+
const layer = new CartoLayer({
35+
type: MAP_TYPES.TILESET,
36+
data: 'cartobq.maps.nyc_taxi_points_demo_id',
37+
getLineColor: [255, 255, 255],
38+
getFillColor: [238, 77, 90],
39+
pointRadiusMinPixels: 2,
40+
lineWidthMinPixels: 1
41+
});
42+
43+
return <DeckGL viewState={viewState} layers={[layer]} />;
44+
}
45+
```
46+
2647
## Installation
2748

2849
To install the dependencies from NPM:
@@ -41,14 +62,14 @@ new CartoBQTilerLayer({});
4162
To use pre-bundled scripts:
4263

4364
```html
44-
<script src="https://unpkg.com/deck.gl@^8.2.0/dist.min.js"></script>
45-
<script src="https://unpkg.com/@deck.gl/carto@^8.2.0/dist.min.js"></script>
65+
<script src="https://unpkg.com/deck.gl@^8.5.0/dist.min.js"></script>
66+
<script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script>
4667

4768
<!-- or -->
48-
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
49-
<script src="https://unpkg.com/@deck.gl/layers@^8.2.0/dist.min.js"></script>
50-
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.2.0/dist.min.js"></script>
51-
<script src="https://unpkg.com/@deck.gl/carto@^8.2.0/dist.min.js"></script>
69+
<script src="https://unpkg.com/@deck.gl/core@^8.5.0/dist.min.js"></script>
70+
<script src="https://unpkg.com/@deck.gl/layers@^8.5.0/dist.min.js"></script>
71+
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.5.0/dist.min.js"></script>
72+
<script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script>
5273
```
5374

5475
```js
@@ -73,6 +94,10 @@ Optional. Needed for highlighting a feature split across two or more tiles if no
7394

7495
A string pointing to a tile attribute containing a unique identifier for features across tiles.
7596

97+
##### `credentials` (Object)
98+
99+
Optional. Overrides the configuration to connect with CARTO. Check the parameters [here](overview#carto-credentials).
100+
76101
### Callbacks
77102

78103
#### `onDataLoad` (Function, optional)

‎docs/api-reference/carto/carto-layer.md‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
# CartoLayer
2+
3+
`CartoLayer` is the layer to visualize data using the CARTO Maps API.
4+
5+
## Usage
6+
7+
```js
8+
import DeckGL from '@deck.gl/react';
9+
import {CartoLayer, setDefaultCredentials, MAP_TYPES, API_VERSIONS} from '@deck.gl/carto';
10+
11+
setDefaultCredentials({
12+
apiVersion: API_VERSIONS.V2,
13+
username: 'public',
14+
apiKey: 'default_public'
15+
});
16+
17+
function App({viewState}) {
18+
const layer = new CartoLayer({
19+
type: MAP_TYPES.QUERY,
20+
data: 'SELECT * FROM world_population_2015',
21+
pointRadiusMinPixels: 2,
22+
getLineColor: [0, 0, 0, 125],
23+
getFillColor: [238, 77, 90],
24+
lineWidthMinPixels: 1
25+
})
26+
27+
return <DeckGL viewState={viewState} layers={[layer]} />;
28+
}
29+
```
30+
31+
## Usage Carto Cloud Native
32+
33+
```js
34+
import DeckGL from '@deck.gl/react';
35+
import {CartoLayer, setDefaultCredentials, MAP_TYPES, API_VERSIONS} from '@deck.gl/carto';
36+
37+
setDefaultCredentials({
38+
apiVersion: API_VERSIONS.V3
39+
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
40+
accessToken: 'XXX',
41+
});
42+
43+
function App({viewState}) {
44+
const layer = new CartoLayer({
45+
type: MAP_TYPES.QUERY,
46+
connection: 'bigquery',
47+
data: 'SELECT * FROM cartobq.testtables.points_10k',
48+
pointRadiusMinPixels: 2,
49+
getLineColor: [0, 0, 0, 200],
50+
getFillColor: [238, 77, 90],
51+
lineWidthMinPixels: 1
52+
})
53+
54+
return <DeckGL viewState={viewState} layers={[layer]} />;
55+
}
56+
```
57+
58+
> **CARTO Cloud Native** is currently available only in a private beta. If you want to test it, please contact us at [[email protected]](mailto:[email protected]?subject=Access%20to%20Cloud%20%Native%20%API%20(v3)).
59+
60+
## Installation
61+
62+
To install the dependencies from NPM:
63+
64+
```bash
65+
npm install deck.gl
66+
# or
67+
npm install @deck.gl/core @deck.gl/layers @deck.gl/carto
68+
```
69+
70+
```js
71+
import {CartoLayer} from '@deck.gl/carto';
72+
new CartoLayer({});
73+
```
74+
75+
To use pre-bundled scripts:
76+
77+
```html
78+
<script src="https://unpkg.com/deck.gl@^8.5.0/dist.min.js"></script>
79+
<script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script>
80+
81+
<!-- or -->
82+
<script src="https://unpkg.com/@deck.gl/core@^8.5.0/dist.min.js"></script>
83+
<script src="https://unpkg.com/@deck.gl/layers@^8.5.0/dist.min.js"></script>
84+
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.5.0/dist.min.js"></script>
85+
<script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script>
86+
```
87+
88+
```js
89+
new deck.carto.CartoLayer({});
90+
```
91+
92+
## Properties
93+
94+
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).
95+
96+
##### `data` (String)
97+
98+
Required. Either a SQL query or a name of dataset/tileset.
99+
100+
##### `type` (String)
101+
102+
Required. Data type. Possible values are:
103+
104+
- `MAP_TYPES.QUERY`, if `data` is a SQL query.
105+
- `MAP_TYPES.TILESET`, if `data` is a tileset name.
106+
- `MAP_TYPES.TABLE`, if `data` is a dataset name. Only supported with API v3.
107+
108+
##### `connection` (String)
109+
110+
Required when apiVersion is `API_VERSIONS.V3`.
111+
112+
Name of the connection registered in the [CARTO workspace].
113+
114+
##### `uniqueIdProperty` (String)
115+
116+
* Default: `cartodb_id`
117+
118+
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.
119+
120+
##### `credentials` (Object)
121+
122+
Optional. Overrides the configuration to connect with CARTO. Check the parameters [here](overview#carto-credentials).
123+
124+
125+
### Callbacks
126+
127+
#### `onDataLoad` (Function, optional)
128+
129+
`onDataLoad` is called when the request to the CARTO Maps API was completed successfully.
130+
131+
* Default: `data => {}`
132+
133+
Receives arguments:
134+
135+
* `data` (Object) - Data received from CARTO Maps API
136+
137+
##### `onDataError` (Function, optional)
138+
139+
`onDataError` is called when the request to the CARTO Maps API failed. By default the Error is thrown.
140+
141+
* Default: `null`
142+
143+
Receives arguments:
144+
145+
* `error` (`Error`)
146+
147+
## Source
148+
149+
[modules/carto/src/layers/carto-layer.js](https://github.com/visgl/deck.gl/tree/master/modules/carto/src/layers/carto-layer.js)

‎docs/api-reference/carto/carto-sql-layer.md‎

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
2-
31
# CartoSQLLayer
2+
>CartoSQLLayer will be deprecated in future versions. Use CartoLayer instead. If you've existing code using this layer, check [the migration steps](#migration-to-cartolayer).
43
54
`CartoSQLLayer` is a layer to visualize data hosted in your CARTO account and to apply custom SQL.
6-
5+
76
```js
87
import DeckGL from '@deck.gl/react';
98
import {CartoSQLLayer, setDefaultCredentials} from '@deck.gl/carto';
@@ -17,7 +16,34 @@ function App({viewState}) {
1716
const layer = new CartoSQLLayer({
1817
data: 'SELECT * FROM world_population_2015',
1918
pointRadiusMinPixels: 2,
20-
getLineColor: [0, 0, 0, 0.75],
19+
getLineColor: [0, 0, 0, 125],
20+
getFillColor: [238, 77, 90],
21+
lineWidthMinPixels: 1
22+
})
23+
24+
return <DeckGL viewState={viewState} layers={[layer]} />;
25+
}
26+
```
27+
28+
## Migration to CartoLayer
29+
30+
To migrate from `CartoSQLLayer` to `CartoLayer` you only need to change the layer name and set `type` property to `MAP_TYPES.QUERY`:
31+
32+
```js
33+
import DeckGL from '@deck.gl/react';
34+
import {CartoLayer, setDefaultCredentials, MAP_TYPES} from '@deck.gl/carto';
35+
36+
setDefaultCredentials({
37+
username: 'public',
38+
apiKey: 'default_public'
39+
});
40+
41+
function App({viewState}) {
42+
const layer = new CartoLayer({
43+
type: MAP_TYPES.QUERY,
44+
data: 'SELECT * FROM world_population_2015',
45+
pointRadiusMinPixels: 2,
46+
getLineColor: [0, 0, 0, 125],
2147
getFillColor: [238, 77, 90],
2248
lineWidthMinPixels: 1
2349
})
@@ -44,14 +70,14 @@ new CartoSQLLayer({});
4470
To use pre-bundled scripts:
4571

4672
```html
47-
<script src="https://unpkg.com/deck.gl@^8.2.0/dist.min.js"></script>
48-
<script src="https://unpkg.com/@deck.gl/carto@^8.2.0/dist.min.js"></script>
73+
<script src="https://unpkg.com/deck.gl@^8.5.0/dist.min.js"></script>
74+
<script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script>
4975

5076
<!-- or -->
51-
<script src="https://unpkg.com/@deck.gl/core@^8.0.0/dist.min.js"></script>
52-
<script src="https://unpkg.com/@deck.gl/layers@^8.2.0/dist.min.js"></script>
53-
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.2.0/dist.min.js"></script>
54-
<script src="https://unpkg.com/@deck.gl/carto@^8.2.0/dist.min.js"></script>
77+
<script src="https://unpkg.com/@deck.gl/core@^8.5.0/dist.min.js"></script>
78+
<script src="https://unpkg.com/@deck.gl/layers@^8.5.0/dist.min.js"></script>
79+
<script src="https://unpkg.com/@deck.gl/geo-layers@^8.5.0/dist.min.js"></script>
80+
<script src="https://unpkg.com/@deck.gl/carto@^8.5.0/dist.min.js"></script>
5581
```
5682

5783
```js
@@ -74,32 +100,9 @@ Required. Either a sql query or a name of dataset
74100

75101
Optional. A string pointing to a unique attribute at the result of the query. A unique attribute is needed for highlighting a feature split across two or more tiles.
76102

77-
78103
##### `credentials` (Object)
79104

80-
Optional. Object with the credentials to connect with CARTO.
81-
82-
* Default:
83-
84-
```js
85-
{
86-
username: 'public',
87-
apiKey: 'default_public'
88-
}
89-
```
90-
91-
##### `bufferSize` (Number)
92-
93-
Optional. MVT BufferSize in tile coordinate space as defined by MVT specification
94-
95-
* Default: `16`
96-
97-
98-
##### `tileExtent` (String)
99-
100-
Optional. Tile extent in tile coordinate space as defined by MVT specification.
101-
102-
* Default: `4096`
105+
Optional. Overrides the configuration to connect with CARTO. Check the parameters [here](overview#carto-credentials).
103106

104107
### Callbacks
105108

0 commit comments

Comments
 (0)