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

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.3",
+  "version": "8.7.0-beta.4",
   "publishConfig": {
     "access": "public"
   },
@@ -41,7 +41,8 @@
     "d3-color": "^2.0.0",
     "d3-format": "^2.0.0",
     "d3-scale": "^3.2.3",
-    "moment-timezone": "^0.5.33"
+    "moment-timezone": "^0.5.33",
+    "pbf": "^3.2.1"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
@@ -49,5 +50,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.1.5"
   },
-  "gitHead": "32879c662f37d4c912cf702c220a75d6cd0a67bc"
+  "gitHead": "fc41a854c97a421dec38411fc593bcdf625cdf84"
 }

package/src/api/index.js

@@ -1,3 +1,3 @@
-export {FORMATS, MAP_TYPES, API_VERSIONS} from './maps-api-common';
+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/src/api/maps-api-common.js

@@ -26,6 +26,7 @@ export const FORMATS = {
   JSON: 'json'
 };
 
+// AVAILABLE FORMATS FOR TILES
 export const TILE_FORMATS = {
   MVT: 'mvt',
   GEOJSON: 'geojson',

package/src/index.js

@@ -7,6 +7,7 @@ export {default as colorCategories} from './style/color-categories-style';
 export {default as colorContinuous} from './style/color-continuous-style';
 export {
   FORMATS,
+  TILE_FORMATS,
   MAP_TYPES,
   API_VERSIONS,
   fetchLayerData,

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

@@ -1,20 +1,51 @@
 /* global TextDecoder */
+import Protobuf from 'pbf';
 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';
+import {Tile} from './schema/carto-dynamic-tile';
+import {encodeParameter, TILE_FORMATS} from '../api/maps-api-common';
 
 function parseJSON(arrayBuffer) {
   return JSON.parse(new TextDecoder().decode(arrayBuffer));
 }
 
+function parsePbf(buffer) {
+  const pbf = new Protobuf(buffer);
+  const tile = Tile.read(pbf);
+  return tile;
+}
+
+function unpackProperties(properties) {
+  if (!properties || !properties.length) {
+    return [];
+  }
+  return properties.map(item => {
+    const currentRecord = {};
+    item.data.forEach(({key, value}) => {
+      currentRecord[key] = value;
+    });
+    return currentRecord;
+  });
+}
+
 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;
+  if (formatTiles === TILE_FORMATS.GEOJSON) return geojsonToBinary(parseJSON(arrayBuffer).features);
+
+  const tile = parsePbf(arrayBuffer);
+
+  const {points, lines, polygons} = tile;
+  const data = {
+    points: {...points, properties: unpackProperties(points.properties)},
+    lines: {...lines, properties: unpackProperties(lines.properties)},
+    polygons: {...polygons, properties: unpackProperties(polygons.properties)}
+  };
+
+  return data;
 }
 
 const CartoDynamicTileLoader = {
@@ -29,7 +60,7 @@ const CartoDynamicTileLoader = {
   parseSync: parseCartoDynamicTile,
   options: {
     cartoDynamicTile: {
-      formatTiles: 'geojson'
+      formatTiles: TILE_FORMATS.BINARY
     }
   }
 };
@@ -52,11 +83,11 @@ export default class CartoDynamicTileLayer extends MVTLayer {
 
     if (formatTiles) {
       log.assert(
-        ['geojson'].includes(formatTiles),
-        `Invalid value for formatTiles: ${formatTiles}`
+        Object.values(TILE_FORMATS).includes(formatTiles),
+        `Invalid value for formatTiles: ${formatTiles}. Use value from TILE_FORMATS`
       );
       url += `&${encodeParameter('formatTiles', formatTiles)}`;
-      loadOptions.cartoBinaryTile = {formatTiles};
+      loadOptions.cartoDynamicTile = {formatTiles};
     }
 
     return fetch(url, {propName: 'data', layer: this, loadOptions, signal});
@@ -72,7 +103,7 @@ export default class CartoDynamicTileLayer extends MVTLayer {
     const {
       bbox: {west, south, east, north}
     } = props.tile;
-    props.extensions = [new ClipExtension()];
+    props.extensions = [new ClipExtension(), ...props.extensions];
     props.clipBounds = [west, south, east, north];
 
     const subLayer = new GeoJsonLayer({

package/src/layers/carto-layer.js

@@ -27,6 +27,9 @@ 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): clientId identifier used for internal tracing, place here a string to identify the client who is doing the request.
   clientId: null,
 
@@ -128,7 +131,7 @@ export default class CartoLayer extends CompositeLayer {
 
     if (!data) return null;
 
-    const {updateTriggers} = this.props;
+    const {type, updateTriggers} = this.props;
 
     let layer;
 
@@ -137,8 +140,12 @@ export default class CartoLayer extends CompositeLayer {
       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 (tilesFormat && tilesFormat !== TILE_FORMATS.MVT) {
+    if (nonMvtTiles || dynamicTiles) {
       layer = CartoDynamicTileLayer;
     } else if (
       apiVersion === API_VERSIONS.V1 ||
@@ -150,8 +157,8 @@ export default class CartoLayer extends CompositeLayer {
       layer = GeoJsonLayer;
     }
 
-    const {uniqueIdProperty} = defaultProps;
-    const props = {uniqueIdProperty, ...this.props};
+    const {formatTiles, uniqueIdProperty} = defaultProps;
+    const props = {formatTiles, uniqueIdProperty, ...this.props};
     delete props.data;
 
     // eslint-disable-next-line new-cap

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

@@ -0,0 +1,195 @@
+// KeyValueObject ========================================
+
+const KeyValueObject = {};
+
+KeyValueObject.read = function (pbf, end) {
+  return pbf.readFields(KeyValueObject._readField, {key: '', value: ''}, end);
+};
+KeyValueObject._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.key = pbf.readString();
+  else if (tag === 2) obj.value = pbf.readString();
+};
+
+// Properties ========================================
+
+const Properties = {};
+
+Properties.read = function (pbf, end) {
+  return pbf.readFields(Properties._readField, {data: []}, end);
+};
+Properties._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.data.push(KeyValueObject.read(pbf, pbf.readVarint() + pbf.pos));
+};
+
+// Doubles ========================================
+
+const Doubles = {};
+
+Doubles.read = function (pbf, end) {
+  // TODO perhaps we can do better and directly map from the source
+  // ArrayBuffer using ArrayBuffer.slice()
+  const {value, size} = pbf.readFields(Doubles._readField, {value: [], size: 0}, end);
+  return {value: new Float32Array(value), size};
+};
+Doubles._readField = function (tag, obj, pbf) {
+  if (tag === 1) pbf.readPackedDouble(obj.value);
+  else if (tag === 2) obj.size = pbf.readVarint(true);
+};
+
+// Ints ========================================
+
+const Ints = {};
+
+Ints.read = function (pbf, end) {
+  const {value, size} = pbf.readFields(Ints._readField, {value: [], size: 0}, end);
+  return {value: new Uint32Array(value), size};
+};
+Ints._readField = function (tag, obj, pbf) {
+  if (tag === 1) pbf.readPackedVarint(obj.value);
+  else if (tag === 2) obj.size = pbf.readVarint(true);
+};
+
+// NumericProp ========================================
+
+const NumericProp = {};
+
+NumericProp.read = function (pbf, end) {
+  return pbf.readFields(NumericProp._readField, {value: []}, end);
+};
+NumericProp._readField = function (tag, obj, pbf) {
+  if (tag === 1) pbf.readPackedDouble(obj.value);
+};
+
+// NumericPropKeyValue ========================================
+
+const NumericPropKeyValue = {};
+
+NumericPropKeyValue.read = function (pbf, end) {
+  return pbf.readFields(NumericPropKeyValue._readField, {key: '', value: null}, end);
+};
+NumericPropKeyValue._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.key = pbf.readString();
+  else if (tag === 2) obj.value = NumericProp.read(pbf, pbf.readVarint() + pbf.pos);
+};
+
+// NumericProp._FieldEntry1 ========================================
+
+NumericProp._FieldEntry1 = {};
+
+NumericProp._FieldEntry1.read = function (pbf, end) {
+  return pbf.readFields(NumericProp._FieldEntry1._readField, {key: '', value: 0}, end);
+};
+NumericProp._FieldEntry1._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.key = pbf.readString();
+  else if (tag === 2) obj.value = pbf.readDouble();
+};
+
+// StringProp ========================================
+
+const StringProp = {};
+
+StringProp.read = function (pbf, end) {
+  return pbf.readFields(StringProp._readField, {value: []}, end);
+};
+StringProp._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.value.push(pbf.readString());
+};
+
+// Points ========================================
+
+const Points = {};
+
+Points.read = function (pbf, end) {
+  return pbf.readFields(
+    Points._readField,
+    {positions: null, globalFeatureIds: null, featureIds: null, properties: [], numericProps: {}},
+    end
+  );
+};
+Points._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 2) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 3) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 4) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));
+  else if (tag === 5) {
+    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
+    obj.numericProps[entry.key] = entry.value;
+  }
+};
+
+// Lines ========================================
+
+const Lines = {};
+
+Lines.read = function (pbf, end) {
+  return pbf.readFields(
+    Lines._readField,
+    {
+      positions: null,
+      pathIndices: null,
+      globalFeatureIds: null,
+      featureIds: null,
+      properties: [],
+      numericProps: {}
+    },
+    end
+  );
+};
+Lines._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 2) obj.pathIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 3) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 4) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 5) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));
+  else if (tag === 6) {
+    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
+    obj.numericProps[entry.key] = entry.value;
+  }
+};
+
+// Polygons ========================================
+
+const Polygons = {};
+
+Polygons.read = function (pbf, end) {
+  return pbf.readFields(
+    Polygons._readField,
+    {
+      positions: null,
+      polygonIndices: null,
+      globalFeatureIds: null,
+      featureIds: null,
+      primitivePolygonIndices: null,
+      triangles: null,
+      properties: [],
+      numericProps: {}
+    },
+    end
+  );
+};
+Polygons._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.positions = Doubles.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 2) obj.polygonIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 3) obj.globalFeatureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 4) obj.featureIds = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 5) obj.primitivePolygonIndices = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 6) obj.triangles = Ints.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 7) obj.properties.push(Properties.read(pbf, pbf.readVarint() + pbf.pos));
+  else if (tag === 8) {
+    const entry = NumericPropKeyValue.read(pbf, pbf.readVarint() + pbf.pos);
+    obj.numericProps[entry.key] = entry.value;
+  }
+};
+
+// Tile ========================================
+
+export const Tile = {};
+
+Tile.read = function (pbf, end) {
+  return pbf.readFields(Tile._readField, {points: null, lines: null, polygons: null}, end);
+};
+Tile._readField = function (tag, obj, pbf) {
+  if (tag === 1) obj.points = Points.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 2) obj.lines = Lines.read(pbf, pbf.readVarint() + pbf.pos);
+  else if (tag === 3) obj.polygons = Polygons.read(pbf, pbf.readVarint() + pbf.pos);
+};