Carto: fetchMap to support custom basemaps

visgl · Apr 30, 2024 · f03cd54 · f03cd54
1 parent 65f9a25
commit f03cd54
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/modules/carto/src/api/parse-map.ts b/modules/carto/src/api/parse-map.ts
@@ -16,14 +16,15 @@ import {
 import PointLabelLayer from '../layers/point-label-layer';
 import {CollisionFilterExtension} from '@deck.gl/extensions';
 import {assert} from '../utils';
-import {MapDataset, MapLayerConfig, VisualChannels} from './types';
+import {KeplerMapConfig, MapDataset, MapLayerConfig, VisualChannels} from './types';
+import {getCartoMapStyle} from './basemap-style';
 
 const collisionFilterExtension = new CollisionFilterExtension();
 
 export function parseMap(json) {
   const {keplerMapConfig, datasets, token} = json;
   assert(keplerMapConfig.version === 'v1', 'Only support Kepler v1');
-  const {mapState, mapStyle} = keplerMapConfig.config;
+  const {mapState, mapStyle} = keplerMapConfig.config as KeplerMapConfig;
   const {layers, layerBlending, interactionConfig} = keplerMapConfig.config.visState;
 
   return {
@@ -34,6 +35,7 @@ export function parseMap(json) {
     updatedAt: json.updatedAt,
     initialViewState: mapState,
     mapStyle,
+    basemap: getCartoMapStyle(keplerMapConfig.config),
     token,
     layers: layers.reverse().map(({id, type, config, visualChannels}) => {
       try {

diff --git a/modules/carto/src/api/types.ts b/modules/carto/src/api/types.ts
@@ -176,3 +176,30 @@ export type MapDataset = {
   aggregationResLevel: number | null;
   geoColumn: string;
 };
+
+export interface Basemap {
+  id: string;
+  name: string;
+
+  settings: {
+    url: string;
+  };
+  type: 'wmts' | 'raster' | 'tilejson';
+  thumbnail: string;
+  attribution?: string;
+}
+export type KeplerMapConfig = {
+  mapState: any;
+  mapStyle: {
+    styleType: string;
+    visibleLayerGroups: Record<string, boolean>;
+  };
+  visState: {
+    layers: MapConfigLayer[];
+  };
+  layerBlending: any;
+  interactionConfig: any;
+  customBaseMaps?: {
+    custom?: Basemap;
+  };
+};
diff --git a/test/apps/carto-map/app.ts b/test/apps/carto-map/app.ts
@@ -24,15 +24,15 @@ async function createMap(cartoMapId: string) {
   }
 
   // Get map info from CARTO and update deck
-  const {initialViewState, mapStyle, layers} = await fetchMap(options);
+  const {initialViewState, mapStyle, basemap, layers} = await fetchMap(options);
   deck.setProps({initialViewState, layers});
 
   // Mapbox basemap (optional)
-  const {label} = mapStyle.visibleLayerGroups;
-  const MAP_STYLE = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}${
-    label ? '' : '-nolabels'
-  }-gl-style/style.json`;
-  const map = new mapboxgl.Map({container: 'map', style: MAP_STYLE, interactive: false});
+  // const {label} = mapStyle.visibleLayerGroups;
+  // const MAP_STYLE = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}${
+  //   label ? '' : '-nolabels'
+  // }-gl-style/style.json`;
+  const map = new mapboxgl.Map({container: 'map', style: basemap?.styleUrl, interactive: false});
   deck.setProps({
     controller: true,
     onViewStateChange: ({viewState}) => {