Rename to CartoTileLayer to VectorTileLayer

visgl · Sep 28, 2023 · 0182008 · 0182008
1 parent 2a6cbad
commit 0182008
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 24 deletions.
diff --git a/modules/carto/src/api/layer-map.ts b/modules/carto/src/api/layer-map.ts
@@ -18,10 +18,10 @@ import {CPUGridLayer, HeatmapLayer, HexagonLayer} from '@deck.gl/aggregation-lay
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {H3HexagonLayer} from '@deck.gl/geo-layers';
 
-import CartoVectorLayer from '../layers/carto-vector-layer';
 import H3TileLayer from '../layers/h3-tile-layer';
 import QuadbinTileLayer from '../layers/quadbin-tile-layer';
 import RasterTileLayer from '../layers/raster-tile-layer';
+import VectorTileLayer from '../layers/vector-tile-layer';
 import {MapType, TILE_FORMATS, TileFormat} from './maps-api-common';
 import {assert, createBinaryProxy} from '../utils';
 import {
@@ -204,7 +204,7 @@ export function layerFromTileDataset(
   formatTiles: TileFormat | null = TILE_FORMATS.MVT,
   scheme: string,
   type?: MapType
-): typeof CartoVectorLayer | typeof H3TileLayer | typeof QuadbinTileLayer {
+): typeof VectorTileLayer | typeof H3TileLayer | typeof QuadbinTileLayer {
   if (type === 'raster') {
     return RasterTileLayer;
   }
@@ -215,7 +215,7 @@ export function layerFromTileDataset(
     return QuadbinTileLayer;
   }
 
-  return CartoVectorLayer;
+  return VectorTileLayer;
 }
 
 function getTileLayer(dataset: MapDataset, basePropMap) {

diff --git a/modules/carto/src/index.ts b/modules/carto/src/index.ts
@@ -1,6 +1,6 @@
 export {getDefaultCredentials, setDefaultCredentials} from './config';
-export {default as CartoLayer} from './layers/carto-layer';
-export {default as CartoVectorLayer} from './layers/carto-vector-layer';
+export {default as CartoLayer} from './layers/carto-layer'; // <-- REMOVE in v9
+export {default as VectorTileLayer} from './layers/vector-tile-layer';
 export {default as H3TileLayer} from './layers/h3-tile-layer';
 export {default as _PointLabelLayer} from './layers/point-label-layer';
 export {default as QuadbinTileLayer} from './layers/quadbin-tile-layer';

diff --git a/...es/carto/src/layers/carto-vector-layer.ts → ...les/carto/src/layers/vector-tile-layer.ts b/...es/carto/src/layers/carto-vector-layer.ts → ...les/carto/src/layers/vector-tile-layer.ts
@@ -22,17 +22,17 @@ import {injectAccessToken} from './utils';
 
 const defaultTileFormat = TILE_FORMATS.BINARY;
 
-const defaultProps: DefaultProps<CartoVectorLayerProps> = {
+const defaultProps: DefaultProps<VectorTileLayerProps> = {
   ...MVTLayer.defaultProps,
   data: TilejsonPropType,
   formatTiles: defaultTileFormat
 };
 
-/** All properties supported by CartoVectorLayer. */
-export type CartoVectorLayerProps = _CartoVectorLayerProps & Omit<MVTLayerProps, 'data'>;
+/** All properties supported by VectorTileLayer. */
+export type VectorTileLayerProps = _VectorTileLayerProps & Omit<MVTLayerProps, 'data'>;
 
-/** Properties added by CartoVectorLayer. */
-type _CartoVectorLayerProps = {
+/** Properties added by VectorTileLayer. */
+type _VectorTileLayerProps = {
   data: null | CartoTilejsonResult | Promise<CartoTilejsonResult>;
   /** Use to override the default tile data format.
    *
@@ -45,10 +45,10 @@ type _CartoVectorLayerProps = {
 
 // TODO Perhaps we can't subclass MVTLayer and keep types. Better to subclass TileLayer instead?
 // @ts-ignore
-export default class CartoVectorLayer<ExtraProps extends {} = {}> extends MVTLayer<
-  Required<_CartoVectorLayerProps> & ExtraProps
+export default class VectorTileLayer<ExtraProps extends {} = {}> extends MVTLayer<
+  Required<_VectorTileLayerProps> & ExtraProps
 > {
-  static layerName = 'CartoVectorLayer';
+  static layerName = 'VectorTileLayer';
   static defaultProps = defaultProps;
 
   initializeState(): void {

diff --git a/test/apps/carto-dynamic-tile/app.tsx b/test/apps/carto-dynamic-tile/app.tsx
@@ -6,11 +6,11 @@ import {StaticMap} from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
 import {
   CartoTilejsonResult,
-  CartoVectorLayer,
   CartoVectorTableSource,
   H3TileLayer,
   RasterTileLayer,
   QuadbinTileLayer,
+  VectorTileLayer
 } from '@deck.gl/carto';
 import datasets from './datasets';
 import {Layer} from '@deck.gl/core';
@@ -38,7 +38,7 @@ function Root() {
     layers = [useQuadbinLayer(datasource)];
   } else if (dataset.includes('vector')) {
     layers = [useVectorLayer(datasource)];
-  } 
+  }
 
   return (
     <>
@@ -67,10 +67,18 @@ function Root() {
 }
 
 function useH3Layer(datasource) {
-  const {getFillColor, Source, aggregationExp, columns, spatialDataColumn, sqlQuery, tableName} = datasource;
+  const {getFillColor, Source, aggregationExp, columns, spatialDataColumn, sqlQuery, tableName} =
+    datasource;
   // useMemo to avoid a map instantiation on every re-render
   const tilejson = useMemo<Promise<CartoTilejsonResult>>(() => {
-    return Source({...globalOptions, aggregationExp, columns, spatialDataColumn, sqlQuery, tableName});
+    return Source({
+      ...globalOptions,
+      aggregationExp,
+      columns,
+      spatialDataColumn,
+      sqlQuery,
+      tableName
+    });
   }, [Source, aggregationExp, columns, spatialDataColumn, sqlQuery, tableName]);
 
   return new H3TileLayer({
@@ -97,12 +105,19 @@ function useRasterLayer(datasource) {
   });
 }
 
-
 function useQuadbinLayer(datasource) {
-  const {getFillColor, Source, aggregationExp, columns, spatialDataColumn, sqlQuery, tableName} = datasource;
+  const {getFillColor, Source, aggregationExp, columns, spatialDataColumn, sqlQuery, tableName} =
+    datasource;
   // useMemo to avoid a map instantiation on every re-render
   const tilejson = useMemo<Promise<CartoTilejsonResult>>(() => {
-    return Source({...globalOptions, aggregationExp, columns, spatialDataColumn, sqlQuery, tableName});
+    return Source({
+      ...globalOptions,
+      aggregationExp,
+      columns,
+      spatialDataColumn,
+      sqlQuery,
+      tableName
+    });
   }, [Source, aggregationExp, columns, spatialDataColumn, sqlQuery, tableName]);
 
   return new QuadbinTileLayer({
@@ -121,7 +136,7 @@ function useVectorLayer(datasource) {
     return Source({...globalOptions, columns, spatialDataColumn, sqlQuery, tableName});
   }, [Source, null, columns, spatialDataColumn, sqlQuery, tableName]);
 
-  return new CartoVectorLayer({
+  return new VectorTileLayer({
     id: 'carto',
     // @ts-ignore
     data: tilejson, // TODO how to correctly specify data type?
@@ -132,14 +147,17 @@ function useVectorLayer(datasource) {
 }
 
 async function fetchLayerData() {
-  const data = await CartoVectorTableSource({...globalOptions, tableName: 'carto-demo-data.demo_tables.chicago_crime_sample', format: 'geojson'});
+  const data = await CartoVectorTableSource({
+    ...globalOptions,
+    tableName: 'carto-demo-data.demo_tables.chicago_crime_sample',
+    format: 'geojson'
+  });
   console.log(data.tiles); // <- Typescript error
   console.log(data.features); // <- type: GeoJSON
-  console.log(data)
+  console.log(data);
 }
 fetchLayerData();
 
-
 function ObjectSelect({title, obj, value, onSelect}) {
   const keys = Object.values(obj).sort() as string[];
   return (