From 7a70f0ec9441d172c9b24e59ac5703e8bbe91a04 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julio=20Mu=C3=B1oz?= <jmunoz@cartodb.com>
Date: Wed, 19 Jun 2024 15:00:15 +0200
Subject: [PATCH] Make do-catalog compatible with deck.gl > 9

---
 .../components/Catalog/CatalogMap.vue         | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
index 64bc36ead0ec..612df9d7993b 100644
--- a/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
+++ b/lib/assets/javascripts/new-dashboard/components/Catalog/CatalogMap.vue
@@ -32,7 +32,7 @@
 import { mapState } from 'vuex';
 import mapboxgl from 'mapbox-gl';
 import { Deck } from '@deck.gl/core';
-import { CartoLayer, BASEMAP, MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
+import { VectorTileLayer, vectorTilesetSource, BASEMAP } from '@deck.gl/carto';
 
 import { generateColorStyleProps, resetColorStyleProps } from './map-styles/colorStyles';
 import { getQuantiles, formatNumber, capitalize, compare } from './map-styles/utils';
@@ -170,6 +170,12 @@ export default {
       getTooltip: this.getTooltip
     });
 
+    this.tilesetSource = vectorTilesetSource({
+      accessToken: window.accessToken,
+      connectionName: 'carto_dw',
+      tableName: this.tilesetSampleId
+    });
+
     this.renderLayer();
   },
   methods: {
@@ -201,15 +207,8 @@ export default {
     },
     renderLayer () {
       const layers = [
-        new CartoLayer({
-          data: this.tilesetSampleId,
-          type: MAP_TYPES.TILESET,
-          credentials: {
-            apiVersion: API_VERSIONS.V2,
-            username: this.username || 'public',
-            apiKey: 'default_public',
-            ...(this.mapUrl && { mapsUrl: this.mapUrl })
-          },
+        new VectorTileLayer({
+          data: this.tilesetSource,
           ...styleProps.deck,
           lineWidthUnits: 'pixels',
           pointRadiusUnits: 'pixels',
@@ -228,7 +227,6 @@ export default {
             this.setGeomType(tilestats);
             this.setVariable(tilestats);
             this.setStyleProps();
-            this.renderLayer();
             this.showMap = true;
           }
         })