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

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.5",
   "publishConfig": {
     "access": "public"
   },
@@ -50,5 +50,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.1.5"
   },
-  "gitHead": "fc41a854c97a421dec38411fc593bcdf625cdf84"
+  "gitHead": "02b67ab8085c6283c0cae45e37a9b70b24f4434b"
 }

package/src/api/layer-map.js

@@ -14,6 +14,7 @@ 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 {_CartoDynamicTileLayer, TILE_FORMATS} from '@deck.gl/carto';
 
 const SCALE_FUNCS = {
   linear: scaleLinear,
@@ -63,9 +64,12 @@ 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, config, dataset) {
+  if (type === 'mvt' || type === 'tileset') {
+    return getTileLayer(dataset);
+  }
 
+  const hexagonId = config.columns?.hex_id;
   const layer = {
     point: {
       Layer: GeoJsonLayer,
@@ -85,16 +89,6 @@ 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];
 
@@ -103,6 +97,28 @@ export function getLayer(type, config) {
   return layer;
 }
 
+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 : _CartoDynamicTileLayer,
+    propMap: sharedPropMap,
+    defaultProps: {
+      ...defaultProps,
+      pointRadiusScale: 0.3,
+      lineWidthScale: 2,
+      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);

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

@@ -255,7 +255,7 @@ export async function getData({
   return layerData.data;
 }
 
-/* global clearInterval, setInterval, URLSearchParams */
+/* global clearInterval, setInterval, URL */
 async function _fetchMapDataset(dataset, accessToken, credentials, clientId) {
   // First fetch metadata
   const {connectionName: connection, source, type} = dataset;
@@ -268,7 +268,7 @@ async function _fetchMapDataset(dataset, accessToken, credentials, clientId) {
   });
 
   // Extract the last time the data changed
-  const cache = parseInt(new URLSearchParams(url).get('cache'), 10);
+  const cache = parseInt(new URL(url).searchParams.get('cache'), 10);
   if (cache && dataset.cache === cache) {
     return false;
   }
@@ -291,6 +291,7 @@ export async function fetchMap({cartoMapId, clientId, credentials, autoRefresh,
     ...(defaultCredentials.apiVersion === API_VERSIONS.V3 && defaultCredentials),
     ...credentials
   };
+  const {accessToken} = localCreds;
 
   log.assert(cartoMapId, `Must define CARTO map id: fetchMap({cartoMapId: 'XXXX-XXXX-XXXX'})`);
 
@@ -307,7 +308,7 @@ export async function fetchMap({cartoMapId, clientId, credentials, autoRefresh,
   }
 
   const url = `${localCreds.mapsUrl}/public/${cartoMapId}`;
-  const map = await request({url});
+  const map = await request({url, accessToken});
 
   // Periodically check if the data has changed. Note that this
   // will not update when a map is published.

package/src/api/parseMap.js

@@ -24,12 +24,12 @@ export function parseMap(json) {
     mapStyle,
     layers: extractTextLayers(layers.reverse()).map(({id, type, config, visualChannels}) => {
       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}`);
+        const {Layer, propMap, defaultProps} = getLayer(type, config, dataset);
         return new Layer({
           id,
           data,

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

@@ -6,7 +6,7 @@ import {MVTLayer, _getURLFromTemplate} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {geojsonToBinary} from '@loaders.gl/gis';
 import {Tile} from './schema/carto-dynamic-tile';
-import {encodeParameter, TILE_FORMATS} from '../api/maps-api-common';
+import {TILE_FORMATS} from '../api/maps-api-common';
 
 function parseJSON(arrayBuffer) {
   return JSON.parse(new TextDecoder().decode(arrayBuffer));
@@ -60,7 +60,8 @@ const CartoDynamicTileLoader = {
   parseSync: parseCartoDynamicTile,
   options: {
     cartoDynamicTile: {
-      formatTiles: TILE_FORMATS.BINARY
+      // TODO change to BINARY for 8.7 prod release
+      formatTiles: TILE_FORMATS.GEOJSON
     }
   }
 };
@@ -86,7 +87,10 @@ export default class CartoDynamicTileLayer extends MVTLayer {
         Object.values(TILE_FORMATS).includes(formatTiles),
         `Invalid value for formatTiles: ${formatTiles}. Use value from TILE_FORMATS`
       );
-      url += `&${encodeParameter('formatTiles', formatTiles)}`;
+      // eslint-disable-next-line no-undef
+      const newUrl = new URL(url);
+      newUrl.searchParams.set('formatTiles', formatTiles);
+      url = newUrl.toString();
       loadOptions.cartoDynamicTile = {formatTiles};
     }
 
@@ -103,7 +107,7 @@ export default class CartoDynamicTileLayer extends MVTLayer {
     const {
       bbox: {west, south, east, north}
     } = props.tile;
-    props.extensions = [new ClipExtension(), ...props.extensions];
+    props.extensions = [new ClipExtension(), ...(props.extensions || [])];
     props.clipBounds = [west, south, east, north];
 
     const subLayer = new GeoJsonLayer({

package/src/layers/carto-layer.js

@@ -27,8 +27,8 @@ const defaultProps = {
   // (String, optional): format of data
   format: null,
 
-  // (String, optional): format of data
-  formatTiles: TILE_FORMATS.GEOJSON, // TODO: for 8.7 release switch to BINARY
+  // (String, optional): force format of data for tiles
+  formatTiles: null,
 
   // (String, optional): clientId identifier used for internal tracing, place here a string to identify the client who is doing the request.
   clientId: null,
@@ -126,37 +126,35 @@ export default class CartoLayer extends CompositeLayer {
     }
   }
 
-  renderLayers() {
+  _getRenderLayer() {
     const {data, format, apiVersion} = this.state;
 
-    if (!data) return null;
+    if (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
+      return MVTLayer;
+    }
 
-    const {type, updateTriggers} = this.props;
-
-    let layer;
-
-    /* global URLSearchParams */
-    const tilesFormat =
-      apiVersion === API_VERSIONS.V3 &&
-      format === FORMATS.TILEJSON &&
-      new URLSearchParams(data.tiles[0]).get('format');
-    const nonMvtTiles = tilesFormat && tilesFormat !== TILE_FORMATS.MVT;
-
-    const dynamicTiles =
-      apiVersion === API_VERSIONS.V3 && type === MAP_TYPES.TABLE && format === FORMATS.TILEJSON;
-
-    if (nonMvtTiles || dynamicTiles) {
-      layer = CartoDynamicTileLayer;
-    } else if (
-      apiVersion === API_VERSIONS.V1 ||
-      apiVersion === API_VERSIONS.V2 ||
-      format === FORMATS.TILEJSON
-    ) {
-      layer = MVTLayer;
-    } else {
-      layer = GeoJsonLayer;
+    if (format === FORMATS.TILEJSON) {
+      /* global URL */
+      const formatTiles =
+        this.props.formatTiles ||
+        new URL(data.tiles[0]).searchParams.get('formatTiles') ||
+        TILE_FORMATS.MVT;
+      return formatTiles === TILE_FORMATS.MVT ? MVTLayer : CartoDynamicTileLayer;
     }
 
+    // It's a geojson layer
+    return GeoJsonLayer;
+  }
+
+  renderLayers() {
+    const {data} = this.state;
+
+    if (!data) return null;
+
+    const {updateTriggers} = this.props;
+
+    const layer = this._getRenderLayer();
+
     const {formatTiles, uniqueIdProperty} = defaultProps;
     const props = {formatTiles, uniqueIdProperty, ...this.props};
     delete props.data;