attribution support

visgl · Apr 30, 2024 · 0f04eb6 · 0f04eb6
1 parent ec279e9
commit 0f04eb6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/docs/api-reference/carto/fetch-map.md b/docs/api-reference/carto/fetch-map.md
@@ -26,13 +26,12 @@ fetchMap({cartoMapId}).then(map => new Deck(map));
 ```js
 import mapboxgl from 'mapbox-gl';
 
-fetchMap({cartoMapId}).then(({initialViewState, mapStyle, layers}) => {
-  // Add Mapbox GL for the basemap. It's not a requirement if you don't need a basemap.
-  const MAP_STYLE = `https://basemaps.cartocdn.com/gl/${mapStyle.styleType}-gl-style/style.json`;
+fetchMap({cartoMapId}).then(({initialViewState, basemap, layers}) => {
   const deckgl = new deck.DeckGL({
     container: 'container',
     controller: true,
-    mapStyle: MAP_STYLE,
+    // Add Mapbox GL for the basemap. It's not a requirement if you don't need a basemap.
+    mapStyle: basemap.styleUrl,
     initialViewState,
     layers
   });

diff --git a/modules/carto/src/api/basemap-style.ts → modules/carto/src/api/basemap.ts b/modules/carto/src/api/basemap-style.ts → modules/carto/src/api/basemap.ts
@@ -1,11 +1,11 @@
-import {KeplerMapConfig} from './types';
+import {Basemap, KeplerMapConfig} from './types';
 
-const getRasterJsonMapStyle = (url: string) => ({
+const getRasterJsonMapStyle = (basemap: Basemap) => ({
   version: 8,
   sources: {
     'basemap-tile-source': {
       type: 'raster',
-      tiles: [url],
+      tiles: [basemap.settings.url],
       tileSize: 256
     }
   },
@@ -17,7 +17,8 @@ const getRasterJsonMapStyle = (url: string) => ({
       minzoom: 0,
       maxzoom: 22
     }
-  ]
+  ],
+  attribution: basemap.attribution
 });
 
 function isRasterBasemap(url: string) {
@@ -32,13 +33,14 @@ function isWmtsBasemap(url: string) {
   return url.includes('service=WMS');
 }
 
-export function getCustomBasemapStyle(url: string): string | any {
+export function getCustomBasemapStyle(basemap: Basemap): string | any {
+  const url = basemap.settings.url;
   if (isRasterBasemap(url)) {
-    return getRasterJsonMapStyle(url);
+    return getRasterJsonMapStyle(basemap);
   } else if (isTileJsonBasemap(url)) {
     return url;
   } else if (isWmtsBasemap(url)) {
-    return getRasterJsonMapStyle(url);
+    return getRasterJsonMapStyle(basemap);
   }
   throw new Error('Unknown basemap format');
 }
@@ -48,22 +50,22 @@ const CARTO_MAP_STYLES = ['positron', 'dark-matter', 'voyager'];
 const CARTO_MAP_ATRRIBUTION = `© <a href="https://carto.com/about-carto/" target="_blank" rel="noopener noreferrer">CARTO</a>, ©
 <a href="http://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">OpenStreetMap</a> contributors`;
 
-export function getCartoMapStyle(config: KeplerMapConfig) {
+export function getBasemapSettings(config: KeplerMapConfig) {
   const {mapStyle} = config;
   const styleType = mapStyle.styleType || 'positron';
   if (styleType.startsWith('custom:')) {
     const currentCustomBasemap = config.customBaseMaps?.custom;
     if (currentCustomBasemap) {
       return {
-        styleUrl: getCustomBasemapStyle(currentCustomBasemap.settings.url),
+        styleUrl: getCustomBasemapStyle(currentCustomBasemap),
         attribution: currentCustomBasemap.attribution
       };
     }
   }
   if (CARTO_MAP_STYLES.includes(styleType)) {
     const {label} = mapStyle.visibleLayerGroups;
     const labelSuffix = label ? '' : '-nolabels';
-    const styleUrl = `${CARTO_MAP_BASEURL}${mapStyle.styleType}${labelSuffix}-gl-style/style.json`;
+    const styleUrl = `${CARTO_MAP_BASEURL}${styleType}${labelSuffix}-gl-style/style.json`;
     return {
       styleUrl,
       attribution: CARTO_MAP_ATRRIBUTION

diff --git a/modules/carto/src/api/parse-map.ts b/modules/carto/src/api/parse-map.ts
@@ -17,7 +17,7 @@ import PointLabelLayer from '../layers/point-label-layer';
 import {CollisionFilterExtension} from '@deck.gl/extensions';
 import {assert} from '../utils';
 import {KeplerMapConfig, MapDataset, MapLayerConfig, VisualChannels} from './types';
-import {getCartoMapStyle} from './basemap-style';
+import {getBasemapSettings} from './basemap';
 
 const collisionFilterExtension = new CollisionFilterExtension();
 
@@ -35,7 +35,7 @@ export function parseMap(json) {
     updatedAt: json.updatedAt,
     initialViewState: mapState,
     mapStyle,
-    basemap: getCartoMapStyle(keplerMapConfig.config),
+    basemap: getBasemapSettings(keplerMapConfig.config),
     token,
     layers: layers.reverse().map(({id, type, config, visualChannels}) => {
       try {