@deck.gl/carto 8.9.8 → 8.9.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.9.8",
+  "version": "8.9.10",
   "publishConfig": {
     "access": "public"
   },
@@ -32,10 +32,10 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@loaders.gl/gis": "^3.3.1",
-    "@loaders.gl/loader-utils": "^3.3.1",
-    "@loaders.gl/mvt": "^3.3.1",
-    "@loaders.gl/tiles": "^3.3.1",
+    "@loaders.gl/gis": "^3.3.3",
+    "@loaders.gl/loader-utils": "^3.3.3",
+    "@loaders.gl/mvt": "^3.3.3",
+    "@loaders.gl/tiles": "^3.3.3",
     "@luma.gl/constants": "^8.5.16",
     "@math.gl/web-mercator": "^3.6.2",
     "cartocolor": "^4.0.2",
@@ -49,7 +49,7 @@
     "quadbin": "^0.1.9"
   },
   "devDependencies": {
-    "@loaders.gl/schema": "^3.3.1",
+    "@loaders.gl/schema": "^3.3.3",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",
     "@types/d3-scale": "^3.0.0"
@@ -62,5 +62,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "2d98c0893324e1f01c4b5afacc0de800510c15cb"
+  "gitHead": "95b67b17698635f96c9e26562f2d5bac28f96cbf"
 }

package/typed/api/index.js

@@ -0,0 +1,3 @@
+export { FORMATS, TILE_FORMATS, MAP_TYPES, API_VERSIONS } from './maps-api-common';
+export { getDataV2, CONNECTIONS } from './maps-client';
+export { fetchLayerData, fetchMap, getData, mapInstantiation } from './maps-v3-client';

package/typed/api/layer-map.js

