@deck.gl/carto 8.7.0-beta.4 → 8.7.0-beta.7

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-beta.4",
+  "version": "8.7.0-beta.7",
   "publishConfig": {
     "access": "public"
   },
@@ -35,6 +35,7 @@
     "@loaders.gl/loader-utils": "^3.1.5",
     "@loaders.gl/mvt": "^3.1.5",
     "@loaders.gl/tiles": "^3.1.5",
+    "@luma.gl/constants": "^8.5.10",
     "@math.gl/web-mercator": "^3.5.7",
     "cartocolor": "^4.0.2",
     "d3-array": "^2.8.0",
@@ -44,11 +45,16 @@
     "moment-timezone": "^0.5.33",
     "pbf": "^3.2.1"
   },
+  "devDependencies": {
+    "@types/d3-array": "^3.0.2",
+    "@types/d3-color": "^1.4.2",
+    "@types/d3-scale": "^3.0.0"
+  },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
     "@deck.gl/geo-layers": "^8.0.0",
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.1.5"
   },
-  "gitHead": "fc41a854c97a421dec38411fc593bcdf625cdf84"
+  "gitHead": "32b25b0d1c4d2985b021eb15f2b2245d81b574bd"
 }

package/src/api/{layer-map.js → layer-map.ts}

@@ -11,9 +11,11 @@ import {
 } from 'd3-scale';
 import {format as d3Format} from 'd3-format';
 import moment from 'moment-timezone';
-import {log} from '@deck.gl/core';
 import {H3HexagonLayer, MVTLayer} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
