@deck.gl/carto 8.7.0-alpha.9 → 8.7.0-beta.1

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.9",
+  "version": "8.7.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -31,10 +31,10 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
   },
   "dependencies": {
-    "@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",
+    "@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.6",
     "cartocolor": "^4.0.2",
     "d3-array": "^2.8.0",
@@ -47,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.3"
+    "@loaders.gl/core": "^3.1.5"
   },
-  "gitHead": "495e0f2afb3449fe523190ab664c37c5e8976c5d"
+  "gitHead": "0297ca9d2c85d980b075e2af4cfbeb75e31db55a"
 }

package/src/api/layer-map.js

@@ -85,7 +85,12 @@ export const LAYER_MAP = {
   mvt: {
     Layer: MVTLayer,
     propMap: sharedPropMap,
-    defaultProps: {...defaultProps, pointRadiusScale: 0.3, lineWidthScale: 2}
+    defaultProps: {
+      ...defaultProps,
+      pointRadiusScale: 0.3,
+      lineWidthScale: 2,
+      uniqueIdProperty: 'geoid'
+    }
   }
 };
 
@@ -104,6 +109,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 +203,5 @@ export function getTextPixelOffsetAccessor({alignment, anchor, size}, radius) {
       }
     : calculateOffset(radius);
 }
+
+export {domainFromValues as _domainFromValues};

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

@@ -23,23 +23,28 @@ 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];
+      try {
+        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
-      });
+        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 +151,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/layers/carto-dynamic-tile-layer.js

@@ -1,11 +1,10 @@
 /* global TextDecoder */
 import {log} from '@deck.gl/core';
 import {ClipExtension} from '@deck.gl/extensions';
-import {MVTLayer} from '@deck.gl/geo-layers';
+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';
-import {getURLFromTemplate} from '@deck.gl/geo-layers/tile-layer/utils';
 
 function parseJSON(arrayBuffer) {
   return JSON.parse(new TextDecoder().decode(arrayBuffer));
@@ -37,7 +36,7 @@ const CartoDynamicTileLoader = {
 
 export default class CartoDynamicTileLayer extends MVTLayer {
   getTileData(tile) {
-    let url = getURLFromTemplate(this.state.data, tile);
+    let url = _getURLFromTemplate(this.state.data, tile);
     if (!url) {
       return Promise.reject('Invalid URL');
     }

package/src/layers/carto-layer.js

@@ -27,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,
 
@@ -98,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;
 
@@ -106,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});