@@ -0,0 +1,264 @@
+import { deviation, extent, groupSort, median, variance } from 'd3-array';
+import { rgb } from 'd3-color';
+import { scaleLinear, scaleOrdinal, scaleLog, scalePoint, scaleQuantile, scaleQuantize, scaleSqrt, scaleThreshold } from 'd3-scale';
+import { format as d3Format } from 'd3-format';
+import moment from 'moment-timezone';
+import { CPUGridLayer, HeatmapLayer, HexagonLayer } from '@deck.gl/aggregation-layers';
+import { GeoJsonLayer } from '@deck.gl/layers';
+import { H3HexagonLayer, MVTLayer } from '@deck.gl/geo-layers';
+import CartoTileLayer from '../layers/carto-tile-layer';
+import { TILE_FORMATS } from './maps-api-common';
+import { assert } from '../utils';
+const SCALE_FUNCS = {
+    linear: scaleLinear,
+    ordinal: scaleOrdinal,
+    log: scaleLog,
+    point: scalePoint,
+    quantile: scaleQuantile,
+    quantize: scaleQuantize,
+    sqrt: scaleSqrt,
+    custom: scaleThreshold
+};
+const UNKNOWN_COLOR = '#868d91';
+export const AGGREGATION = {
+    average: 'MEAN',
+    maximum: 'MAX',
+    minimum: 'MIN',
+    sum: 'SUM'
+};
+export const OPACITY_MAP = {
+    getFillColor: 'opacity',
+    getLineColor: 'strokeOpacity',
+    getTextColor: 'opacity'
+};
+const AGGREGATION_FUNC = {
+    'count unique': (values, accessor) => groupSort(values, v => v.length, accessor).length,
+    median,
+    // Unfortunately mode() is only available in d3-array@3+ which is ESM only
+    mode: (values, accessor) => groupSort(values, v => v.length, accessor).pop(),
+    stddev: deviation,
+    variance
+};
+const hexToRGBA = c => {
+    const { r, g, b, opacity } = rgb(c);
+    return [r, g, b, 255 * opacity];
+};
+// Kepler -> Deck.gl
+const sharedPropMap = {
+    color: 'getFillColor',
+    isVisible: 'visible',
+    label: 'cartoLabel',
+    textLabel: {
+        alignment: 'getTextAlignmentBaseline',
+        anchor: 'getTextAnchor',
+        color: 'getTextColor',
+        size: 'getTextSize'
+    },
+    visConfig: {
+        enable3d: 'extruded',
+        elevationScale: 'elevationScale',
+        filled: 'filled',
+        strokeColor: 'getLineColor',
+        stroked: 'stroked',
+        thickness: 'getLineWidth',
+        radius: 'getPointRadius',
+        wireframe: 'wireframe'
+    }
+};
+const aggregationVisConfig = {
+    colorAggregation: x => ({ colorAggregation: AGGREGATION[x] || AGGREGATION.sum }),
+    colorRange: x => ({ colorRange: x.colors.map(hexToRGBA) }),
+    coverage: 'coverage',
+    elevationPercentile: ['elevationLowerPercentile', 'elevationUpperPercentile'],
+    percentile: ['lowerPercentile', 'upperPercentile']
+};
+const defaultProps = {
+    lineMiterLimit: 2,
+    lineWidthUnits: 'pixels',
+    pointRadiusUnits: 'pixels',
+    rounded: true,
+    wrapLongitude: false
+};
+function mergePropMaps(a = {}, b = {}) {
+    return { ...a, ...b, visConfig: { ...a.visConfig, ...b.visConfig } };
+}
+export function getLayer(type, config, dataset) {
+    if (type === 'mvt' || type === 'tileset') {
+        return getTileLayer(dataset);
+    }
+    const geoColumn = dataset?.geoColumn;
+    const getPosition = d => d[geoColumn].coordinates;
+    const hexagonId = config.columns?.hex_id;
+    const layerTypeDefs = {
+        point: {
+            Layer: GeoJsonLayer,
+            propMap: { visConfig: { outline: 'stroked' } }
+        },
+        geojson: {
+            Layer: GeoJsonLayer
+        },
+        grid: {
+            Layer: CPUGridLayer,
+            propMap: { visConfig: { ...aggregationVisConfig, worldUnitSize: x => ({ cellSize: 1000 * x }) } },
+            defaultProps: { getPosition }
+        },
+        heatmap: {
+            Layer: HeatmapLayer,
+            propMap: { visConfig: { ...aggregationVisConfig, radius: 'radiusPixels' } },
+            defaultProps: { getPosition }
+        },
+        hexagon: {
+            Layer: HexagonLayer,
+            propMap: { visConfig: { ...aggregationVisConfig, worldUnitSize: x => ({ radius: 1000 * x }) } },
+            defaultProps: { getPosition }
+        },
+        hexagonId: {
+            Layer: H3HexagonLayer,
+            propMap: { visConfig: { coverage: 'coverage' } },
+            defaultProps: { getHexagon: d => d[hexagonId], stroked: false }
+        }
+    };
+    const layer = layerTypeDefs[type];
+    assert(layer, `Unsupported layer type: ${type}`);
+    return {
+        ...layer,
+        propMap: mergePropMaps(sharedPropMap, layer.propMap),
+        defaultProps: { ...defaultProps, ...layer.defaultProps }
+    };
+}
+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,
+            uniqueIdProperty: 'geoid',
+            formatTiles
+        }
+    };
+}
+function domainFromAttribute(attribute, scaleType) {
+    if (scaleType === 'ordinal' || scaleType === 'point') {
+        return attribute.categories.map(c => c.category).filter(c => c !== undefined && c !== null);
+    }
+    let { min } = attribute;
+    if (scaleType === 'log' && min === 0) {
+        min = 1e-5;
+    }
+    return [min, attribute.max];
+}
+function domainFromValues(values, scaleType) {
+    if (scaleType === 'ordinal') {
+        return groupSort(values, g => -g.length, d => d);
+    }
+    else if (scaleType === 'quantile') {
+        return values.sort((a, b) => a - b);
+    }
+    else if (scaleType === 'log') {
+        const [d0, d1] = extent(values);
+        return [d0 === 0 ? 1e-5 : d0, d1];
+    }
+    return extent(values);
+}
+function calculateDomain(data, name, scaleType) {
+    if (data.tilestats) {
+        // Tileset data type
+        const { attributes } = data.tilestats.layers[0];
+        const attribute = attributes.find(a => a.attribute === name);
+        return domainFromAttribute(attribute, scaleType);
+    }
+    else if (data.features) {
+        // GeoJSON data type
+        const values = data.features.map(({ properties }) => properties[name]);
+        return domainFromValues(values, scaleType);
+    }
+    else if (Array.isArray(data) && data[0][name] !== undefined) {
+        // JSON data type
+        const values = data.map(properties => properties[name]);
+        return domainFromValues(values, scaleType);
+    }
+    return [0, 1];
+}
+function normalizeAccessor(accessor, data) {
+    if (data.features || data.tilestats) {
+        return ({ properties }) => {
+            return accessor(properties);
+        };
+    }
+    return accessor;
+}
+export function opacityToAlpha(opacity) {
+    return opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
+}
+export function getColorValueAccessor({ name }, colorAggregation, data) {
+    const aggregator = AGGREGATION_FUNC[colorAggregation];
+    const accessor = values => aggregator(values, p => p[name]);
+    return normalizeAccessor(accessor, data);
+}
+export function getColorAccessor({ name }, scaleType, { colors, colorMap }, opacity, data) {
+    const scale = SCALE_FUNCS[scaleType]();
+    let domain = [];
+    let scaleColor = [];
+    if (Array.isArray(colorMap)) {
+        colorMap.forEach(([value, color]) => {
+            domain.push(value);
+            scaleColor.push(color);
+        });
+    }
+    else {
+        domain = calculateDomain(data, name, scaleType);
+        scaleColor = colors;
+    }
+    if (scaleType === 'ordinal') {
+        domain = domain.slice(0, scaleColor.length);
+    }
+    scale.domain(domain);
+    scale.range(scaleColor);
+    scale.unknown(UNKNOWN_COLOR);
+    const alpha = opacityToAlpha(opacity);
+    const accessor = properties => {
+        const propertyValue = properties[name];
+        const { r, g, b } = rgb(scale(propertyValue));
+        return [r, g, b, propertyValue === null ? 0 : alpha];
+    };
+    return normalizeAccessor(accessor, data);
+}
+export function getSizeAccessor({ name }, scaleType, range, data) {
+    const scale = SCALE_FUNCS[scaleType]();
+    scale.domain(calculateDomain(data, name, scaleType));
+    scale.range(range);
+    const accessor = properties => {
+        return scale(properties[name]);
+    };
+    return normalizeAccessor(accessor, data);
+}
+const FORMATS = {
+    date: s => moment.utc(s).format('MM/DD/YY HH:mm:ssa'),
+    integer: d3Format('i'),
+    float: d3Format('.5f'),
+    timestamp: s => moment.utc(s).format('X'),
+    default: String
+};
+export function getTextAccessor({ name, type }, data) {
+    const format = FORMATS[type] || FORMATS.default;
+    const accessor = properties => {
+        return format(properties[name]);
+    };
+    return normalizeAccessor(accessor, data);
+}
+export function getTextPixelOffsetAccessor({ alignment, anchor, size }, radius) {
+    const padding = 20;
+    const signX = anchor === 'middle' ? 0 : anchor === 'start' ? 1 : -1;
+    const signY = alignment === 'center' ? 0 : alignment === 'bottom' ? 1 : -1;
+    const sizeOffset = alignment === 'center' ? 0 : size;
+    const calculateOffset = r => [signX * (r + padding), signY * (r + padding + sizeOffset)];
+    return typeof radius === 'function'
+        ? d => {
+            return calculateOffset(radius(d));
+        }
+        : calculateOffset(radius);
+}
+export { domainFromValues as _domainFromValues };