+import CartoTileLayer from '../layers/carto-tile-layer';
+import {TILE_FORMATS} from './maps-api-common';
+import {assert} from '../utils';
 
 const SCALE_FUNCS = {
   linear: scaleLinear,
@@ -24,6 +26,7 @@ const SCALE_FUNCS = {
   quantize: scaleQuantize,
   sqrt: scaleSqrt
 };
+export type SCALE_TYPE = keyof typeof SCALE_FUNCS;
 
 // Kepler -> Deck.gl
 const sharedPropMap = {
@@ -63,9 +66,16 @@ function mergePropMaps(a, b) {
   return {...a, ...b, visConfig: {...a.visConfig, ...b.visConfig}};
 }
 
-export function getLayer(type, config) {
-  const hexagonId = config.columns?.hex_id;
+export function getLayer(
+  type: string,
+  config,
+  dataset
+): {Layer: any; propMap: any; defaultProps: any} {
+  if (type === 'mvt' || type === 'tileset') {
+    return getTileLayer(dataset);
+  }
 
+  const hexagonId = config.columns?.hex_id;
   const layer = {
     point: {
       Layer: GeoJsonLayer,
@@ -85,25 +95,36 @@ export function getLayer(type, config) {
         visConfig: {coverage: 'coverage', elevationScale: 'elevationScale'}
       }),
       defaultProps: {...defaultProps, getHexagon: d => d[hexagonId]}
-    },
-    mvt: {
-      Layer: MVTLayer,
-      propMap: sharedPropMap,
-      defaultProps: {
-        ...defaultProps,
-        pointRadiusScale: 0.3,
-        lineWidthScale: 2,
-        uniqueIdProperty: 'geoid'
-      }
     }
   }[type];
 
-  log.assert(layer, `Unsupported layer type: ${type}`);
-
+  assert(layer, `Unsupported layer type: ${type}`);
   return layer;
 }
 
-function domainFromAttribute(attribute, scaleType) {
+function getTileLayer(dataset) {
+  const {
+    data: {
+      tiles: [tileUrl]
+    }
+  } = dataset;
+  /* global URL */
+  const formatTiles = new URL(tileUrl).searchParams.get('formatTiles') || TILE_FORMATS.MVT;
+
+  return {
+    Layer: formatTiles === TILE_FORMATS.MVT ? MVTLayer : CartoTileLayer,
+    propMap: sharedPropMap,
+    defaultProps: {
+      ...defaultProps,
+      pointRadiusScale: 0.3,
+      lineWidthScale: 2,
+      uniqueIdProperty: 'geoid',
+      formatTiles
+    }
+  };
+}
+
+function domainFromAttribute(attribute, scaleType: SCALE_TYPE) {
   if (scaleType === 'ordinal' || scaleType === 'point') {
     return attribute.categories.map(c => c.category).filter(c => c !== undefined && c !== null);
   }
@@ -115,13 +136,13 @@ function domainFromAttribute(attribute, scaleType) {
   return [min, attribute.max];
 }
 
-function domainFromValues(values, scaleType) {
+function domainFromValues(values, scaleType: SCALE_TYPE) {
   if (scaleType === 'ordinal') {
     return [...new Set(values)].sort();
   } else if (scaleType === 'quantile') {
     return values.sort((a, b) => a - b);
   } else if (scaleType === 'log') {
-    const [d0, d1] = extent(values);
+    const [d0, d1] = extent(values as number[]);
     return [d0 === 0 ? 1e-5 : d0, d1];
   }
   return extent(values);
@@ -155,8 +176,14 @@ function normalizeAccessor(accessor, data) {
   return accessor;
 }
 
-export function getColorAccessor({name}, scaleType, {colors}, opacity, data) {
-  const scale = SCALE_FUNCS[scaleType]();
+export function getColorAccessor(
+  {name},
+  scaleType: SCALE_TYPE,
+  {colors},
+  opacity: number | undefined,
+  data: any
+) {
+  const scale = SCALE_FUNCS[scaleType as any]();
   scale.domain(calculateDomain(data, name, scaleType));
   scale.range(colors);
   const alpha = opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
@@ -168,8 +195,8 @@ export function getColorAccessor({name}, scaleType, {colors}, opacity, data) {
   return normalizeAccessor(accessor, data);
 }
 
-export function getSizeAccessor({name}, scaleType, range, data) {
-  const scale = SCALE_FUNCS[scaleType]();
+export function getSizeAccessor({name}, scaleType: SCALE_TYPE, range: Iterable<Range>, data: any) {
+  const scale = SCALE_FUNCS[scaleType as any]();
   scale.domain(calculateDomain(data, name, scaleType));
   scale.range(range);
 
@@ -179,7 +206,7 @@ export function getSizeAccessor({name}, scaleType, range, data) {
   return normalizeAccessor(accessor, data);
 }
 
-const FORMATS = {
+const FORMATS: Record<string, (value: any) => string> = {
   date: s => moment.utc(s).format('MM/DD/YY HH:mm:ssa'),
   integer: d3Format('i'),
   float: d3Format('.5f'),

package/src/api/maps-api-common.ts

@@ -0,0 +1,76 @@
+export const DEFAULT_USER_COMPONENT_IN_URL = '{user}';
+export const DEFAULT_REGION_COMPONENT_IN_URL = '{region}';
+
+export type ValuesOf<T extends {}> = T[keyof T];
+export const API_VERSIONS = {
+  V1: 'v1',
+  V2: 'v2',
+  V3: 'v3'
+} as const;
+export type ApiVersion = ValuesOf<typeof API_VERSIONS>;
+
+export const DEFAULT_MAPS_URL_FORMAT = {
+  [API_VERSIONS.V1]: `https://${DEFAULT_USER_COMPONENT_IN_URL}.carto.com/api/v1/map`,
+  [API_VERSIONS.V2]: `https://maps-api-v2.${DEFAULT_REGION_COMPONENT_IN_URL}.carto.com/user/${DEFAULT_USER_COMPONENT_IN_URL}`
+} as const;
+
+export const MAP_TYPES = {
+  QUERY: 'query',
+  TABLE: 'table',
+  TILESET: 'tileset'
+} as const;
+export type MapType = ValuesOf<typeof MAP_TYPES>;
+
+// AVAILABLE FORMATS
+export const FORMATS = {
+  GEOJSON: 'geojson',
+  NDJSON: 'ndjson',
+  TILEJSON: 'tilejson',
+  JSON: 'json'
+} as const;
+export type Format = ValuesOf<typeof FORMATS>;
+
+// AVAILABLE FORMATS FOR TILES
+export const TILE_FORMATS = {
+  MVT: 'mvt',
+  GEOJSON: 'geojson',
+  BINARY: 'binary'
+} as const;
+export type TileFormat = ValuesOf<typeof TILE_FORMATS>;
+
+export enum SchemaFieldType {
+  Number = 'number',
+  Bigint = 'bigint',
+  String = 'string',
+  Geometry = 'geometry',
+  Timestamp = 'timestamp',
+  Object = 'object',
+  Boolean = 'boolean',
+  Variant = 'variant',
+  Unknown = 'unknown'
+}
+export interface SchemaField {
+  name: string;
+  type: SchemaFieldType; // Field type in the CARTO stack, common for all providers
+}
+
+export interface MapInstantiation extends MapInstantiationFormats {
+  nrows: number;
+  size?: number;
+  schema?: SchemaField[];
+}
+
+type MapInstantiationFormats = Record<
+  Format,
+  {
+    url: string[];
+    error?: any;
+  }
+>;
+
+/**
+ * Simple encode parameter
+ */
+export function encodeParameter(name: string, value: string | boolean | number): string {
+  return `${name}=${encodeURIComponent(value)}`;
+}

package/src/api/{maps-client.js → maps-client.ts}

@@ -1,13 +1,19 @@
 /**
  * Maps API Client for Maps API v1 and Maps API v2
  */
-import {defaultClassicCredentials, getDefaultCredentials} from '../config';
+import {
+  ClassicCredentials,
+  defaultClassicCredentials,
+  defaultCloudNativeCredentials,
+  getDefaultCredentials
+} from '../config';
 import {
   API_VERSIONS,
   DEFAULT_MAPS_URL_FORMAT,
   DEFAULT_REGION_COMPONENT_IN_URL,
   DEFAULT_USER_COMPONENT_IN_URL,
   encodeParameter,
+  MapType,
   MAP_TYPES
 } from './maps-api-common';
 
@@ -22,24 +28,29 @@ const TILE_EXTENT = 4096;
 /**
  * Obtain a TileJson from Maps API v1 and v2
  */
-export async function getDataV2({type, source, credentials}) {
+export async function getDataV2({
+  type,
+  source,
+  credentials
+}: {
+  type: MapType;
+  source: string;
+  credentials?: Partial<ClassicCredentials>;
+}) {
   const defaultCredentials = getDefaultCredentials();
-  const apiVersion = (credentials && credentials.apiVersion) || defaultCredentials.apiVersion;
+  const apiVersion = credentials?.apiVersion || defaultCredentials.apiVersion;
   // Only pick up default credentials if they have been defined for
   // correct API version
   const localCreds = {
-    ...defaultClassicCredentials,
+    ...(apiVersion === API_VERSIONS.V3 ? defaultCloudNativeCredentials : defaultClassicCredentials),
+    mapsUrl: DEFAULT_MAPS_URL_FORMAT[apiVersion],
     ...(defaultCredentials.apiVersion === apiVersion && defaultCredentials),
     ...credentials
-  };
-
-  if (!localCreds.mapsUrl) {
-    localCreds.mapsUrl = DEFAULT_MAPS_URL_FORMAT[apiVersion];
-  }
+  } as unknown as Required<ClassicCredentials>;
 
-  let url;
+  let url: string;
 
-  const connection = type === 'tileset' ? CONNECTIONS.BIGQUERY : CONNECTIONS.CARTO;
+  const connection = type === MAP_TYPES.TILESET ? CONNECTIONS.BIGQUERY : CONNECTIONS.CARTO;
 
   switch (apiVersion) {
     case API_VERSIONS.V1:
@@ -64,12 +75,11 @@ export async function getDataV2({type, source, credentials}) {
 /**
  * Request against Maps API
  */
-async function request({url, credentials}) {
+async function request({url, credentials}: {url: string; credentials: ClassicCredentials}) {
   let response;
 
   try {
     /* global fetch */
-    /* eslint no-undef: "error" */
     response = await fetch(url, {
       headers: {
         Accept: 'application/json'
@@ -91,7 +101,15 @@ async function request({url, credentials}) {
 /**
  * Display proper message from Maps API error
  */
-function dealWithError({response, json, credentials}) {
+function dealWithError({
+  response,
+  json,
+  credentials
+}: {
+  response: Response;
+  json: any;
+  credentials: ClassicCredentials;
+}) {
   switch (response.status) {
     case 401:
       throw new Error(
@@ -109,22 +127,38 @@ function dealWithError({response, json, credentials}) {
   }
 }
 
-function initURLParameters(credentials) {
+function initURLParameters(credentials: ClassicCredentials): string[] {
   const encodedApiKey = encodeParameter('api_key', credentials.apiKey);
-  const encodedClient = encodeParameter('client', `deck-gl-carto`);
+  const encodedClient = encodeParameter('client', 'deck-gl-carto');
   return [encodedApiKey, encodedClient];
 }
 
 /**
  * Build a URL with all required parameters
  */
-function buildURLMapsAPIv1({mapConfig, credentials}) {
+function buildURLMapsAPIv1({
+  mapConfig,
+  credentials
+}: {
+  mapConfig: unknown;
+  credentials: Required<ClassicCredentials>;
+}): string {
   const parameters = initURLParameters(credentials);
   const cfg = JSON.stringify(mapConfig);
   return `${mapsUrl(credentials)}?${parameters.join('&')}&${encodeParameter('config', cfg)}`;
 }
 
-function buildURLMapsAPIv2({connection, type, source, credentials}) {
+function buildURLMapsAPIv2({
+  connection,
+  type,
+  source,
+  credentials
+}: {
+  connection: string;
+  type: MapType;
+  source: string;
+  credentials: Required<ClassicCredentials>;
+}): string {
   const parameters = initURLParameters(credentials);
   // Query type is mapped to 'sql' at maps api v1
   const mapsApiType = type === MAP_TYPES.QUERY ? 'sql' : type;
@@ -136,13 +170,13 @@ function buildURLMapsAPIv2({connection, type, source, credentials}) {
 /**
  * Prepare a url valid for the specified user
  */
-function mapsUrl(credentials) {
+function mapsUrl(credentials: Required<ClassicCredentials>) {
   return credentials.mapsUrl
     .replace(DEFAULT_USER_COMPONENT_IN_URL, credentials.username)
     .replace(DEFAULT_REGION_COMPONENT_IN_URL, credentials.region);
 }
 
-function createMapConfig(sql) {
+function createMapConfig(sql: string) {
   return {
     version: '1.3.1',
     buffersize: {
@@ -153,6 +187,7 @@ function createMapConfig(sql) {
         type: 'mapnik',
         options: {
           sql,
+          // eslint-disable-next-line camelcase
           vector_extent: TILE_EXTENT
         }
       }