@deck.gl/carto 8.7.0-alpha.8 → 8.7.0-beta.3

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.8",
+  "version": "8.7.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -31,10 +31,11 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@loaders.gl/loader-utils": "^3.1.0",
-    "@loaders.gl/mvt": "^3.1.0",
-    "@loaders.gl/tiles": "^3.1.0",
-    "@math.gl/web-mercator": "^3.5.6",
+    "@loaders.gl/gis": "^3.1.5",
+    "@loaders.gl/loader-utils": "^3.1.5",
+    "@loaders.gl/mvt": "^3.1.5",
+    "@loaders.gl/tiles": "^3.1.5",
+    "@math.gl/web-mercator": "^3.5.7",
     "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.1.0"
+    "@loaders.gl/core": "^3.1.5"
   },
-  "gitHead": "c16c8941fe5f2e823bd15a4b9ca4be12d589b0b2"
+  "gitHead": "32879c662f37d4c912cf702c220a75d6cd0a67bc"
 }

package/src/api/layer-map.js

@@ -11,6 +11,7 @@ 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';
 
@@ -62,32 +63,45 @@ function mergePropMaps(a, b) {
   return {...a, ...b, visConfig: {...a.visConfig, ...b.visConfig}};
 }
 
-export const LAYER_MAP = {
-  point: {
-    Layer: GeoJsonLayer,
-    propMap: mergePropMaps(sharedPropMap, {
-      visConfig: {outline: 'stroked'}
-    }),
-    defaultProps
-  },
-  geojson: {
-    Layer: GeoJsonLayer,
-    propMap: sharedPropMap,
-    defaultProps: {...defaultProps, lineWidthScale: 2}
-  },
-  hexagonId: {
-    Layer: H3HexagonLayer,
-    propMap: mergePropMaps(sharedPropMap, {
-      visConfig: {coverage: 'coverage', elevationScale: 'elevationScale'}
-    }),
-    defaultProps: {...defaultProps, getHexagon: d => d.h3}
-  },
-  mvt: {
-    Layer: MVTLayer,
-    propMap: sharedPropMap,
-    defaultProps: {...defaultProps, pointRadiusScale: 0.3, lineWidthScale: 2}
-  }
-};
+export function getLayer(type, config) {
+  const hexagonId = config.columns?.hex_id;
+
+  const layer = {
+    point: {
+      Layer: GeoJsonLayer,
+      propMap: mergePropMaps(sharedPropMap, {
+        visConfig: {outline: 'stroked'}
+      }),
+      defaultProps
+    },
+    geojson: {
+      Layer: GeoJsonLayer,
+      propMap: sharedPropMap,
+      defaultProps: {...defaultProps, lineWidthScale: 2}
+    },
+    hexagonId: {
+      Layer: H3HexagonLayer,
+      propMap: mergePropMaps(sharedPropMap, {
+        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}`);
+
+  return layer;
+}
 
 function domainFromAttribute(attribute, scaleType) {
   if (scaleType === 'ordinal' || scaleType === 'point') {
@@ -104,6 +118,11 @@ function domainFromAttribute(attribute, scaleType) {
 function domainFromValues(values, scaleType) {
   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);
+    return [d0 === 0 ? 1e-5 : d0, d1];
   }
   return extent(values);
 }
@@ -193,3 +212,5 @@ export function getTextPixelOffsetAccessor({alignment, anchor, size}, radius) {
       }
     : calculateOffset(radius);
 }
+
+export {domainFromValues as _domainFromValues};

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

@@ -26,6 +26,12 @@ export const FORMATS = {
   JSON: 'json'
 };
 
+export const TILE_FORMATS = {
+  MVT: 'mvt',
+  GEOJSON: 'geojson',
+  BINARY: 'binary'
+};
+
 /**
  * Simple encode parameter
  */

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 clearInterval, setInterval, URLSearchParams */
-async function _fetchMapDataset(dataset, accessToken, credentials) {
+async function _fetchMapDataset(dataset, accessToken, credentials, clientId) {
   // First fetch metadata
   const {connectionName: connection, source, type} = dataset;
   const {url, mapFormat} = await _fetchDataUrl({
     credentials: {...credentials, accessToken},
     connection,
     source,
-    type
+    type,
+    clientId
   });
 
   // Extract the last time the data changed
@@ -263,12 +280,12 @@ async function _fetchMapDataset(dataset, accessToken, credentials) {
   return true;
 }
 
-async function fillInMapDatasets({datasets, token}, credentials) {
-  const promises = datasets.map(dataset => _fetchMapDataset(dataset, token, credentials));
+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({cartoMapId, credentials, autoRefresh, onNewData}) {
+export async function fetchMap({cartoMapId, clientId, credentials, autoRefresh, onNewData}) {
   const defaultCredentials = getDefaultCredentials();
   const localCreds = {
     ...(defaultCredentials.apiVersion === API_VERSIONS.V3 && defaultCredentials),
@@ -297,7 +314,7 @@ export async function fetchMap({cartoMapId, credentials, autoRefresh, onNewData}
   let stopAutoRefresh;
   if (autoRefresh) {
     const intervalId = setInterval(async () => {
-      const changed = await fillInMapDatasets(map, credentials);
+      const changed = await fillInMapDatasets(map, clientId, credentials);
       if (changed.some(v => v === true)) {
         onNewData(parseMap(map));
       }
@@ -308,7 +325,7 @@ export async function fetchMap({cartoMapId, credentials, autoRefresh, onNewData}
   }
 
   // Mutates map.datasets so that dataset.data contains data
-  await fillInMapDatasets(map, credentials);
+  await fillInMapDatasets(map, clientId, credentials);
   return {
     ...parseMap(map),
     ...{stopAutoRefresh}

package/src/api/parseMap.js

@@ -1,6 +1,6 @@
 import GL from '@luma.gl/constants';
 import {
-  LAYER_MAP,
+  getLayer,
   getColorAccessor,
   getSizeAccessor,
   getTextAccessor,
@@ -23,23 +23,26 @@ export function parseMap(json) {
     initialViewState: mapState,
     mapStyle,
     layers: extractTextLayers(layers.reverse()).map(({id, type, config, visualChannels}) => {
-      log.assert(type in LAYER_MAP, `Unsupported layer type: ${type}`);
-      const {Layer, propMap, defaultProps} = LAYER_MAP[type];
-
-      const {dataId} = config;
-      const dataset = datasets.find(d => d.id === dataId);
-      log.assert(dataset, `No dataset matching dataId: ${dataId}`);
-      const {data} = dataset;
-      log.assert(data, `No data loaded for dataId: ${dataId}`);
-      return new Layer({
-        id,
-        data,
-        ...defaultProps,
-        ...createBlendingProps(layerBlending),
-        ...(!config.textLabel && createInteractionProps(interactionConfig)),
-        ...createStyleProps(config, propMap),
-        ...createChannelProps(visualChannels, type, config, data) // Must come after style
-      });
+      try {
+        const {Layer, propMap, defaultProps} = getLayer(type, config);
+        const {dataId} = config;
+        const dataset = datasets.find(d => d.id === dataId);
+        log.assert(dataset, `No dataset matching dataId: ${dataId}`);
+        const {data} = dataset;
+        log.assert(data, `No data loaded for dataId: ${dataId}`);
+        return new Layer({
+          id,
+          data,
+          ...defaultProps,
+          ...createBlendingProps(layerBlending),
+          ...(!config.textLabel && createInteractionProps(interactionConfig)),
+          ...createStyleProps(config, propMap),
+          ...createChannelProps(visualChannels, type, config, data) // Must come after style
+        });
+      } catch (e) {
+        log.error(e.message)();
+        return undefined;
+      }
     })
   };
 }
@@ -146,12 +149,11 @@ function createChannelProps(visualChannels, type, config, data) {
     );
   }
   if (strokeColorField) {
-    const opacity =
-      visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity / visConfig.opacity : 1;
+    const opacity = visConfig.strokeOpacity !== undefined ? visConfig.strokeOpacity : 1;
     result.getLineColor = getColorAccessor(
       strokeColorField,
       strokeColorScale,
-      visConfig.colorRange,
+      visConfig.strokeColorRange,
       opacity,
       data
     );

package/src/index.js

@@ -1,5 +1,6 @@
 export {getDefaultCredentials, setDefaultCredentials} from './config.js';
 export {default as CartoLayer} from './layers/carto-layer';
+export {default as _CartoDynamicTileLayer} from './layers/carto-dynamic-tile-layer';
 export {default as BASEMAP} from './basemap';
 export {default as colorBins} from './style/color-bins-style';
 export {default as colorCategories} from './style/color-categories-style';

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

@@ -0,0 +1,86 @@
+/* global TextDecoder */
+import {log} from '@deck.gl/core';
+import {ClipExtension} from '@deck.gl/extensions';
+import {MVTLayer, _getURLFromTemplate} from '@deck.gl/geo-layers';
+import {GeoJsonLayer} from '@deck.gl/layers';
+import {geojsonToBinary} from '@loaders.gl/gis';
+import {encodeParameter} from '../api/maps-api-common';
+
+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 {fetchLayerData, getDataV2, API_VERSIONS} from '../api';
-import {FORMATS, MAP_TYPES} from '../api/maps-api-common';
+import {FORMATS, MAP_TYPES, TILE_FORMATS} from '../api/maps-api-common';
 import {getDefaultCredentials} from '../config';
 
 const defaultProps = {
@@ -26,6 +27,9 @@ const defaultProps = {
   // (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,
 
@@ -97,7 +101,7 @@ export default class CartoLayer extends CompositeLayer {
 
   async _updateData() {
     try {
-      const {type, data: source, credentials, ...rest} = this.props;
+      const {type, data: source, clientId, credentials, ...rest} = this.props;
       const localConfig = {...getDefaultCredentials(), ...credentials};
       const {apiVersion} = localConfig;
 
@@ -105,7 +109,7 @@ export default class CartoLayer extends CompositeLayer {
       if (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
         result = {data: await getDataV2({type, source, credentials})};
       } else {
-        result = await fetchLayerData({type, source, credentials, ...rest});
+        result = await fetchLayerData({type, source, clientId, credentials, ...rest});
       }
 
       this.setState({...result, apiVersion});
@@ -128,7 +132,15 @@ export default class CartoLayer extends CompositeLayer {
 
     let layer;
 
-    if (
+    /* global URLSearchParams */
+    const tilesFormat =
+      apiVersion === API_VERSIONS.V3 &&
+      format === FORMATS.TILEJSON &&
+      new URLSearchParams(data.tiles[0]).get('format');
+
+    if (tilesFormat && tilesFormat !== TILE_FORMATS.MVT) {
+      layer = CartoDynamicTileLayer;
+    } else if (
       apiVersion === API_VERSIONS.V1 ||
       apiVersion === API_VERSIONS.V2 ||
       format === FORMATS.TILEJSON