@deck.gl/carto 8.7.0-alpha.1 → 8.7.0-alpha.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/carto",
   "description": "CARTO official integration with Deck.gl. Build geospatial applications using CARTO and Deck.gl.",
   "license": "MIT",
-  "version": "8.7.0-alpha.1",
+  "version": "8.7.0-alpha.10",
   "publishConfig": {
     "access": "public"
   },
@@ -31,10 +31,11 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/loader-utils": "^3.0.8",
-    "@loaders.gl/mvt": "^3.0.8",
-    "@loaders.gl/tiles": "^3.0.8",
-    "@math.gl/web-mercator": "^3.5.4",
+    "@loaders.gl/gis": "^3.1.3",
+    "@loaders.gl/loader-utils": "^3.1.3",
+    "@loaders.gl/mvt": "^3.1.3",
+    "@loaders.gl/tiles": "^3.1.3",
+    "@math.gl/web-mercator": "^3.5.6",
     "cartocolor": "^4.0.2",
     "d3-array": "^2.8.0",
     "d3-color": "^2.0.0",
@@ -46,7 +47,7 @@
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/geo-layers": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
-    "@loaders.gl/core": "^3.0.0"
+    "@loaders.gl/core": "^3.1.3"
   },
-  "gitHead": "dbaa3941a41f3ddceecad4d2d2879515d97d2510"
+  "gitHead": "b6c48fb68b66755743c28776a0642b56a2df086a"
 }

package/src/api/layer-map.js

