@deck.gl/carto 8.9.0-alpha.2 → 8.9.0-alpha.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.9.0-alpha.2",
+  "version": "8.9.0-alpha.3",
   "publishConfig": {
     "access": "public"
   },
@@ -45,7 +45,8 @@
     "d3-scale": "^3.2.3",
     "h3-js": "^3.7.0",
     "moment-timezone": "^0.5.33",
-    "pbf": "^3.2.1"
+    "pbf": "^3.2.1",
+    "quadbin": "^0.1.2"
   },
   "devDependencies": {
     "@loaders.gl/schema": "^3.2.5",
@@ -61,5 +62,5 @@
     "@deck.gl/layers": "^8.0.0",
     "@loaders.gl/core": "^3.0.0"
   },
-  "gitHead": "9d9d51e600b437ce1933d42b4289a3e67db61349"
+  "gitHead": "1a42362a310b39b5b26d46354d388e2319a90af3"
 }

package/src/api/layer-map.ts

@@ -13,7 +13,7 @@ import {
 import {format as d3Format} from 'd3-format';
 import moment from 'moment-timezone';
 
-import {Layer, _ConstructorOf as ConstructorOf} from '@deck.gl/core';
+import {Accessor, Layer, _ConstructorOf as ConstructorOf} from '@deck.gl/core';
 import {CPUGridLayer, HeatmapLayer, HexagonLayer} from '@deck.gl/aggregation-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {H3HexagonLayer, MVTLayer} from '@deck.gl/geo-layers';
@@ -23,6 +23,15 @@ import H3TileLayer from '../layers/h3-tile-layer';
 import QuadbinTileLayer from '../layers/quadbin-tile-layer';
 import {TILE_FORMATS} from './maps-api-common';
 import {assert} from '../utils';
+import {
+  CustomMarkersRange,
+  MapDataset,
+  MapTextSubLayerConfig,
+  TextLabel,
+  VisConfig,
+  VisualChannelField,
+  VisualChannels
+} from './types';
 
 const SCALE_FUNCS = {
   linear: scaleLinear,
@@ -36,6 +45,10 @@ const SCALE_FUNCS = {
 };
 export type SCALE_TYPE = keyof typeof SCALE_FUNCS;
 
+function identity<T>(v: T): T {
+  return v;
+}
+
 const UNKNOWN_COLOR = '#868d91';
 
 export const AGGREGATION = {
@@ -88,6 +101,13 @@ const sharedPropMap = {
   }
 };
 
+const customMarkersPropsMap = {
+  color: 'getIconColor',
+  visConfig: {
+    radius: 'getIconSize'
+  }
+};
+
 const aggregationVisConfig = {
   colorAggregation: x => ({colorAggregation: AGGREGATION[x] || AGGREGATION.sum}),
   colorRange: x => ({colorRange: x.colors.map(hexToRGBA)}),
@@ -110,11 +130,16 @@ function mergePropMaps(a: Record<string, any> = {}, b: Record<string, any> = {})
 
 export function getLayer(
   type: string,
-  config,
-  dataset
+  config: MapTextSubLayerConfig,
+  dataset: MapDataset
 ): {Layer: ConstructorOf<Layer>; propMap: any; defaultProps: any} {
+  let basePropMap: any = sharedPropMap;
+
+  if (config.visConfig?.customMarkers && !config.textLabel) {
+    basePropMap = mergePropMaps(sharedPropMap, customMarkersPropsMap);
+  }
   if (type === 'mvt' || type === 'tileset' || type === 'h3' || type === 'quadbin') {
-    return getTileLayer(dataset);
+    return getTileLayer(dataset, basePropMap);
   }
 
   const geoColumn = dataset?.geoColumn;
@@ -160,7 +185,7 @@ export function getLayer(
   assert(layer, `Unsupported layer type: ${type}`);
   return {
     ...layer,
-    propMap: mergePropMaps(sharedPropMap, layer.propMap),
+    propMap: mergePropMaps(basePropMap, layer.propMap),
     defaultProps: {...defaultProps, ...layer.defaultProps}
   };
 }
@@ -183,7 +208,7 @@ export function layerFromTileDataset(
   return CartoTileLayer;
 }
 
-function getTileLayer(dataset) {
+function getTileLayer(dataset: MapDataset, basePropMap) {
   const {
     aggregationExp,
     aggregationResLevel,
@@ -197,7 +222,7 @@ function getTileLayer(dataset) {
 
   return {
     Layer: layerFromTileDataset(formatTiles, scheme),
-    propMap: sharedPropMap,
+    propMap: basePropMap,
     defaultProps: {
       ...defaultProps,
       ...(aggregationExp && {aggregationExp}),
@@ -225,7 +250,7 @@ function domainFromAttribute(attribute, scaleType: SCALE_TYPE, scaleLength: numb
 }
 
 function domainFromValues(values, scaleType: SCALE_TYPE) {
-  if (scaleType === 'ordinal') {
+  if (scaleType === 'ordinal' || scaleType === 'point') {
     return groupSort(
       values,
       g => -g.length,
@@ -268,7 +293,7 @@ function normalizeAccessor(accessor, data) {
   return accessor;
 }
 
-export function opacityToAlpha(opacity) {
+export function opacityToAlpha(opacity?: number) {
   return opacity !== undefined ? Math.round(255 * Math.pow(opacity, 1 / 2.2)) : 255;
 }
 
@@ -339,16 +364,71 @@ export function getColorAccessor(
   return normalizeAccessor(accessor, data);
 }
 
+const FALLBACK_ICON =
+  'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz4NCjwvc3ZnPg==';
+
+export function getIconUrlAccessor(
+  field: VisualChannelField | null | undefined,
+  fallbackUrl: string | null | undefined,
+  range: CustomMarkersRange | null | undefined,
+  maxIconSize: number,
+  data: any
+) {
+  const urlToUnpackedIcon = (url: string) => ({
+    id: `${url}@@${maxIconSize}`,
+    url,
+    width: maxIconSize,
+    height: maxIconSize,
+    mask: true
+  });
+  let unknownValue = fallbackUrl || FALLBACK_ICON;
+
+  if (range?.othersMarker) {
+    unknownValue = range.othersMarker;
+  }
+
+  const unknownIcon = urlToUnpackedIcon(unknownValue);
+  if (!range || !field) {
+    return () => unknownIcon;
+  }
+
+  const mapping: Record<string, any> = {};
+  for (const {value, markerUrl} of range.markerMap) {
+    if (markerUrl) {
+      mapping[value] = urlToUnpackedIcon(markerUrl);
+    }
+  }
+
+  const accessor = properties => {
+    const propertyValue = properties[field.name];
+    return mapping[propertyValue] || unknownIcon;
+  };
+  return normalizeAccessor(accessor, data);
+}
+
+export function getMaxMarkerSize(visConfig: VisConfig, visualChannels: VisualChannels): number {
+  const {radiusRange, radius} = visConfig;
+  const {radiusField, sizeField} = visualChannels;
+  const field = radiusField || sizeField;
+  return Math.ceil(radiusRange && field ? radiusRange[1] : radius);
+}
+
+export function negateAccessor<T>(accessor: Accessor<T, number>): Accessor<T, number> {
+  return typeof accessor === 'function' ? (d, i) => -accessor(d, i) : -accessor;
+}
+
 export function getSizeAccessor(
   {name},
-  scaleType: SCALE_TYPE,
+  scaleType: SCALE_TYPE | undefined,
   aggregation,
-  range: Iterable<Range>,
+  range: Iterable<Range> | undefined,
   data: any
 ) {
-  const scale = SCALE_FUNCS[scaleType as any]();
-  scale.domain(calculateDomain(data, name, scaleType));
-  scale.range(range);
+  const scale = scaleType ? SCALE_FUNCS[scaleType as any]() : identity;
+  if (scaleType) {
+    scale.domain(calculateDomain(data, name, scaleType));
+    scale.range(range);
+  }
 
   let accessorKeys = getAccessorKeys(name, aggregation);
   const accessor = properties => {
@@ -369,7 +449,7 @@ const FORMATS: Record<string, (value: any) => string> = {
   default: String
 };
 
-export function getTextAccessor({name, type}, data) {
+export function getTextAccessor({name, type}: VisualChannelField, data) {
   const format = FORMATS[type] || FORMATS.default;
   const accessor = properties => {
     return format(properties[name]);
@@ -377,13 +457,19 @@ export function getTextAccessor({name, type}, data) {
   return normalizeAccessor(accessor, data);
 }
 
-export function getTextPixelOffsetAccessor({alignment, anchor, size}, radius) {
+export function getTextPixelOffsetAccessor(
+  {alignment, anchor, size}: TextLabel,
+  radius
+): Accessor<unknown, [number, number]> {
   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)];
+  const calculateOffset = (r: number): [number, number] => [
+    signX * (r + padding),
+    signY * (r + padding + sizeOffset)
+  ];
 
   return typeof radius === 'function'
     ? d => {

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

@@ -28,6 +28,7 @@ import {assert} from '../utils';
 
 const MAX_GET_LENGTH = 2048;
 const DEFAULT_CLIENT = 'deck-gl-carto';
+const V3_MINOR_VERSION = '3.1';
 
 export type Headers = Record<string, string>;
 interface RequestParams {
@@ -151,6 +152,7 @@ function getParameters({
   queryParameters
 }: Omit<FetchLayerDataParams, 'connection' | 'credentials'>) {
   const parameters = [encodeParameter('client', clientId || DEFAULT_CLIENT)];
+  parameters.push(encodeParameter('v', V3_MINOR_VERSION));
 
   const sourceName = type === MAP_TYPES.QUERY ? 'q' : 'name';
   parameters.push(encodeParameter(sourceName, source));
@@ -405,8 +407,7 @@ async function _fetchMapDataset(
   accessToken: string,
   credentials: CloudNativeCredentials,
   clientId?: string,
-  headers?: Headers,
-  queryParameters?: QueryParameters
+  headers?: Headers
 ) {
   const {
     aggregationExp,
@@ -416,7 +417,8 @@ async function _fetchMapDataset(
     format,
     geoColumn,
     source,
-    type
+    type,
+    queryParameters
   } = dataset;
   // First fetch metadata
   const {url, mapFormat} = await _fetchDataUrl({

package/src/api/parseMap.ts

@@ -8,13 +8,17 @@ import {
   getTextAccessor,
   getTextPixelOffsetAccessor,
   OPACITY_MAP,
-  opacityToAlpha
+  opacityToAlpha,
+  getIconUrlAccessor,
+  negateAccessor,
+  getMaxMarkerSize
 } from './layer-map';
 import {_flatten as flatten, log} from '@deck.gl/core';
 import {assert} from '../utils';
+import {MapDataset, MapTextSubLayerConfig, VisualChannels} from './types';
 
 export function parseMap(json) {
-  const {keplerMapConfig, datasets} = json;
+  const {keplerMapConfig, datasets, token} = json;
   assert(keplerMapConfig.version === 'v1', 'Only support Kepler v1');
   const {mapState, mapStyle} = keplerMapConfig.config;
   const {layers, layerBlending, interactionConfig} = keplerMapConfig.config.visState;
@@ -27,10 +31,11 @@ export function parseMap(json) {
     updatedAt: json.updatedAt,
     initialViewState: mapState,
     mapStyle,
+    token,
     layers: extractTextLayers(layers.reverse()).map(({id, type, config, visualChannels}) => {
       try {
         const {dataId} = config;
-        const dataset = datasets.find(d => d.id === dataId);
+        const dataset: MapDataset | null = datasets.find(d => d.id === dataId);
         assert(dataset, `No dataset matching dataId: ${dataId}`);
         const {data} = dataset;
         assert(data, `No data loaded for dataId: ${dataId}`);
@@ -42,7 +47,8 @@ export function parseMap(json) {
           ...createBlendingProps(layerBlending),
           ...(!config.textLabel && createInteractionProps(interactionConfig)),
           ...createStyleProps(config, propMap),
-          ...createChannelProps(visualChannels, type, config, data) // Must come after style
+          ...createChannelProps(visualChannels, type, config, data), // Must come after style
+          ...createLoadOptions(token)
         });
       } catch (e: any) {
         log.error(e.message)();
@@ -128,7 +134,7 @@ function mapProps(source, target, mapping) {
   }
 }
 
-function createStyleProps(config, mapping) {
+function createStyleProps(config: MapTextSubLayerConfig, mapping) {
   const result: Record<string, any> = {};
   mapProps(config, result, mapping);
 
@@ -153,9 +159,22 @@ function createStyleProps(config, mapping) {
 }
 
 /* eslint-disable complexity, max-statements */
-function createChannelProps(visualChannels, type, config, data) {
-  const {colorField, colorScale, sizeField, sizeScale, strokeColorField, strokeColorScale} =
-    visualChannels;
+function createChannelProps(
+  visualChannels: VisualChannels,
+  type: string,
+  config: MapTextSubLayerConfig,
+  data
+) {
+  const {
+    colorField,
+    colorScale,
+    radiusField,
+    radiusScale,
+    sizeField,
+    sizeScale,
+    strokeColorField,
+    strokeColorScale
+  } = visualChannels;
   let {heightField, heightScale} = visualChannels;
   if (type === 'hexagonId') {
     heightField = sizeField;
@@ -179,6 +198,7 @@ function createChannelProps(visualChannels, type, config, data) {
     const {colorAggregation: aggregation, colorRange: range} = visConfig;
     result.getFillColor = getColorAccessor(
       colorField,
+      // @ts-ignore
       colorScale,
       {aggregation, range},
       visConfig.opacity,
@@ -186,6 +206,18 @@ function createChannelProps(visualChannels, type, config, data) {
     );
   }
 
+  if (radiusField || sizeField) {
+    result.getPointRadius = getSizeAccessor(
+      // @ts-ignore
+      radiusField || sizeField,
+      // @ts-ignore
+      radiusScale || sizeScale,
+      visConfig.sizeAggregation,
+      visConfig.radiusRange || visConfig.sizeRange,
+      data
+    );
+  }
+
   if (strokeColorField) {
     const fallbackOpacity = type === 'point' ? visConfig.opacity : 1;
     const opacity =
@@ -193,36 +225,77 @@ function createChannelProps(visualChannels, type, config, data) {
     const {strokeColorAggregation: aggregation, strokeColorRange: range} = visConfig;
     result.getLineColor = getColorAccessor(
       strokeColorField,
+      // @ts-ignore
       strokeColorScale,
+      // @ts-ignore
       {aggregation, range},
       opacity,
       data
     );
   }
+
   if (heightField) {
     result.getElevation = getSizeAccessor(
       heightField,
+      // @ts-ignore
       heightScale,
       visConfig.heightAggregation,
       visConfig.heightRange || visConfig.sizeRange,
       data
     );
   }
-  if (sizeField) {
-    result.getPointRadius = getSizeAccessor(
-      sizeField,
-      sizeScale,
-      visConfig.sizeAggregation,
-      visConfig.radiusRange || visConfig.sizeRange,
-      data
-    );
-  }
+
   if (textLabelField) {
     result.getText = getTextAccessor(textLabelField, data);
     result.pointType = 'text';
     const radius = result.getPointRadius || visConfig.radius;
     result.getTextPixelOffset = getTextPixelOffsetAccessor(textLabel, radius);
+  } else if (visConfig.customMarkers) {
+    const maxIconSize = getMaxMarkerSize(visConfig, visualChannels);
+    const {getPointRadius, getFillColor} = result;
+    result.pointType = 'icon';
+    result.getIcon = getIconUrlAccessor(
+      visualChannels.customMarkersField,
+      visConfig.customMarkersUrl,
+      visConfig.customMarkersRange,
+      maxIconSize,
+      data
+    );
+    result._subLayerProps = {
+      'points-icon': {
+        loadOptions: {
+          image: {
+            type: 'imagebitmap'
+          },
+          imagebitmap: {
+            resizeWidth: maxIconSize,
+            resizeHeight: maxIconSize,
+            resizeQuality: 'high'
+          }
+        }
+      }
+    };
+
+    if (getFillColor) {
+      result.getIconColor = getFillColor;
+    }
+
+    if (getPointRadius) {
+      result.getIconSize = getPointRadius;
+    }
+
+    if (visualChannels.rotationField) {
+      result.getIconAngle = negateAccessor(
+        getSizeAccessor(visualChannels.rotationField, undefined, null, undefined, data)
+      );
+    }
   }
 
   return result;
 }
+
+function createLoadOptions(accessToken: string) {
+  return {
+    loadOptions: {fetch: {headers: {Authorization: `Bearer ${accessToken}`}}}
+  };
+}

package/src/api/types.ts

@@ -0,0 +1,108 @@
+import {SCALE_TYPE} from './layer-map';
+
+export type VisualChannelField = {
+  name: string;
+  type: string;
+};
+
+export type VisualChannels = {
+  colorField?: VisualChannelField;
+  colorScale?: SCALE_TYPE;
+
+  customMarkersField?: VisualChannelField;
+  customMarkersScale?: SCALE_TYPE;
+
+  radiusField?: VisualChannelField;
+  radiusScale?: SCALE_TYPE;
+
+  rotationScale?: SCALE_TYPE;
+  rotationField?: VisualChannelField;
+
+  sizeField?: VisualChannelField;
+  sizeScale?: SCALE_TYPE;
+
+  strokeColorField?: VisualChannelField;
+  strokeColorScale?: SCALE_TYPE;
+
+  heightField?: VisualChannelField;
+  heightScale?: SCALE_TYPE;
+};
+
+export type ColorRange = {
+  category: string;
+  colors: string[];
+  colorMap: string[][] | undefined;
+  name: string;
+  type: string;
+};
+
+export type CustomMarkersRange = {
+  markerMap: {
+    value: string;
+    markerUrl?: string;
+  }[];
+  othersMarker?: string;
+};
+
+export type VisConfig = {
+  filled?: boolean;
+  opacity?: number;
+  enable3d?: boolean;
+
+  colorAggregation?: any;
+  colorRange: ColorRange;
+
+  customMarkers?: boolean;
+  customMarkersRange?: CustomMarkersRange | null;
+  customMarkersUrl?: string | null;
+
+  radius: number;
+  radiusRange?: number[];
+
+  sizeAggregation?: any;
+  sizeRange?: any;
+
+  strokeColorAggregation?: any;
+  strokeOpacity?: number;
+  strokeColorRange?: ColorRange;
+
+  heightRange?: any;
+  heightAggregation?: any;
+};
+
+export type TextLabel = {
+  field: VisualChannelField | null | undefined;
+  alignment?: 'center' | 'bottom' | 'top';
+  anchor?: 'middle' | 'start' | 'end';
+  size: number;
+  color?: number[];
+  offset?: [number, number];
+};
+
+export type MapLayerConfig = {
+  columns?: Record<string, any>;
+  color?: number[];
+  label?: string;
+  dataId: string;
+  textLabel: TextLabel[];
+  visConfig: VisConfig;
+};
+
+export type MapTextSubLayerConfig = Omit<MapLayerConfig, 'textLabel'> & {
+  textLabel?: TextLabel;
+};
+
+export type MapConfigLayer = {
+  type: string;
+  id: string;
+  config: MapLayerConfig;
+  visualChannels: VisualChannels;
+};
+
+export type MapDataset = {
+  id: string;
+  data: any;
+  aggregationExp: string | null;
+  aggregationResLevel: number | null;
+  geoColumn: string;
+};

package/src/index.ts

@@ -3,11 +3,6 @@ export {default as CartoLayer} from './layers/carto-layer';
 export {default as _CartoTileLayer} from './layers/carto-tile-layer';
 export {default as _H3TileLayer} from './layers/h3-tile-layer';
 export {default as _QuadbinTileLayer} from './layers/quadbin-tile-layer';
-export {
-  tileToQuadbin as _tileToQuadbin,
-  quadbinToTile as _quadbinToTile,
-  quadbinZoom as _quadbinZoom
-} from './layers/quadbin-utils';
 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-layer.ts

@@ -305,11 +305,17 @@ export default class CartoLayer<ExtraProps = {}> extends CompositeLayer<
   renderLayers(): Layer | null {
     assert(this.state);
 
-    const {data} = this.state;
+    const {apiVersion, data} = this.state;
 
     if (!data) return null;
 
-    const {updateTriggers} = this.props;
+    const {credentials, updateTriggers} = this.props;
+    const loadOptions: any = {};
+    if (apiVersion === API_VERSIONS.V3) {
+      const localConfig = {...getDefaultCredentials(), ...credentials} as CloudNativeCredentials;
+      const {accessToken} = localConfig;
+      loadOptions.fetch = {headers: {Authorization: `Bearer ${accessToken}`}};
+    }
 
     const [layer, props] = this._getSubLayerAndProps();
 
@@ -319,6 +325,7 @@ export default class CartoLayer<ExtraProps = {}> extends CompositeLayer<
       this.getSubLayerProps({
         id: `carto-${layer.layerName}`,
         data,
+        loadOptions,
         updateTriggers
       })
     );