package/typed/api/maps-api-common.js

@@ -0,0 +1,50 @@
+export const DEFAULT_USER_COMPONENT_IN_URL = '{user}';
+export const DEFAULT_REGION_COMPONENT_IN_URL = '{region}';
+export const API_VERSIONS = {
+    V1: 'v1',
+    V2: 'v2',
+    V3: 'v3'
+};
+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}`
+};
+export const MAP_TYPES = {
+    QUERY: 'query',
+    TABLE: 'table',
+    TILESET: 'tileset'
+};
+export const COLUMNS_SUPPORT = [MAP_TYPES.TABLE];
+export const GEO_COLUMN_SUPPORT = [MAP_TYPES.QUERY, MAP_TYPES.TABLE];
+// AVAILABLE FORMATS
+export const FORMATS = {
+    GEOJSON: 'geojson',
+    NDJSON: 'ndjson',
+    TILEJSON: 'tilejson',
+    JSON: 'json'
+};
+// AVAILABLE FORMATS FOR TILES
+export const TILE_FORMATS = {
+    MVT: 'mvt',
+    JSON: 'json',
+    GEOJSON: 'geojson',
+    BINARY: 'binary'
+};
+export var SchemaFieldType;
+(function (SchemaFieldType) {
+    SchemaFieldType["Number"] = "number";
+    SchemaFieldType["Bigint"] = "bigint";
+    SchemaFieldType["String"] = "string";
+    SchemaFieldType["Geometry"] = "geometry";
+    SchemaFieldType["Timestamp"] = "timestamp";
+    SchemaFieldType["Object"] = "object";
+    SchemaFieldType["Boolean"] = "boolean";
+    SchemaFieldType["Variant"] = "variant";
+    SchemaFieldType["Unknown"] = "unknown";
+})(SchemaFieldType || (SchemaFieldType = {}));
+/**
+ * Simple encode parameter
+ */
+export function encodeParameter(name, value) {
+    return `${name}=${encodeURIComponent(value)}`;
+}

package/typed/api/maps-client.js

@@ -0,0 +1,125 @@
+/**
+ * Maps API Client for Maps API v1 and Maps API v2
+ */
+import { defaultClassicCredentials, defaultCloudNativeCredentials, getDefaultCredentials } from '../config';
+import { API_VERSIONS, DEFAULT_MAPS_URL_FORMAT, DEFAULT_REGION_COMPONENT_IN_URL, DEFAULT_USER_COMPONENT_IN_URL, encodeParameter, MAP_TYPES } from './maps-api-common';
+export const CONNECTIONS = {
+    BIGQUERY: 'bigquery',
+    CARTO: 'carto'
+};
+const BUFFER_SIZE = 16;
+const TILE_EXTENT = 4096;
+/**
+ * Obtain a TileJson from Maps API v1 and v2
+ */
+export async function getDataV2({ type, source, credentials }) {
+    const defaultCredentials = getDefaultCredentials();
+    const apiVersion = credentials?.apiVersion || defaultCredentials.apiVersion;
+    // Only pick up default credentials if they have been defined for
+    // correct API version
+    const localCreds = {
+        ...(apiVersion === API_VERSIONS.V3 ? defaultCloudNativeCredentials : defaultClassicCredentials),
+        mapsUrl: DEFAULT_MAPS_URL_FORMAT[apiVersion],
+        ...(defaultCredentials.apiVersion === apiVersion && defaultCredentials),
+        ...credentials
+    };
+    let url;
+    const connection = type === MAP_TYPES.TILESET ? CONNECTIONS.BIGQUERY : CONNECTIONS.CARTO;
+    switch (apiVersion) {
+        case API_VERSIONS.V1:
+            // Maps API v1
+            const mapConfig = createMapConfig(source);
+            url = buildURLMapsAPIv1({ mapConfig, credentials: localCreds });
+            const layergroup = await request({ url, credentials: localCreds });
+            return layergroup.metadata.tilejson.vector;
+        case API_VERSIONS.V2:
+            // Maps API v2
+            url = buildURLMapsAPIv2({ connection, type, source, credentials: localCreds });
+            return await request({ url, credentials: localCreds });
+        default:
+            throw new Error(`Invalid maps API version. It should be ${API_VERSIONS.V1} or ${API_VERSIONS.V2}`);
+    }
+}
+/**
+ * Request against Maps API
+ */
+async function request({ url, credentials }) {
+    let response;
+    try {
+        /* global fetch */
+        response = await fetch(url, {
+            headers: {
+                Accept: 'application/json'
+            }
+        });
+    }
+    catch (error) {
+        throw new Error(`Failed to connect to Maps API: ${error}`);
+    }
+    const json = await response.json();
+    if (!response.ok) {
+        dealWithError({ response, json, credentials });
+    }
+    return json;
+}
+/**
+ * Display proper message from Maps API error
+ */
+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}')`);
+        case 403:
+            throw new Error(`Unauthorized access to dataset: the provided apiKey('${credentials.apiKey}') doesn't provide access to the requested data`);
+        default:
+            const e = credentials.apiVersion === API_VERSIONS.V1 ? JSON.stringify(json.errors) : json.error;
+            throw new Error(e);
+    }
+}
+function initURLParameters(credentials) {
+    const encodedApiKey = encodeParameter('api_key', credentials.apiKey);
+    const encodedClient = encodeParameter('client', 'deck-gl-carto');
+    return [encodedApiKey, encodedClient];
+}
+/**
+ * Build a URL with all required parameters
+ */
+function buildURLMapsAPIv1({ mapConfig, credentials }) {
+    const parameters = initURLParameters(credentials);
+    const cfg = JSON.stringify(mapConfig);
+    return `${mapsUrl(credentials)}?${parameters.join('&')}&${encodeParameter('config', cfg)}`;
+}
+function buildURLMapsAPIv2({ connection, type, source, credentials }) {
+    const parameters = initURLParameters(credentials);
+    // Query type is mapped to 'sql' at maps api v1
+    const mapsApiType = type === MAP_TYPES.QUERY ? 'sql' : type;
+    let url = `${mapsUrl(credentials)}/${connection}/${mapsApiType}?`;
+    url += `${encodeParameter('source', source)}&format=tilejson&${parameters.join('&')}`;
+    return url;
+}
+/**
+ * Prepare a url valid for the specified user
+ */
+function mapsUrl(credentials) {
+    return credentials.mapsUrl
+        .replace(DEFAULT_USER_COMPONENT_IN_URL, credentials.username)
+        .replace(DEFAULT_REGION_COMPONENT_IN_URL, credentials.region);
+}
+function createMapConfig(sql) {
+    return {
+        version: '1.3.1',
+        buffersize: {
+            mvt: BUFFER_SIZE
+        },
+        layers: [
+            {
+                type: 'mapnik',
+                options: {
+                    sql,
+                    // eslint-disable-next-line camelcase
+                    vector_extent: TILE_EXTENT
+                }
+            }
+        ]
+    };
+}