@@ -28,6 +28,7 @@ const SCALE_FUNCS = {
 const sharedPropMap = {
   color: 'getFillColor',
   isVisible: 'visible',
+  label: 'cartoLabel',
   textLabel: {
     alignment: 'getTextAlignmentBaseline',
     anchor: 'getTextAnchor',
@@ -117,7 +118,7 @@ function calculateDomain(data, name, scaleType) {
     // GeoJSON data type
     const values = data.features.map(({properties}) => properties[name]);
     return domainFromValues(values, scaleType);
-  } else if (Array.isArray(data) && data[0][name]) {
+  } else if (Array.isArray(data) && data[0][name] !== undefined) {
     // JSON data type
     const values = data.map(properties => properties[name]);
     return domainFromValues(values, scaleType);
@@ -139,7 +140,7 @@ export function getColorAccessor({name}, scaleType, {colors}, opacity, data) {
   const scale = SCALE_FUNCS[scaleType]();
   scale.domain(calculateDomain(data, name, scaleType));
   scale.range(colors);
-  const alpha = opacity !== undefined ? 255 * Math.pow(opacity, 1 / 2.2) : 255;
+  const alpha = opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
 
   const accessor = properties => {
     const rgba = rgb(scale(properties[name]));

package/src/api/maps-client.js

@@ -56,7 +56,7 @@ export async function getDataV2({type, source, credentials}) {
 
     default:
       throw new Error(
-        `Invalid maps API version. It shoud be ${API_VERSIONS.V1} or ${API_VERSIONS.V2}`
+        `Invalid maps API version. It should be ${API_VERSIONS.V1} or ${API_VERSIONS.V2}`
       );
   }
 }
@@ -95,15 +95,11 @@ function dealWithError({response, json, credentials}) {
   switch (response.status) {
     case 401:
       throw new Error(
-        `Unauthorized access to Maps API: invalid combination of user ('${
-          credentials.username
-        }') and apiKey ('${credentials.apiKey}')`
+        `Unauthorized access to Maps API: invalid combination of user ('${credentials.username}') and apiKey ('${credentials.apiKey}')`
       );
     case 403:
       throw new Error(
-        `Unauthorized access to dataset: the provided apiKey('${
-          credentials.apiKey
-        }') doesn't provide access to the requested data`
+        `Unauthorized access to dataset: the provided apiKey('${credentials.apiKey}') doesn't provide access to the requested data`
       );
 
     default:

package/src/api/maps-v3-client.js

@@ -7,6 +7,7 @@ import {parseMap} from './parseMap';
 import {log} from '@deck.gl/core';
 
 const MAX_GET_LENGTH = 2048;
+const DEFAULT_CLIENT = 'deck-gl-carto';
 
 /**
  * Request against Maps API
@@ -69,8 +70,8 @@ function dealWithError({response, error}) {
 /**
  * Build a URL with all required parameters
  */
-function getParameters({type, source, geoColumn, columns, schema}) {
-  const parameters = [encodeParameter('client', 'deck-gl-carto')];
+function getParameters({type, source, geoColumn, columns, schema, clientId}) {
+  const parameters = [encodeParameter('client', clientId || DEFAULT_CLIENT)];
   if (schema) {
     parameters.push(encodeParameter('schema', true));
   }
@@ -97,10 +98,11 @@ export async function mapInstantiation({
   credentials,
   geoColumn,
   columns,
-  schema
+  schema,
+  clientId
 }) {
   const baseUrl = `${credentials.mapsUrl}/${connection}/${type}`;
-  const url = `${baseUrl}?${getParameters({type, source, geoColumn, columns, schema})}`;
+  const url = `${baseUrl}?${getParameters({type, source, geoColumn, columns, schema, clientId})}`;
   const {accessToken} = credentials;
 
   const format = 'json';
@@ -109,7 +111,7 @@ export async function mapInstantiation({
     // need to be a POST request
     const body = JSON.stringify({
       q: source,
-      client: 'deck-gl-carto'
+      client: clientId || DEFAULT_CLIENT
     });
     return await request({method: 'POST', url: baseUrl, format, accessToken, body});
   }
@@ -145,7 +147,8 @@ export async function fetchLayerData({
   geoColumn,
   columns,
   format,
-  schema
+  schema,
+  clientId
 }) {
   // Internally we split data fetching into two parts to allow us to
   // conditionally fetch the actual data, depending on the metadata state
@@ -157,7 +160,8 @@ export async function fetchLayerData({
     geoColumn,
     columns,
     format,
-    schema
+    schema,
+    clientId
   });
 
   const data = await request({url, format: mapFormat, accessToken});
@@ -177,7 +181,8 @@ async function _fetchDataUrl({
   geoColumn,
   columns,
   format,
-  schema
+  schema,
+  clientId
 }) {
   const defaultCredentials = getDefaultCredentials();
   // Only pick up default credentials if they have been defined for
@@ -199,7 +204,8 @@ async function _fetchDataUrl({
     credentials: localCreds,
     geoColumn,
     columns,
-    schema
+    schema,
+    clientId
   });
   let url;
   let mapFormat;
@@ -224,7 +230,16 @@ async function _fetchDataUrl({
   return {url, accessToken, mapFormat, metadata};
 }
 
-export async function getData({type, source, connection, credentials, geoColumn, columns, format}) {
+export async function getData({
+  type,
+  source,
+  connection,
+  credentials,
+  geoColumn,
+  columns,
+  format,
+  clientId
+}) {
   log.deprecated('getData', 'fetchLayerData')();
   const layerData = await fetchLayerData({
     type,
@@ -234,20 +249,22 @@ export async function getData({type, source, connection, credentials, geoColumn,
     geoColumn,
     columns,
     format,
-    schema: false
+    schema: false,
+    clientId
   });
   return layerData.data;
 }
 
-/* global setInterval, URLSearchParams */
-async function _fetchMapDataset(dataset, accessToken) {
+/* global clearInterval, setInterval, URLSearchParams */
+async function _fetchMapDataset(dataset, accessToken, credentials, clientId) {
   // First fetch metadata
   const {connectionName: connection, source, type} = dataset;
   const {url, mapFormat} = await _fetchDataUrl({
-    credentials: {accessToken},
+    credentials: {...credentials, accessToken},
     connection,
     source,
-    type
+    type,
+    clientId
   });
 
   // Extract the last time the data changed
@@ -263,15 +280,19 @@ async function _fetchMapDataset(dataset, accessToken) {
   return true;
 }
 
-async function fillInMapDatasets({datasets, publicToken}) {
-  const promises = datasets.map(dataset => _fetchMapDataset(dataset, publicToken));
+async function fillInMapDatasets({datasets, token}, clientId, credentials) {
+  const promises = datasets.map(dataset => _fetchMapDataset(dataset, token, credentials, clientId));
   return await Promise.all(promises);
 }
 
-export async function fetchMap({mapId, credentials, autoRefresh, onNewData}) {
-  const localCreds = {...getDefaultCredentials(), ...credentials};
+export async function fetchMap({cartoMapId, clientId, credentials, autoRefresh, onNewData}) {
+  const defaultCredentials = getDefaultCredentials();
+  const localCreds = {
+    ...(defaultCredentials.apiVersion === API_VERSIONS.V3 && defaultCredentials),
+    ...credentials
+  };
 
-  log.assert(mapId, 'Must define map id');
+  log.assert(cartoMapId, `Must define CARTO map id: fetchMap({cartoMapId: 'XXXX-XXXX-XXXX'})`);
 
   log.assert(localCreds.apiVersion === API_VERSIONS.V3, 'Method only available for v3');
   log.assert(localCreds.apiBaseUrl, 'Must define apiBaseUrl');
@@ -285,21 +306,28 @@ export async function fetchMap({mapId, credentials, autoRefresh, onNewData}) {
     log.assert(autoRefresh > 0, '`autoRefresh` must be a positive number');
   }
 
-  const url = `${localCreds.mapsUrl}/public/${mapId}`;
+  const url = `${localCreds.mapsUrl}/public/${cartoMapId}`;
   const map = await request({url});
 
   // Periodically check if the data has changed. Note that this
   // will not update when a map is published.
+  let stopAutoRefresh;
   if (autoRefresh) {
-    setInterval(async () => {
-      const changed = await fillInMapDatasets(map);
+    const intervalId = setInterval(async () => {
+      const changed = await fillInMapDatasets(map, clientId, credentials);
       if (changed.some(v => v === true)) {
         onNewData(parseMap(map));
       }
     }, autoRefresh * 1000);
+    stopAutoRefresh = () => {
+      clearInterval(intervalId);
+    };
   }
 
   // Mutates map.datasets so that dataset.data contains data
-  await fillInMapDatasets(map);
-  return parseMap(map);
+  await fillInMapDatasets(map, clientId, credentials);
+  return {
+    ...parseMap(map),
+    ...{stopAutoRefresh}
+  };
 }

package/src/api/parseMap.js

@@ -20,7 +20,7 @@ export function parseMap(json) {
     description: json.description,
     createdAt: json.createdAt,
     updatedAt: json.updatedAt,
-    mapState,
+    initialViewState: mapState,
     mapStyle,
     layers: extractTextLayers(layers.reverse()).map(({id, type, config, visualChannels}) => {
       log.assert(type in LAYER_MAP, `Unsupported layer type: ${type}`);
@@ -53,17 +53,20 @@ function extractTextLayers(layers) {
         {id, config: configRest, ...rest},
 
         // One layer per valid text label, with full opacity
-        ...textLabel.filter(t => t.field).map(t => {
-          return {
-            id: `id-label-${t.field.name}`,
-            config: {
-              textLabel: t,
-              ...configRest,
-              visConfig: {...configRest.visConfig, opacity: 1}
-            },
-            ...rest
-          };
-        })
+        ...textLabel
+          .filter(t => t.field)
+          .map(t => {
+            return {
+              id: `${id}-label-${t.field.name}`,
+              config: {
+                textLabel: t,
+                ...configRest,
+                label: `${config.label}-label-${t.field.name}`,
+                visConfig: {...configRest.visConfig, opacity: 1}
+              },
+              ...rest
+            };
+          })
       ];
     })
   );
@@ -98,12 +101,6 @@ function createInteractionProps(interactionConfig) {
 }
 
 function mapProps(source, target, mapping) {
-  if (Array.isArray(source)) {
-    source = source[0];
-  }
-  if (!source) {
-    return;
-  }
   for (const sourceKey in mapping) {
     const sourceValue = source[sourceKey];
     const targetKey = mapping[sourceKey];
@@ -129,14 +126,8 @@ function createStyleProps(config, mapping) {
 
 /* eslint-disable complexity */
 function createChannelProps(visualChannels, type, config, data) {
-  const {
-    colorField,
-    colorScale,
-    sizeField,
-    sizeScale,
-    strokeColorField,
-    strokeColorScale
-  } = visualChannels;
+  const {colorField, colorScale, sizeField, sizeScale, strokeColorField, strokeColorScale} =
+    visualChannels;
   let {heightField, heightScale} = visualChannels;
   if (type === 'hexagonId') {
     heightField = sizeField;

package/src/config.js

@@ -1,60 +1,29 @@
-import {API_VERSIONS, DEFAULT_MAPS_URL_FORMAT} from './api/maps-api-common';
+import {API_VERSIONS} from './api/maps-api-common';
 
 export const defaultClassicCredentials = {
-  username: 'public',
   apiKey: 'default_public',
   region: 'us',
-  mapsUrl: null
+  username: 'public'
 };
 
-const defaultCloudNativeCredentials = {
-  accessToken: null,
-  apiBaseUrl: null,
-  mapsUrl: null
+export const defaultCloudNativeCredentials = {
+  apiBaseUrl: 'https://gcp-us-east1.api.carto.com'
 };
 
 let credentials = {};
 
 setDefaultCredentials({});
 
-export function setDefaultCredentials(opts) {
-  const apiVersion = opts.apiVersion || API_VERSIONS.V2;
+export function setDefaultCredentials({apiVersion, ...rest}) {
+  apiVersion = apiVersion || API_VERSIONS.V3;
 
   switch (apiVersion) {
     case API_VERSIONS.V1:
-      opts.mapsUrl = opts.mapsUrl || DEFAULT_MAPS_URL_FORMAT[apiVersion];
-      credentials = {
-        apiVersion,
-        ...defaultClassicCredentials,
-        ...opts
-      };
-      break;
-
     case API_VERSIONS.V2:
-      opts.mapsUrl = opts.mapsUrl || DEFAULT_MAPS_URL_FORMAT[apiVersion];
-      credentials = {
-        apiVersion,
-        ...defaultClassicCredentials,
-        ...opts
-      };
-
+      credentials = {apiVersion, ...defaultClassicCredentials, ...rest};
       break;
     case API_VERSIONS.V3:
-      if (!opts.apiBaseUrl) {
-        throw new Error(
-          `API version ${
-            API_VERSIONS.V3
-          } requires to define apiBaseUrl at credentials. Go to https://app.carto.com to get your apiBaseUrl.`
-        );
-      }
-
-      const apiBaseUrl = opts.apiBaseUrl || defaultCloudNativeCredentials.apiBaseUrl;
-      opts.mapsUrl = opts.mapsUrl || buildMapsUrlFromBase(apiBaseUrl);
-      credentials = {
-        apiVersion,
-        ...defaultCloudNativeCredentials,
-        ...opts
-      };
+      credentials = {apiVersion, ...defaultCloudNativeCredentials, ...rest};
       break;
     default:
       throw new Error(`Invalid API version ${apiVersion}. Use API_VERSIONS enum.`);

package/src/index.js

@@ -1,6 +1,4 @@
 export {getDefaultCredentials, setDefaultCredentials} from './config.js';
-export {default as CartoSQLLayer} from './layers/carto-sql-layer';
-export {default as CartoBQTilerLayer} from './layers/carto-bqtiler-layer';
 export {default as CartoLayer} from './layers/carto-layer';
 export {default as BASEMAP} from './basemap';
 export {default as colorBins} from './style/color-bins-style';

package/src/layers/carto-dynamic-tile-layer.js

@@ -0,0 +1,87 @@
+/* global TextDecoder */
+import {log} from '@deck.gl/core';
+import {ClipExtension} from '@deck.gl/extensions';
+import {MVTLayer} from '@deck.gl/geo-layers';
+import {GeoJsonLayer} from '@deck.gl/layers';
+import {geojsonToBinary} from '@loaders.gl/gis';
+import {encodeParameter} from '../api/maps-api-common';
+import {getURLFromTemplate} from '@deck.gl/geo-layers/tile-layer/utils';
+
+function parseJSON(arrayBuffer) {
+  return JSON.parse(new TextDecoder().decode(arrayBuffer));
+}
+
+function parseCartoDynamicTile(arrayBuffer, options) {
+  if (!arrayBuffer) return null;
+  const formatTiles = options && options.cartoDynamicTile && options.cartoDynamicTile.formatTiles;
+  if (formatTiles === 'geojson') return geojsonToBinary(parseJSON(arrayBuffer).features);
+  return null;
+}
+
+const CartoDynamicTileLoader = {
+  name: 'CARTO Dynamic Tile',
+  id: 'cartoDynamicTile',
+  module: 'carto',
+  extensions: ['pbf'],
+  mimeTypes: ['application/x-protobuf'],
+  category: 'geometry',
+  worker: false,
+  parse: async (arrayBuffer, options) => parseCartoDynamicTile(arrayBuffer, options),
+  parseSync: parseCartoDynamicTile,
+  options: {
+    cartoDynamicTile: {
+      formatTiles: 'geojson'
+    }
+  }
+};
+
+export default class CartoDynamicTileLayer extends MVTLayer {
+  getTileData(tile) {
+    let url = getURLFromTemplate(this.state.data, tile);
+    if (!url) {
+      return Promise.reject('Invalid URL');
+    }
+
+    let loadOptions = this.getLoadOptions();
+    const {fetch, formatTiles} = this.props;
+    const {signal} = tile;
+
+    loadOptions = {
+      ...loadOptions,
+      mimeType: 'application/x-protobuf'
+    };
+
+    if (formatTiles) {
+      log.assert(
+        ['geojson'].includes(formatTiles),
+        `Invalid value for formatTiles: ${formatTiles}`
+      );
+      url += `&${encodeParameter('formatTiles', formatTiles)}`;
+      loadOptions.cartoBinaryTile = {formatTiles};
+    }
+
+    return fetch(url, {propName: 'data', layer: this, loadOptions, signal});
+  }
+
+  renderSubLayers(props) {
+    if (props.data === null) {
+      return null;
+    }
+
+    props.autoHighlight = false;
+
+    const {
+      bbox: {west, south, east, north}
+    } = props.tile;
+    props.extensions = [new ClipExtension()];
+    props.clipBounds = [west, south, east, north];
+
+    const subLayer = new GeoJsonLayer({
+      ...props
+    });
+    return subLayer;
+  }
+}
+
+CartoDynamicTileLayer.layerName = 'CartoDynamicTileLayer';
+CartoDynamicTileLayer.defaultProps = {...MVTLayer.defaultProps, loaders: [CartoDynamicTileLoader]};

package/src/layers/carto-layer.js

@@ -1,8 +1,9 @@
 import {CompositeLayer, log} from '@deck.gl/core';
+import CartoDynamicTileLayer from './carto-dynamic-tile-layer';
 import {MVTLayer} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
-import {getData, getDataV2, API_VERSIONS} from '../api';
-import {MAP_TYPES} from '../api/maps-api-common';
+import {fetchLayerData, getDataV2, API_VERSIONS} from '../api';
+import {FORMATS, MAP_TYPES} from '../api/maps-api-common';
 import {getDefaultCredentials} from '../config';
 
 const defaultProps = {
@@ -12,6 +13,7 @@ const defaultProps = {
   type: null,
   onDataLoad: {type: 'function', value: data => {}, compare: false},
   onDataError: {type: 'function', value: null, compare: false, optional: true},
+  uniqueIdProperty: 'cartodb_id',
 
   // override carto credentials for the layer, set to null to read from default
   credentials: null,
@@ -22,6 +24,12 @@ const defaultProps = {
   // (String, required): connection name at CARTO platform
   connection: null,
 
+  // (String, optional): format of data
+  format: null,
+
+  // (String, optional): clientId identifier used for internal tracing, place here a string to identify the client who is doing the request.
+  clientId: null,
+
   // (String, optional): name of the `geo_column` in the CARTO platform. Use this override the default column ('geom'), from which the geometry information should be fetched.
   geoColumn: null,
 
@@ -93,29 +101,19 @@ export default class CartoLayer extends CompositeLayer {
 
   async _updateData() {
     try {
-      const {type, data: source, connection, credentials, geoColumn, columns} = this.props;
+      const {type, data: source, clientId, credentials, ...rest} = this.props;
       const localConfig = {...getDefaultCredentials(), ...credentials};
       const {apiVersion} = localConfig;
 
-      let data;
-
-      if (apiVersion === API_VERSIONS.V3) {
-        data = await getData({
-          type,
-          source,
-          connection,
-          credentials,
-          geoColumn,
-          columns
-        });
-      } else if (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
-        data = await getDataV2({type, source, credentials});
+      let result;
+      if (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
+        result = {data: await getDataV2({type, source, credentials})};
       } else {
-        log.assert(`Unknow apiVersion ${apiVersion}. Use API_VERSIONS enum.`);
+        result = await fetchLayerData({type, source, clientId, credentials, ...rest});
       }
 
-      this.setState({data, apiVersion});
-      this.props.onDataLoad(data);
+      this.setState({...result, apiVersion});
+      this.props.onDataLoad(result.data);
     } catch (err) {
       if (this.props.onDataError) {
         this.props.onDataError(err);
@@ -126,26 +124,28 @@ export default class CartoLayer extends CompositeLayer {
   }
 
   renderLayers() {
-    const {data, apiVersion} = this.state;
-    const {type} = this.props;
+    const {data, format, apiVersion} = this.state;
 
     if (!data) return null;
 
-    const {updateTriggers} = this.props;
+    const {type, updateTriggers} = this.props;
 
     let layer;
 
-    if (
+    if (apiVersion === API_VERSIONS.V3 && type === MAP_TYPES.TABLE && format === FORMATS.TILEJSON) {
+      layer = CartoDynamicTileLayer;
+    } else if (
       apiVersion === API_VERSIONS.V1 ||
       apiVersion === API_VERSIONS.V2 ||
-      type === MAP_TYPES.TILESET
+      format === FORMATS.TILEJSON
     ) {
       layer = MVTLayer;
     } else {
       layer = GeoJsonLayer;
     }
 
-    const props = {...this.props};
+    const {uniqueIdProperty} = defaultProps;
+    const props = {uniqueIdProperty, ...this.props};
     delete props.data;
 
     // eslint-disable-next-line new-cap

package/src/style/color-bins-style.js

@@ -10,11 +10,9 @@ export default function colorBins({
 }) {
   assert(Array.isArray(domain), 'Expected "domain" to be an array of numbers');
 
-  const palette = typeof colors === 'string' ? getPalette(colors, domain.length) : colors;
+  const palette = typeof colors === 'string' ? getPalette(colors, domain.length + 1) : colors;
 
-  const color = scaleThreshold()
-    .domain(domain)
-    .range(palette);
+  const color = scaleThreshold().domain(domain).range(palette);
 
   return d => {
     const value = getAttrValue(attr, d);

package/src/style/color-continuous-style.js

@@ -10,10 +10,8 @@ export default function colorContinuous({
 }) {
   assert(Array.isArray(domain), 'Expected "domain" to be an array of numbers');
 
-  const palette = typeof colors === 'string' ? getPalette(colors) : colors;
-  const color = scaleLinear()
-    .domain(domain)
-    .range(palette);
+  const palette = typeof colors === 'string' ? getPalette(colors, domain.length) : colors;
+  const color = scaleLinear().domain(domain).range(palette);
 
   return d => {
     const value = getAttrValue(attr, d);