@deck.gl/carto 9.0.13 → 9.0.15

package/dist/index.cjs

@@ -36,12 +36,18 @@ __export(dist_exports, {
   RasterTileLayer: () => RasterTileLayer,
   SOURCE_DEFAULTS: () => SOURCE_DEFAULTS,
   VectorTileLayer: () => VectorTileLayer,
+  _GOOGLE_BASEMAPS: () => GOOGLE_BASEMAPS,
   _PointLabelLayer: () => PointLabelLayer,
+  _STYLE_LAYER_GROUPS: () => STYLE_LAYER_GROUPS,
+  _applyLayerGroupFilters: () => applyLayerGroupFilters,
+  _fetchStyle: () => fetchStyle,
+  _getStyleUrl: () => getStyleUrl,
   boundaryQuerySource: () => boundaryQuerySource,
   boundaryTableSource: () => boundaryTableSource,
   colorBins: () => colorBins,
   colorCategories: () => colorCategories,
   colorContinuous: () => colorContinuous,
+  fetchBasemapProps: () => fetchBasemapProps,
   fetchMap: () => fetchMap,
   h3QuerySource: () => h3QuerySource,
   h3TableSource: () => h3TableSource,
@@ -263,9 +269,11 @@ function scaleIdentity() {
   };
   return scale;
 }
+var isObject = (x) => x !== null && typeof x === "object";
+var isPureObject = (x) => isObject(x) && x.constructor === {}.constructor;
 
 // dist/layers/schema/carto-raster-tile-loader.js
-var VERSION = true ? "9.0.13" : "latest";
+var VERSION = true ? "9.0.15" : "latest";
 var id = "cartoRasterTile";
 var DEFAULT_OPTIONS = {
   cartoRasterTile: {
@@ -536,7 +544,7 @@ function binaryToSpatialjson(binary) {
 }
 
 // dist/layers/schema/carto-spatial-tile-loader.js
-var VERSION2 = true ? "9.0.13" : "latest";
+var VERSION2 = true ? "9.0.15" : "latest";
 var id2 = "cartoSpatialTile";
 var DEFAULT_OPTIONS2 = {
   cartoSpatialTile: {
@@ -1042,6 +1050,7 @@ var import_layers2 = require("@deck.gl/layers");
 // dist/layers/heatmap.js
 var import_shadertools = require("@luma.gl/shadertools");
 var fs = `uniform heatmapUniforms {
+vec2 delta;
 float radiusPixels;
 vec2 colorDomain;
 vec3 color1;
@@ -1081,24 +1090,29 @@ float f = (value - range.x) / (range.y - range.x);
 return mix(c1, c2, f) / 255.0;
 }
 const vec3 SHIFT = vec3(1.0, 256.0, 256.0 * 256.0);
+vec4 pack(float value) {
+return vec4(mod(vec3(value, floor(value / SHIFT.yz)), 256.0), 255.0) / 255.0;
+}
 float unpack(vec3 color) {
 return 255.0 * dot(color, SHIFT);
 }
 vec4 heatmap_sampleColor(sampler2D source, vec2 texSize, vec2 texCoord) {
+bool firstPass = (heatmap.delta.y < 0.5);
 float accumulator = 0.0;
 float offset = 0.5 * random(vec3(12.9898, 78.233, 151.7182), 0.0);
 const float sigma = SUPPORT / 3.0;
 const float a = -0.5 / (sigma * sigma);
-const float w0 = 1.0 / (2.0 * 3.141592653589793 * sigma * sigma);
+const float w0 = 0.3989422804014327 / sigma;
 for (float t = -SUPPORT; t <= SUPPORT; t++) {
-for (float s = -SUPPORT; s <= SUPPORT; s++) {
-vec2 percent = (vec2(s, t) + offset - 0.5) / SUPPORT;
+vec2 percent = (t * heatmap.delta + offset - 0.5) / SUPPORT;
 vec2 delta = percent * heatmap.radiusPixels / texSize;
 vec4 offsetColor = texture(source, texCoord + delta);
 float value = unpack(offsetColor.rgb);
-float weight = w0 * exp(a * (s * s + t * t));
+float weight = w0 * exp(a * t * t);
 accumulator += value * weight;
 }
+if (firstPass) {
+return pack(accumulator);
 }
 float f = (accumulator - heatmap.colorDomain[0]) / (heatmap.colorDomain[1] - heatmap.colorDomain[0]);
 vec4 color = vec4(0.0);
@@ -1120,6 +1134,7 @@ var defaultColorRange = [
 var heatmap = {
   name: "heatmap",
   uniformPropTypes: {
+    delta: { value: [0, 1] },
     radiusPixels: { value: 20, min: 0, softMax: 100 },
     colorDomain: { value: [0, 1] },
     color1: { value: [0, 0, 0] },
@@ -1131,6 +1146,7 @@ var heatmap = {
     opacity: { value: 1, min: 0, max: 1 }
   },
   uniformTypes: {
+    delta: "vec2<f32>",
     radiusPixels: "f32",
     colorDomain: "vec2<f32>",
     color1: "vec3<f32>",
@@ -1142,9 +1158,10 @@ var heatmap = {
     opacity: "f32"
   },
   getUniforms: (opts) => {
-    const { colorRange = defaultColorRange, radiusPixels = 20, colorDomain = [0, 1], opacity = 1 } = opts;
+    const { delta = [1, 0], colorRange = defaultColorRange, radiusPixels = 20, colorDomain = [0, 1], opacity = 1 } = opts;
     const [color1, color2, color3, color4, color5, color6] = colorRange;
     return {
+      delta,
       color1,
       color2,
       color3,
@@ -1158,7 +1175,10 @@ var heatmap = {
   },
   dependencies: [import_shadertools.random],
   fs,
-  passes: [{ sampler: true }]
+  passes: [
+    { sampler: true, uniforms: { delta: [1, 0] } },
+    { sampler: true, uniforms: { delta: [0, 1] } }
+  ]
 };
 
 // dist/layers/post-process-utils.js
@@ -1293,7 +1313,7 @@ var _RTTSolidPolygonLayer = class extends RTTModifier(import_layers2.SolidPolygo
   float value = 255.0 * dot(SHIFT, color.rgb);
 
   // Keep "power" delivered to screen constant when tiles update
-  float relativeZoom = log2(project_uScale) - cellResolution + 3.5; // range 0-1
+  float relativeZoom = log2(project.scale) - cellResolution + 3.5; // range 0-1
   float relativeArea = pow(2.0, -2.0 * relativeZoom); // range 0.25-1
   value *= relativeArea;
 
@@ -1321,7 +1341,7 @@ function encodeWeight(w) {
   return [w % 256, Math.floor(w / 256), Math.floor(w / (256 * 256))];
 }
 var defaultProps6 = {
-  ...QuadbinTileLayer.defaultProps,
+  data: TilejsonPropType,
   getWeight: { type: "accessor", value: 1 }
 };
 var _QuadbinHeatmapTileLayer = class extends import_core9.CompositeLayer {
@@ -1619,7 +1639,7 @@ var carto_properties_tile_loader_default = CartoPropertiesTileLoader;
 
 // dist/layers/schema/carto-vector-tile-loader.js
 var import_earcut = __toESM(require("earcut"), 1);
-var VERSION3 = true ? "9.0.13" : "latest";
+var VERSION3 = true ? "9.0.15" : "latest";
 var id3 = "cartoVectorTile";
 var DEFAULT_OPTIONS3 = {
   cartoVectorTile: {
@@ -1777,15 +1797,140 @@ var VectorTileLayer = _VectorTileLayer;
   _VectorTileLayer.defaultProps = defaultProps9;
 })();
 
+// dist/api/carto-api-error.js
+var CartoAPIError = class extends Error {
+  constructor(error, errorContext, response) {
+    let responseString = "Failed to connect";
+    if (response) {
+      responseString = "Server returned: ";
+      if (response.status === 400) {
+        responseString += "Bad request";
+      } else if (response.status === 401 || response.status === 403) {
+        responseString += "Unauthorized access";
+      } else if (response.status === 404) {
+        responseString += "Not found";
+      } else {
+        responseString += "Error";
+      }
+      responseString += ` (${response.status}):`;
+    }
+    responseString += ` ${error.message || error}`;
+    let message = `${errorContext.requestType} API request failed`;
+    message += `
+${responseString}`;
+    for (const key of Object.keys(errorContext)) {
+      if (key === "requestType")
+        continue;
+      message += `
+${formatErrorKey(key)}: ${errorContext[key]}`;
+    }
+    message += "\n";
+    super(message);
+    this.name = "CartoAPIError";
+    this.response = response;
+    this.error = error;
+    this.errorContext = errorContext;
+  }
+};
+function formatErrorKey(key) {
+  return key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
+}
+
 // dist/basemap.js
-var baseUrl = "https://basemaps.cartocdn.com/gl/{basemap}-gl-style/style.json";
+var cartoStyleUrlTemplate = "https://basemaps.cartocdn.com/gl/{basemap}-gl-style/style.json";
+var CARTO_MAP_STYLES = ["positron", "dark-matter", "voyager"];
+var GOOGLE_BASEMAPS = {
+  roadmap: {
+    mapTypeId: "roadmap",
+    mapId: "3754c817b510f791"
+  },
+  "google-positron": {
+    mapTypeId: "roadmap",
+    mapId: "ea84ae4203ef21cd"
+  },
+  "google-dark-matter": {
+    mapTypeId: "roadmap",
+    mapId: "2fccc3b36c22a0e2"
+  },
+  "google-voyager": {
+    mapTypeId: "roadmap",
+    mapId: "885caf1e15bb9ef2"
+  },
+  satellite: {
+    mapTypeId: "satellite"
+  },
+  hybrid: {
+    mapTypeId: "hybrid"
+  },
+  terrain: {
+    mapTypeId: "terrain"
+  }
+};
+var STYLE_LAYER_GROUPS = [
+  {
+    slug: "label",
+    filter: ({ id: id4 }) => Boolean(id4.match(/(?=(label|_label|place-|place_|poi-|poi_|watername_|roadname_|housenumber))/)),
+    defaultVisibility: true
+  },
+  {
+    slug: "road",
+    filter: ({ id: id4 }) => Boolean(id4.match(/(?=(road|railway|tunnel|street|bridge))(?!.*label)/)),
+    defaultVisibility: true
+  },
+  {
+    slug: "border",
+    filter: ({ id: id4 }) => Boolean(id4.match(/border|boundaries|boundary_/)),
+    defaultVisibility: false
+  },
+  {
+    slug: "building",
+    filter: ({ id: id4 }) => Boolean(id4.match(/building/)),
+    defaultVisibility: true
+  },
+  {
+    slug: "water",
+    filter: ({ id: id4 }) => Boolean(id4.match(/(?=(water|stream|ferry))/)),
+    defaultVisibility: true
+  },
+  {
+    slug: "land",
+    filter: ({ id: id4 }) => Boolean(id4.match(/(?=(parks|landcover|industrial|sand|hillshade|park_))/)),
+    defaultVisibility: true
+  }
+];
+function applyLayerGroupFilters(style, visibleLayerGroups) {
+  if (!Array.isArray(style == null ? void 0 : style.layers)) {
+    return style;
+  }
+  const removedLayerFilters = STYLE_LAYER_GROUPS.filter((lg) => !visibleLayerGroups[lg.slug]).map((lg) => lg.filter);
+  const visibleLayers = style.layers.filter((layer) => removedLayerFilters.every((match) => !match(layer)));
+  return {
+    ...style,
+    layers: visibleLayers
+  };
+}
+function someLayerGroupsDisabled(visibleLayerGroups) {
+  return visibleLayerGroups && Object.values(visibleLayerGroups).every(Boolean) === false;
+}
+function getStyleUrl(styleType) {
+  return cartoStyleUrlTemplate.replace("{basemap}", styleType);
+}
+async function fetchStyle({ styleUrl, errorContext }) {
+  let response;
+  return await fetch(styleUrl, { mode: "cors" }).then((res) => {
+    response = res;
+    return res.json();
+  }).catch((error) => {
+    throw new CartoAPIError(error, { ...errorContext, requestType: "Basemap style" }, response);
+  });
+}
 var basemap_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")
+  VOYAGER: getStyleUrl("voyager"),
+  POSITRON: getStyleUrl("positron"),
+  DARK_MATTER: getStyleUrl("dark-matter"),
+  VOYAGER_NOLABELS: getStyleUrl("voyager-nolabels"),
+  POSITRON_NOLABELS: getStyleUrl("positron-nolabels"),
+  DARK_MATTER_NOLABELS: getStyleUrl("dark-matter-nolabels")
 };
 
 // dist/style/color-bins-style.js
@@ -1896,45 +2041,6 @@ function colorContinuous({ attr, domain, colors = DEFAULT_PALETTE, nullColor = N
   };
 }
 
-// dist/api/carto-api-error.js
-var CartoAPIError = class extends Error {
-  constructor(error, errorContext, response) {
-    let responseString = "Failed to connect";
-    if (response) {
-      responseString = "Server returned: ";
-      if (response.status === 400) {
-        responseString += "Bad request";
-      } else if (response.status === 401 || response.status === 403) {
-        responseString += "Unauthorized access";
-      } else if (response.status === 404) {
-        responseString += "Not found";
-      } else {
-        responseString += "Error";
-      }
-      responseString += ` (${response.status}):`;
-    }
-    responseString += ` ${error.message || error}`;
-    let message = `${errorContext.requestType} API request failed`;
-    message += `
-${responseString}`;
-    for (const key of Object.keys(errorContext)) {
-      if (key === "requestType")
-        continue;
-      message += `
-${formatErrorKey(key)}: ${errorContext[key]}`;
-    }
-    message += "\n";
-    super(message);
-    this.name = "CartoAPIError";
-    this.response = response;
-    this.error = error;
-    this.errorContext = errorContext;
-  }
-};
-function formatErrorKey(key) {
-  return key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase());
-}
-
 // dist/api/common.js
 var import_core13 = require("@deck.gl/core");
 var DEFAULT_API_BASE_URL = "https://gcp-us-east1.api.carto.com";
@@ -1975,17 +2081,21 @@ function buildQueryUrl({ apiBaseUrl, connectionName }) {
 
 // dist/api/request-with-parameters.js
 function encodeParameter(name, value) {
+  if (isPureObject(value) || Array.isArray(value)) {
+    return `${name}=${encodeURIComponent(JSON.stringify(value))}`;
+  }
   return `${name}=${encodeURIComponent(value)}`;
 }
 var REQUEST_CACHE = /* @__PURE__ */ new Map();
-async function requestWithParameters({ baseUrl: baseUrl2, parameters, headers: customHeaders, errorContext }) {
-  const key = createCacheKey(baseUrl2, parameters || {}, customHeaders || {});
+async function requestWithParameters({ baseUrl, parameters, headers: customHeaders, errorContext }) {
+  parameters = { ...DEFAULT_PARAMETERS, ...parameters };
+  const key = createCacheKey(baseUrl, parameters || {}, customHeaders || {});
   if (REQUEST_CACHE.has(key)) {
     return REQUEST_CACHE.get(key);
   }
-  const url = parameters ? createURLWithParameters(baseUrl2, parameters) : baseUrl2;
+  const url = parameters ? createURLWithParameters(baseUrl, parameters) : baseUrl;
   const headers = { ...DEFAULT_HEADERS, ...customHeaders };
-  const fetchPromise = url.length > MAX_GET_LENGTH ? fetch(baseUrl2, { method: "POST", body: JSON.stringify(parameters), headers }) : fetch(url, { headers });
+  const fetchPromise = url.length > MAX_GET_LENGTH ? fetch(baseUrl, { method: "POST", body: JSON.stringify(parameters), headers }) : fetch(url, { headers });
   let response;
   const jsonPromise = fetchPromise.then((_response) => {
     response = _response;
@@ -2002,16 +2112,14 @@ async function requestWithParameters({ baseUrl: baseUrl2, parameters, headers: c
   REQUEST_CACHE.set(key, jsonPromise);
   return jsonPromise;
 }
-function createCacheKey(baseUrl2, parameters, headers) {
+function createCacheKey(baseUrl, parameters, headers) {
   const parameterEntries = Object.entries(parameters).sort(([a], [b]) => a > b ? 1 : -1);
   const headerEntries = Object.entries(headers).sort(([a], [b]) => a > b ? 1 : -1);
-  return JSON.stringify({ baseUrl: baseUrl2, parameters: parameterEntries, headers: headerEntries });
+  return JSON.stringify({ baseUrl, parameters: parameterEntries, headers: headerEntries });
 }
-function createURLWithParameters(baseUrl2, parameters) {
-  const encodedParameters = Object.entries({ ...DEFAULT_PARAMETERS, ...parameters }).map(([key, value]) => {
-    return encodeParameter(key, value);
-  });
-  return `${baseUrl2}?${encodedParameters.join("&")}`;
+function createURLWithParameters(baseUrl, parameters) {
+  const encodedParameters = Object.entries(parameters).map(([key, value]) => encodeParameter(key, value));
+  return `${baseUrl}?${encodedParameters.join("&")}`;
 }
 
 // dist/sources/base-source.js
@@ -2029,7 +2137,7 @@ async function baseSource(endpoint, options, urlParameters) {
       mergedOptions[key] = optionalOptions[key];
     }
   }
-  const baseUrl2 = buildSourceUrl(mergedOptions);
+  const baseUrl = buildSourceUrl(mergedOptions);
   const { clientId, format } = mergedOptions;
   const headers = { Authorization: `Bearer ${options.accessToken}`, ...options.headers };
   const parameters = { client: clientId, ...urlParameters };
@@ -2040,7 +2148,7 @@ async function baseSource(endpoint, options, urlParameters) {
     source: JSON.stringify(parameters, void 0, 2)
   };
   const mapInstantiation = await requestWithParameters({
-    baseUrl: baseUrl2,
+    baseUrl,
     parameters,
     headers,
     errorContext
@@ -2080,10 +2188,10 @@ var boundaryQuerySource = async function(options) {
     urlParameters.columns = columns.join(",");
   }
   if (filters) {
-    urlParameters.filters = JSON.stringify(filters);
+    urlParameters.filters = filters;
   }
   if (queryParameters) {
-    urlParameters.queryParameters = JSON.stringify(queryParameters);
+    urlParameters.queryParameters = queryParameters;
   }
   return baseSource("boundary", options, urlParameters);
 };
@@ -2100,7 +2208,7 @@ var boundaryTableSource = async function(options) {
     urlParameters.columns = columns.join(",");
   }
   if (filters) {
-    urlParameters.filters = JSON.stringify(filters);
+    urlParameters.filters = filters;
   }
   return baseSource("boundary", options, urlParameters);
 };
@@ -2118,7 +2226,7 @@ var h3QuerySource = async function(options) {
     urlParameters.aggregationResLevel = String(aggregationResLevel);
   }
   if (queryParameters) {
-    urlParameters.queryParameters = JSON.stringify(queryParameters);
+    urlParameters.queryParameters = queryParameters;
   }
   return baseSource("query", options, urlParameters);
 };
@@ -2165,7 +2273,7 @@ var quadbinQuerySource = async function(options) {
     urlParameters.aggregationResLevel = String(aggregationResLevel);
   }
   if (queryParameters) {
-    urlParameters.queryParameters = JSON.stringify(queryParameters);
+    urlParameters.queryParameters = queryParameters;
   }
   return baseSource("query", options, urlParameters);
 };
@@ -2205,10 +2313,10 @@ var vectorQuerySource = async function(options) {
     urlParameters.columns = columns.join(",");
   }
   if (filters) {
-    urlParameters.filters = JSON.stringify(filters);
+    urlParameters.filters = filters;
   }
   if (queryParameters) {
-    urlParameters.queryParameters = JSON.stringify(queryParameters);
+    urlParameters.queryParameters = queryParameters;
   }
   return baseSource("query", options, urlParameters);
 };
@@ -2226,7 +2334,7 @@ var vectorTableSource = async function(options) {
     urlParameters.columns = columns.join(",");
   }
   if (filters) {
-    urlParameters.filters = JSON.stringify(filters);
+    urlParameters.filters = filters;
   }
   return baseSource("table", options, urlParameters);
 };
@@ -2839,6 +2947,75 @@ function createLoadOptions(accessToken) {
   };
 }
 
+// dist/api/basemap.js
+var CUSTOM_STYLE_ID_PREFIX = "custom:";
+var DEFAULT_CARTO_STYLE = "positron";
+function mapLibreViewpros(config) {
+  const { longitude, latitude, ...rest } = config.mapState;
+  return {
+    center: [longitude, latitude],
+    ...rest
+  };
+}
+async function fetchBasemapProps({ config, errorContext, applyLayerFilters = true }) {
+  var _a;
+  const { mapStyle } = config;
+  const styleType = mapStyle.styleType || DEFAULT_CARTO_STYLE;
+  if (styleType.startsWith(CUSTOM_STYLE_ID_PREFIX)) {
+    const currentCustomStyle = (_a = config.customBaseMaps) == null ? void 0 : _a.customStyle;
+    if (currentCustomStyle) {
+      return {
+        type: "maplibre",
+        props: {
+          style: currentCustomStyle.style || currentCustomStyle.url,
+          ...mapLibreViewpros(config)
+        },
+        attribution: currentCustomStyle.customAttribution
+      };
+    }
+  }
+  if (CARTO_MAP_STYLES.includes(styleType)) {
+    const { visibleLayerGroups } = mapStyle;
+    const styleUrl = getStyleUrl(styleType);
+    let style = styleUrl;
+    let rawStyle = styleUrl;
+    if (applyLayerFilters && visibleLayerGroups && someLayerGroupsDisabled(visibleLayerGroups)) {
+      rawStyle = await fetchStyle({ styleUrl, errorContext });
+      style = applyLayerGroupFilters(rawStyle, visibleLayerGroups);
+    }
+    return {
+      type: "maplibre",
+      props: {
+        style,
+        ...mapLibreViewpros(config)
+      },
+      visibleLayerGroups,
+      rawStyle
+    };
+  }
+  const googleBasemapDef = GOOGLE_BASEMAPS[styleType];
+  if (googleBasemapDef) {
+    const { mapState } = config;
+    return {
+      type: "google-maps",
+      props: {
+        ...googleBasemapDef,
+        center: { lat: mapState.latitude, lng: mapState.longitude },
+        zoom: mapState.zoom + 1,
+        tilt: mapState.pitch,
+        heading: mapState.bearing
+      }
+    };
+  }
+  return {
+    type: "maplibre",
+    props: {
+      style: getStyleUrl(DEFAULT_CARTO_STYLE),
+      ...mapLibreViewpros(config)
+    }
+  };
+}
+
 // dist/api/fetch-map.js
 async function _fetchMapDataset(dataset, accessToken, apiBaseUrl, clientId, headers) {
   const { aggregationExp, aggregationResLevel, connectionName, columns, format, geoColumn, source, type, queryParameters } = dataset;
@@ -2902,7 +3079,7 @@ async function _fetchTilestats(attribute, dataset, accessToken, apiBaseUrl) {
   if (!("tilestats" in data)) {
     throw new CartoAPIError(new Error(`Invalid dataset for tilestats: ${id4}`), errorContext);
   }
-  const baseUrl2 = buildStatsUrl({ attribute, apiBaseUrl, ...dataset });
+  const baseUrl = buildStatsUrl({ attribute, apiBaseUrl, ...dataset });
   const client = new URLSearchParams(data.tiles[0]).get("client");
   const headers = { Authorization: `Bearer ${accessToken}` };
   const parameters = {};
@@ -2916,7 +3093,7 @@ async function _fetchTilestats(attribute, dataset, accessToken, apiBaseUrl) {
     }
   }
   const stats = await requestWithParameters({
-    baseUrl: baseUrl2,
+    baseUrl,
     headers,
     parameters,
     errorContext
@@ -2962,9 +3139,9 @@ async function fetchMap({ apiBaseUrl = DEFAULT_API_BASE_URL, cartoMapId, clientI
     assert(typeof onNewData === "function", "`onNewData` must be a function");
     assert(typeof autoRefresh === "number" && autoRefresh > 0, "`autoRefresh` must be a positive number");
   }
-  const baseUrl2 = buildPublicMapUrl({ apiBaseUrl, cartoMapId });
+  const baseUrl = buildPublicMapUrl({ apiBaseUrl, cartoMapId });
   const errorContext = { requestType: "Public map", mapId: cartoMapId };
-  const map = await requestWithParameters({ baseUrl: baseUrl2, headers, errorContext });
+  const map = await requestWithParameters({ baseUrl, headers, errorContext });
   let stopAutoRefresh;
   if (autoRefresh) {
     const intervalId = setInterval(async () => {
@@ -2991,9 +3168,12 @@ async function fetchMap({ apiBaseUrl = DEFAULT_API_BASE_URL, cartoMapId, clientI
       }
     }
   });
-  await fillInMapDatasets(map, clientId, apiBaseUrl, headers);
+  const [basemap] = await Promise.all([
+    fetchBasemapProps({ config: map.keplerMapConfig.config, errorContext }),
+    fillInMapDatasets(map, clientId, apiBaseUrl, headers)
+  ]);
   await fillInTileStats(map, apiBaseUrl);
-  const out = { ...parseMap(map), ...{ stopAutoRefresh } };
+  const out = { ...parseMap(map), basemap, ...{ stopAutoRefresh } };
   const textLayers = out.layers.filter((layer) => {
     const pointType = layer.props.pointType || "";
     return pointType.includes("text");
@@ -3007,22 +3187,23 @@ async function fetchMap({ apiBaseUrl = DEFAULT_API_BASE_URL, cartoMapId, clientI
 
 // dist/api/query.js
 var query = async function(options) {
-  const { apiBaseUrl = SOURCE_DEFAULTS.apiBaseUrl, connectionName, sqlQuery, queryParameters } = options;
+  const { apiBaseUrl = SOURCE_DEFAULTS.apiBaseUrl, clientId = SOURCE_DEFAULTS.clientId, connectionName, sqlQuery, queryParameters } = options;
   const urlParameters = { q: sqlQuery };
   if (queryParameters) {
     urlParameters.queryParameters = JSON.stringify(queryParameters);
   }
-  const baseUrl2 = buildQueryUrl({ apiBaseUrl, connectionName });
+  const baseUrl = buildQueryUrl({ apiBaseUrl, connectionName });
   const headers = { Authorization: `Bearer ${options.accessToken}`, ...options.headers };
+  const parameters = { client: clientId, ...urlParameters };
   const errorContext = {
     requestType: "SQL",
     connection: options.connectionName,
     type: "query",
-    source: JSON.stringify(urlParameters, void 0, 2)
+    source: JSON.stringify(parameters, void 0, 2)
   };
   return await requestWithParameters({
-    baseUrl: baseUrl2,
-    parameters: urlParameters,
+    baseUrl,
+    parameters,
     headers,
     errorContext
   });