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

package/src/api/{maps-v3-client.js → maps-v3-client.ts}

@@ -1,21 +1,36 @@
 /**
  * Maps API Client for Carto 3
  */
-import {getDefaultCredentials, buildMapsUrlFromBase} from '../config';
-import {API_VERSIONS, encodeParameter, FORMATS, MAP_TYPES} from './maps-api-common';
+import {getDefaultCredentials, buildMapsUrlFromBase, CloudNativeCredentials} from '../config';
+import {
+  API_VERSIONS,
+  encodeParameter,
+  Format,
+  FORMATS,
+  MapInstantiation,
+  MapType,
+  MAP_TYPES,
+  SchemaField
+} from './maps-api-common';
 import {parseMap} from './parseMap';
 import {log} from '@deck.gl/core';
+import {assert} from '../utils';
 
 const MAX_GET_LENGTH = 2048;
 const DEFAULT_CLIENT = 'deck-gl-carto';
 
+interface RequestParams {
+  method?: string;
+  url: string;
+  accessToken?: string;
+  body?: any;
+}
+
 /**
  * Request against Maps API
  */
-async function request({method, url, format, accessToken, body}) {
-  let response;
-
-  const headers = {
+async function request({method, url, accessToken, body}: RequestParams): Promise<Response> {
+  const headers: Record<string, string> = {
     Accept: 'application/json'
   };
 
@@ -29,8 +44,7 @@ async function request({method, url, format, accessToken, body}) {
 
   try {
     /* global fetch */
-    /* eslint no-undef: "error" */
-    response = await fetch(url, {
+    return await fetch(url, {
       method,
       headers,
       body
@@ -38,24 +52,44 @@ async function request({method, url, format, accessToken, body}) {
   } catch (error) {
     throw new Error(`Failed to connect to Maps API: ${error}`);
   }
+}
 
-  if (format === FORMATS.NDJSON) {
-    return response;
-  }
-
+async function requestJson<T = unknown>({
+  method,
+  url,
+  accessToken,
+  body
+}: RequestParams): Promise<T> {
+  const response = await request({method, url, accessToken, body});
   const json = await response.json();
 
   if (!response.ok) {
     dealWithError({response, error: json.error});
   }
+  return json as T;
+}
 
-  return json.rows ? json.rows : json;
+async function requestData({
+  method,
+  url,
+  accessToken,
+  format,
+  body
+}: RequestParams & {
+  format: Format;
+}): Promise<Response | unknown> {
+  if (format === FORMATS.NDJSON) {
+    return request({method, url, accessToken, body});
+  }
+
+  const data = await requestJson<any>({method, url, accessToken, body});
+  return data.rows ? data.rows : data;
 }
 
 /**
  * Display proper message from Maps API error
  */
-function dealWithError({response, error}) {
+function dealWithError({response, error}: {response: Response; error?: string}): never {
   switch (response.status) {
     case 400:
       throw new Error(`Bad request. ${error}`);
@@ -67,10 +101,29 @@ function dealWithError({response, error}) {
   }
 }
 
+type FetchLayerDataParams = {
+  type: MapType;
+  source: string;
+  connection: string;
+  credentials: CloudNativeCredentials;
+  geoColumn?: string;
+  columns?: string[];
+  schema?: boolean;
+  clientId?: string;
+  format?: Format;
+};
+
 /**
  * Build a URL with all required parameters
  */
-function getParameters({type, source, geoColumn, columns, schema, clientId}) {
+function getParameters({
+  type,
+  source,
+  geoColumn,
+  columns,
+  schema,
+  clientId
+}: Omit<FetchLayerDataParams, 'connection' | 'credentials'>) {
   const parameters = [encodeParameter('client', clientId || DEFAULT_CLIENT)];
   if (schema) {
     parameters.push(encodeParameter('schema', true));
@@ -100,26 +153,24 @@ export async function mapInstantiation({
   columns,
   schema,
   clientId
-}) {
+}: FetchLayerDataParams): Promise<MapInstantiation> {
   const baseUrl = `${credentials.mapsUrl}/${connection}/${type}`;
   const url = `${baseUrl}?${getParameters({type, source, geoColumn, columns, schema, clientId})}`;
   const {accessToken} = credentials;
 
-  const format = 'json';
-
   if (url.length > MAX_GET_LENGTH && type === MAP_TYPES.QUERY) {
     // need to be a POST request
     const body = JSON.stringify({
       q: source,
       client: clientId || DEFAULT_CLIENT
     });
-    return await request({method: 'POST', url: baseUrl, format, accessToken, body});
+    return await requestJson({method: 'POST', url: baseUrl, accessToken, body});
   }
 
-  return await request({url, format, accessToken});
+  return await requestJson({url, accessToken});
 }
 
-function getUrlFromMetadata(metadata, format) {
+function getUrlFromMetadata(metadata: MapInstantiation, format: Format): string | null {
   const m = metadata[format];
 
   if (m && !m.error && m.url) {
@@ -129,16 +180,26 @@ function getUrlFromMetadata(metadata, format) {
   return null;
 }
 
-function checkFetchLayerDataParameters({type, source, connection, localCreds}) {
-  log.assert(connection, 'Must define connection');
-  log.assert(type, 'Must define a type');
-  log.assert(source, 'Must define a source');
-
-  log.assert(localCreds.apiVersion === API_VERSIONS.V3, 'Method only available for v3');
-  log.assert(localCreds.apiBaseUrl, 'Must define apiBaseUrl');
-  log.assert(localCreds.accessToken, 'Must define an accessToken');
+function checkFetchLayerDataParameters({
+  type,
+  source,
+  connection,
+  credentials
+}: FetchLayerDataParams) {
+  assert(connection, 'Must define connection');
+  assert(type, 'Must define a type');
+  assert(source, 'Must define a source');
+
+  assert(credentials.apiVersion === API_VERSIONS.V3, 'Method only available for v3');
+  assert(credentials.apiBaseUrl, 'Must define apiBaseUrl');
+  assert(credentials.accessToken, 'Must define an accessToken');
 }
 
+export interface FetchLayerDataResult {
+  data: any;
+  format: Format;
+  schema?: SchemaField[];
+}
 export async function fetchLayerData({
   type,
   source,
@@ -149,7 +210,7 @@ export async function fetchLayerData({
   format,
   schema,
   clientId
-}) {
+}: FetchLayerDataParams): Promise<FetchLayerDataResult> {
   // Internally we split data fetching into two parts to allow us to
   // conditionally fetch the actual data, depending on the metadata state
   const {url, accessToken, mapFormat, metadata} = await _fetchDataUrl({
@@ -164,8 +225,8 @@ export async function fetchLayerData({
     clientId
   });
 
-  const data = await request({url, format: mapFormat, accessToken});
-  const result = {data, format: mapFormat};
+  const data = await requestData({url, format: mapFormat, accessToken});
+  const result: FetchLayerDataResult = {data, format: mapFormat};
   if (schema) {
     result.schema = metadata.schema;
   }
@@ -183,7 +244,7 @@ async function _fetchDataUrl({
   format,
   schema,
   clientId
-}) {
+}: FetchLayerDataParams) {
   const defaultCredentials = getDefaultCredentials();
   // Only pick up default credentials if they have been defined for
   // correct API version
@@ -191,7 +252,7 @@ async function _fetchDataUrl({
     ...(defaultCredentials.apiVersion === API_VERSIONS.V3 && defaultCredentials),
     ...credentials
   };
-  checkFetchLayerDataParameters({type, source, connection, localCreds});
+  checkFetchLayerDataParameters({type, source, connection, credentials: localCreds});
 
   if (!localCreds.mapsUrl) {
     localCreds.mapsUrl = buildMapsUrlFromBase(localCreds.apiBaseUrl);
@@ -207,13 +268,13 @@ async function _fetchDataUrl({
     schema,
     clientId
   });
-  let url;
-  let mapFormat;
+  let url: string | null = null;
+  let mapFormat: Format | undefined;
 
   if (format) {
     mapFormat = format;
     url = getUrlFromMetadata(metadata, format);
-    log.assert(url, `Format ${format} not available`);
+    assert(url, `Format ${format} not available`);
   } else {
     // guess map format
     const prioritizedFormats = [FORMATS.GEOJSON, FORMATS.JSON, FORMATS.NDJSON, FORMATS.TILEJSON];
@@ -224,6 +285,7 @@ async function _fetchDataUrl({
         break;
       }
     }
+    assert(url && mapFormat, 'Unsupported data formats received from backend.');
   }
 
   const {accessToken} = localCreds;
@@ -239,7 +301,7 @@ export async function getData({
   columns,
   format,
   clientId
-}) {
+}: FetchLayerDataParams) {
   log.deprecated('getData', 'fetchLayerData')();
   const layerData = await fetchLayerData({
     type,
@@ -255,8 +317,13 @@ export async function getData({
   return layerData.data;
 }
 
-/* global clearInterval, setInterval, URLSearchParams */
-async function _fetchMapDataset(dataset, accessToken, credentials, clientId) {
+/* global clearInterval, setInterval, URL */
+async function _fetchMapDataset(
+  dataset,
+  accessToken: string,
+  credentials: CloudNativeCredentials,
+  clientId?: string
+) {
   // First fetch metadata
   const {connectionName: connection, source, type} = dataset;
   const {url, mapFormat} = await _fetchDataUrl({
@@ -268,54 +335,75 @@ 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;
   }
   dataset.cache = cache;
 
   // Only fetch if the data has changed
-  const data = await request({url, format: mapFormat, accessToken});
-  dataset.data = data;
+  dataset.data = await requestData({url, format: mapFormat, accessToken});
+
   return true;
 }
 
-async function fillInMapDatasets({datasets, token}, clientId, credentials) {
+async function fillInMapDatasets(
+  {datasets, token},
+  clientId: string,
+  credentials: CloudNativeCredentials
+) {
   const promises = datasets.map(dataset => _fetchMapDataset(dataset, token, credentials, clientId));
   return await Promise.all(promises);
 }
 
-export async function fetchMap({cartoMapId, clientId, credentials, autoRefresh, onNewData}) {
+export async function fetchMap({
+  cartoMapId,
+  clientId,
+  credentials,
+  autoRefresh,
+  onNewData
+}: {
+  cartoMapId: string;
+  clientId: string;
+  credentials?: CloudNativeCredentials;
+  autoRefresh?: number;
+  onNewData?: (map: any) => void;
+}) {
   const defaultCredentials = getDefaultCredentials();
   const localCreds = {
     ...(defaultCredentials.apiVersion === API_VERSIONS.V3 && defaultCredentials),
     ...credentials
-  };
+  } as CloudNativeCredentials;
+  const {accessToken} = localCreds;
 
-  log.assert(cartoMapId, `Must define CARTO map id: fetchMap({cartoMapId: 'XXXX-XXXX-XXXX'})`);
+  assert(cartoMapId, 'Must define CARTO map id: fetchMap({cartoMapId: "XXXX-XXXX-XXXX"})');
 
-  log.assert(localCreds.apiVersion === API_VERSIONS.V3, 'Method only available for v3');
-  log.assert(localCreds.apiBaseUrl, 'Must define apiBaseUrl');
+  assert(localCreds.apiVersion === API_VERSIONS.V3, 'Method only available for v3');
+  assert(localCreds.apiBaseUrl, 'Must define apiBaseUrl');
   if (!localCreds.mapsUrl) {
     localCreds.mapsUrl = buildMapsUrlFromBase(localCreds.apiBaseUrl);
   }
 
   if (autoRefresh || onNewData) {
-    log.assert(onNewData, 'Must define `onNewData` when using autoRefresh');
-    log.assert(typeof onNewData === 'function', '`onNewData` must be a function');
-    log.assert(autoRefresh > 0, '`autoRefresh` must be a positive number');
+    assert(onNewData, 'Must define `onNewData` when using autoRefresh');
+    assert(typeof onNewData === 'function', '`onNewData` must be a function');
+    assert(
+      typeof autoRefresh === 'number' && autoRefresh > 0,
+      '`autoRefresh` must be a positive number'
+    );
   }
 
   const url = `${localCreds.mapsUrl}/public/${cartoMapId}`;
-  const map = await request({url});
+  const map = await requestJson<any>({url, accessToken});
 
   // Periodically check if the data has changed. Note that this
   // will not update when a map is published.
-  let stopAutoRefresh;
+  let stopAutoRefresh: (() => void) | undefined;
   if (autoRefresh) {
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
     const intervalId = setInterval(async () => {
-      const changed = await fillInMapDatasets(map, clientId, credentials);
-      if (changed.some(v => v === true)) {
+      const changed = await fillInMapDatasets(map, clientId, localCreds);
+      if (onNewData && changed.some(v => v === true)) {
         onNewData(parseMap(map));
       }
     }, autoRefresh * 1000);
@@ -325,7 +413,7 @@ export async function fetchMap({cartoMapId, clientId, credentials, autoRefresh,
   }
 
   // Mutates map.datasets so that dataset.data contains data
-  await fillInMapDatasets(map, clientId, credentials);
+  await fillInMapDatasets(map, clientId, localCreds);
   return {
     ...parseMap(map),
     ...{stopAutoRefresh}

package/src/api/{parseMap.js → parseMap.ts}

@@ -7,10 +7,11 @@ import {
   getTextPixelOffsetAccessor
 } from './layer-map';
 import {_flatten as flatten, log} from '@deck.gl/core';
+import {assert} from '../utils';
 
 export function parseMap(json) {
   const {keplerMapConfig, datasets} = json;
-  log.assert(keplerMapConfig.version === 'v1', 'Only support Kepler v1');
+  assert(keplerMapConfig.version === 'v1', 'Only support Kepler v1');
   const {mapState, mapStyle} = keplerMapConfig.config;
   const {layers, layerBlending, interactionConfig} = keplerMapConfig.config.visState;
 
@@ -24,12 +25,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}`);
+        assert(dataset, `No dataset matching dataId: ${dataId}`);
         const {data} = dataset;
-        log.assert(data, `No data loaded for dataId: ${dataId}`);
+        assert(data, `No data loaded for dataId: ${dataId}`);
+        const {Layer, propMap, defaultProps} = getLayer(type, config, dataset);
         return new Layer({
           id,
           data,
@@ -39,7 +40,7 @@ export function parseMap(json) {
           ...createStyleProps(config, propMap),
           ...createChannelProps(visualChannels, type, config, data) // Must come after style
         });
-      } catch (e) {
+      } catch (e: any) {
         log.error(e.message)();
         return undefined;
       }
@@ -121,7 +122,7 @@ function mapProps(source, target, mapping) {
 }
 
 function createStyleProps(config, mapping) {
-  const result = {};
+  const result: Record<string, any> = {};
   mapProps(config, result, mapping);
   result.highlightColor = config.visConfig.enable3d ? [255, 255, 255, 60] : [252, 242, 26, 255];
   return result;
@@ -137,7 +138,7 @@ function createChannelProps(visualChannels, type, config, data) {
     heightScale = sizeScale;
   }
   const {textLabel, visConfig} = config;
-  const result = {};
+  const result: Record<string, any> = {};
   const textLabelField = textLabel && textLabel.field;
   if (colorField) {
     result.getFillColor = getColorAccessor(

package/src/basemap.ts

@@ -0,0 +1,10 @@
+const baseUrl = 'https://basemaps.cartocdn.com/gl/{basemap}-gl-style/style.json';
+
+export default {
+  VOYAGER: baseUrl.replace('{basemap}', 'voyager'),
+  POSITRON: baseUrl.replace('{basemap}', 'positron'),
+  DARK_MATTER: baseUrl.replace('{basemap}', 'dark-matter'),
+  VOYAGER_NOLABELS: baseUrl.replace('{basemap}', 'voyager-nolabels'),
+  POSITRON_NOLABELS: baseUrl.replace('{basemap}', 'positron-nolabels'),
+  DARK_MATTER_NOLABELS: baseUrl.replace('{basemap}', 'dark-matter-nolabels')
+} as const;

package/src/{config.js → config.ts}

@@ -4,17 +4,33 @@ export const defaultClassicCredentials = {
   apiKey: 'default_public',
   region: 'us',
   username: 'public'
-};
+} as const;
 
 export const defaultCloudNativeCredentials = {
   apiBaseUrl: 'https://gcp-us-east1.api.carto.com'
-};
+} as const;
+
+export interface ClassicCredentials {
+  apiVersion: 'v1' | 'v2';
+  apiKey: string;
+  region: string;
+  username: string;
+  mapsUrl?: string;
+}
+
+export interface CloudNativeCredentials {
+  apiVersion: 'v3';
+  apiBaseUrl: string;
+  accessToken?: string;
+  mapsUrl?: string;
+}
 
-let credentials = {};
+export type Credentials = ClassicCredentials | CloudNativeCredentials;
+let credentials: Credentials = {} as Credentials;
 
 setDefaultCredentials({});
 
-export function setDefaultCredentials({apiVersion, ...rest}) {
+export function setDefaultCredentials({apiVersion, ...rest}: Partial<Credentials>) {
   apiVersion = apiVersion || API_VERSIONS.V3;
 
   switch (apiVersion) {
@@ -30,11 +46,11 @@ export function setDefaultCredentials({apiVersion, ...rest}) {
   }
 }
 
-export function getDefaultCredentials() {
+export function getDefaultCredentials(): Credentials {
   return credentials;
 }
 
-export function buildMapsUrlFromBase(apiBaseUrl) {
+export function buildMapsUrlFromBase(apiBaseUrl: string): string {
   let suffix = '/v3/maps';
   if (apiBaseUrl.endsWith('/')) {
     suffix = suffix.substring(1);

package/src/{index.js → index.ts}

@@ -1,6 +1,6 @@
-export {getDefaultCredentials, setDefaultCredentials} from './config.js';
+export {getDefaultCredentials, setDefaultCredentials} from './config';
 export {default as CartoLayer} from './layers/carto-layer';
-export {default as _CartoDynamicTileLayer} from './layers/carto-dynamic-tile-layer';
+export {default as _CartoTileLayer} from './layers/carto-tile-layer';
 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.js

@@ -1,5 +1,5 @@
 import {CompositeLayer, log} from '@deck.gl/core';
-import CartoDynamicTileLayer from './carto-dynamic-tile-layer';
+import CartoTileLayer from './carto-tile-layer';
 import {MVTLayer} from '@deck.gl/geo-layers';
 import {GeoJsonLayer} from '@deck.gl/layers';
 import {fetchLayerData, getDataV2, API_VERSIONS} from '../api';
@@ -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,40 +126,39 @@ export default class CartoLayer extends CompositeLayer {
     }
   }
 
-  renderLayers() {
+  _getSubLayerAndProps() {
     const {data, format, apiVersion} = this.state;
 
-    if (!data) return null;
+    const {uniqueIdProperty} = defaultProps;
+    const props = {uniqueIdProperty, ...this.props};
+    delete props.data;
 
-    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 (apiVersion === API_VERSIONS.V1 || apiVersion === API_VERSIONS.V2) {
+      return [MVTLayer, props];
     }
 
-    const {formatTiles, uniqueIdProperty} = defaultProps;
-    const props = {formatTiles, uniqueIdProperty, ...this.props};
-    delete props.data;
+    if (format === FORMATS.TILEJSON) {
+      /* global URL */
+      props.formatTiles =
+        props.formatTiles ||
+        new URL(data.tiles[0]).searchParams.get('formatTiles') ||
+        TILE_FORMATS.MVT;
+
+      return props.formatTiles === TILE_FORMATS.MVT ? [MVTLayer, props] : [CartoTileLayer, props];
+    }
+
+    // It's a geojson layer
+    return [GeoJsonLayer, props];
+  }
+
+  renderLayers() {
+    const {data} = this.state;
+
+    if (!data) return null;
+
+    const {updateTriggers} = this.props;
+
+    const [layer, props] = this._getSubLayerAndProps();
 
     // eslint-disable-next-line new-cap
     return new layer(

package/src/layers/{carto-dynamic-tile-layer.js → carto-tile-layer.js}

@@ -5,8 +5,8 @@ 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 {Tile} from './schema/carto-dynamic-tile';
-import {encodeParameter, TILE_FORMATS} from '../api/maps-api-common';
+import {Tile} from './schema/carto-tile';
+import {TILE_FORMATS} from '../api/maps-api-common';
 
 function parseJSON(arrayBuffer) {
   return JSON.parse(new TextDecoder().decode(arrayBuffer));
@@ -31,9 +31,9 @@ function unpackProperties(properties) {
   });
 }
 
-function parseCartoDynamicTile(arrayBuffer, options) {
+function parseCartoTile(arrayBuffer, options) {
   if (!arrayBuffer) return null;
-  const formatTiles = options && options.cartoDynamicTile && options.cartoDynamicTile.formatTiles;
+  const formatTiles = options && options.cartoTile && options.cartoTile.formatTiles;
   if (formatTiles === TILE_FORMATS.GEOJSON) return geojsonToBinary(parseJSON(arrayBuffer).features);
 
   const tile = parsePbf(arrayBuffer);
@@ -48,24 +48,25 @@ function parseCartoDynamicTile(arrayBuffer, options) {
   return data;
 }
 
-const CartoDynamicTileLoader = {
-  name: 'CARTO Dynamic Tile',
-  id: 'cartoDynamicTile',
+const CartoTileLoader = {
+  name: 'CARTO Tile',
+  id: 'cartoTile',
   module: 'carto',
   extensions: ['pbf'],
   mimeTypes: ['application/x-protobuf'],
   category: 'geometry',
   worker: false,
-  parse: async (arrayBuffer, options) => parseCartoDynamicTile(arrayBuffer, options),
-  parseSync: parseCartoDynamicTile,
+  parse: async (arrayBuffer, options) => parseCartoTile(arrayBuffer, options),
+  parseSync: parseCartoTile,
   options: {
-    cartoDynamicTile: {
+    cartoTile: {
+      // TODO change to BINARY for 8.7 prod release
       formatTiles: TILE_FORMATS.BINARY
     }
   }
 };
 
-export default class CartoDynamicTileLayer extends MVTLayer {
+export default class CartoTileLayer extends MVTLayer {
   getTileData(tile) {
     let url = _getURLFromTemplate(this.state.data, tile);
     if (!url) {
@@ -86,8 +87,11 @@ 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)}`;
-      loadOptions.cartoDynamicTile = {formatTiles};
+      // eslint-disable-next-line no-undef
+      const newUrl = new URL(url);
+      newUrl.searchParams.set('formatTiles', formatTiles);
+      url = newUrl.toString();
+      loadOptions.cartoTile = {formatTiles};
     }
 
     return fetch(url, {propName: 'data', layer: this, loadOptions, signal});
@@ -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({
@@ -113,5 +117,5 @@ export default class CartoDynamicTileLayer extends MVTLayer {
   }
 }
 
-CartoDynamicTileLayer.layerName = 'CartoDynamicTileLayer';
-CartoDynamicTileLayer.defaultProps = {...MVTLayer.defaultProps, loaders: [CartoDynamicTileLoader]};
+CartoTileLayer.layerName = 'CartoTileLayer';
+CartoTileLayer.defaultProps = {...MVTLayer.defaultProps, loaders: [CartoTileLoader]};