diff --git a/docs/api-reference/carto/basemap.md b/docs/api-reference/carto/basemap.md
index 31f4c88251c..a364d2edf35 100644
--- a/docs/api-reference/carto/basemap.md
+++ b/docs/api-reference/carto/basemap.md
@@ -38,7 +38,7 @@ To use pre-bundled scripts:
-
+
@@ -50,7 +50,7 @@ To use pre-bundled scripts:
```
```js
-const map = new mapboxgl.Map({
+const map = new maplibregl.Map({
container: 'map',
style: deck.carto.BASEMAP.POSITRON,
interactive: false
diff --git a/modules/carto/src/api/basemap.ts b/modules/carto/src/api/basemap.ts
index 0f909535d32..e899c7d17f3 100644
--- a/modules/carto/src/api/basemap.ts
+++ b/modules/carto/src/api/basemap.ts
@@ -7,12 +7,12 @@ import {
getStyleUrl,
someLayerGroupsDisabled
} from '../basemap';
-import {APIErrorContext, Basemap, KeplerMapConfig, MaplibreBasemapProps} from './types';
+import {APIErrorContext, Basemap, KeplerMapConfig, MapLibreBasemapProps} from './types';
const CUSTOM_STYLE_ID_PREFIX = 'custom:';
const DEFAULT_CARTO_STYLE = 'positron';
-function mapLibreViewpros(config: KeplerMapConfig): Omit {
+function mapLibreViewpros(config: KeplerMapConfig): Omit {
const {longitude, latitude, ...rest} = config.mapState as MapViewState;
return {
center: [longitude, latitude],
diff --git a/modules/carto/src/api/fetch-map.ts b/modules/carto/src/api/fetch-map.ts
index c56757ef491..018626f0a43 100644
--- a/modules/carto/src/api/fetch-map.ts
+++ b/modules/carto/src/api/fetch-map.ts
@@ -216,7 +216,7 @@ export type FetchMapOptions = {
export type FetchMapResult = ParseMapResult & {
/**
- * Basemap properties
+ * Basemap properties.
*/
basemap: Basemap | null;
stopAutoRefresh?: () => void;
diff --git a/modules/carto/src/api/index.ts b/modules/carto/src/api/index.ts
index 14dfcbdc114..f60309335ed 100644
--- a/modules/carto/src/api/index.ts
+++ b/modules/carto/src/api/index.ts
@@ -8,7 +8,7 @@ export type {
RequestType,
QueryParameters,
Basemap,
- MaplibreBasemap,
+ MapLibreBasemap,
GoogleBasemap
} from './types';
export {query} from './query';
diff --git a/modules/carto/src/api/types.ts b/modules/carto/src/api/types.ts
index a2233e9a8a4..c35dbd087b2 100644
--- a/modules/carto/src/api/types.ts
+++ b/modules/carto/src/api/types.ts
@@ -208,7 +208,7 @@ export type KeplerMapConfig = {
export type BasemapType = 'maplibre' | 'google-maps';
-export type Basemap = MaplibreBasemap | GoogleBasemap;
+export type Basemap = MapLibreBasemap | GoogleBasemap;
export type BasemapCommon = {
/**
@@ -227,17 +227,15 @@ export type BasemapCommon = {
props: Record;
};
-export type MaplibreBasemap = BasemapCommon & {
+export type MapLibreBasemap = BasemapCommon & {
type: 'maplibre';
/**
- * Basemap style URL or style object.
+ * MapLibre map properties.
*
- * Note, layers in this style may be filtered by `visibleLayerGroups`.
- *
- * Non-filtered pristine version is stored in `rawStyle` property.
+ * Meant to be passed to directly to `maplibregl.Map` object.
*/
- props: MaplibreBasemapProps;
+ props: MapLibreBasemapProps;
/**
* Layer groups to be displayed in the basemap.
@@ -251,8 +249,8 @@ export type MaplibreBasemap = BasemapCommon & {
rawStyle?: string | Record;
};
-// Cherry-pick of google maplibregl Map API props that are supported/provided by fetchMap interface
-export type MaplibreBasemapProps = {
+// Cherry-pick of maplibregl Map API props that are supported/provided by fetchMap interface
+export type MapLibreBasemapProps = {
style: string | Record;
center: [number, number];
zoom: number;
@@ -265,11 +263,13 @@ export type GoogleBasemap = BasemapCommon & {
/**
* Google map properties.
+ *
+ * Meant to be passed to directly to `google.maps.Map` object.
*/
props: GoogleBasemapProps;
};
-// Cherry-pick of google Map API props that are supported/provided by fetchMap interface
+// Cherry-pick of Google Map API props that are supported/provided by fetchMap interface
export type GoogleBasemapProps = {
mapTypeId: string;
mapId?: string;
diff --git a/modules/carto/src/index.ts b/modules/carto/src/index.ts
index aa372077b65..3a269bf53ff 100644
--- a/modules/carto/src/index.ts
+++ b/modules/carto/src/index.ts
@@ -38,14 +38,15 @@ export {fetchBasemapProps} from './api/basemap';
export type {
APIErrorContext,
FetchMapOptions,
+ FetchMapResult,
Format,
MapType,
RequestType,
QueryParameters,
QueryOptions,
- Basemap,
- MaplibreBasemap,
- GoogleBasemap
+ Basemap as _Basemap,
+ MapLibreBasemap as _MapLibreBasemap,
+ GoogleBasemap as _GoogleBasemap
} from './api/index';
import {
diff --git a/test/apps/carto-map/app.ts b/test/apps/carto-map/app.ts
index ab2e0dbe801..89661ead592 100644
--- a/test/apps/carto-map/app.ts
+++ b/test/apps/carto-map/app.ts
@@ -1,4 +1,10 @@
-import {BASEMAP, fetchMap, FetchMapOptions, GoogleBasemap, MaplibreBasemap} from '@deck.gl/carto';
+import {
+ BASEMAP,
+ fetchMap,
+ FetchMapOptions,
+ _GoogleBasemap as GoogleBasemap,
+ _MapLibreBasemap as MapLibreBasemap
+} from '@deck.gl/carto';
import {Deck} from '@deck.gl/core';
import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
@@ -20,10 +26,32 @@ const GOOGLE_MAPS_API_KEY = '';
const apiBaseUrl = 'https://gcp-us-east1.api.carto.com';
// const apiBaseUrl = 'https://gcp-us-east1-05.dev.api.carto.com';
+async function createMapWithDeckController(result: FetchMapResult) {
+ const deck = new Deck({canvas: 'deck-canvas'});
+ // Get map info from CARTO and update deck
+ const {initialViewState, layers} = result;
+ deck.setProps({initialViewState, layers});
+
+ const basemap = result.basemap as MapLibreBasemap;
+ const map = new mapboxgl.Map({
+ container: 'map',
+ ...basemap.props,
+ interactive: false
+ });
+ deck.setProps({
+ controller: true,
+ onViewStateChange: ({viewState}) => {
+ const {longitude, latitude, ...rest} = viewState;
+ map.jumpTo({center: [longitude, latitude], ...rest});
+ }
+ });
+ return deck;
+}
+
async function createMapWithMapboxOverlay(result: FetchMapResult) {
document.getElementById('deck-canvas')!.style.display = 'none';
- const basemap = result.basemap as MaplibreBasemap;
+ const basemap = result.basemap as MapLibreBasemap;
const map = new mapboxgl.Map({
container: 'map',
...basemap?.props,
@@ -39,10 +67,11 @@ async function createMapWithMapboxOverlay(result: FetchMapResult) {
const overlay = new MapboxOverlay({layers: result.layers});
map.addControl(overlay);
- return map;
+ return overlay;
}
async function createMapWithGoogleMapsOverlay(result: FetchMapResult) {
+ document.getElementById('deck-canvas')!.style.display = 'none';
const loader = new Loader({apiKey: GOOGLE_MAPS_API_KEY});
const googlemaps = await loader.importLibrary('maps');
@@ -81,6 +110,7 @@ async function createMap(cartoMapId: string) {
deck = await createMapWithGoogleMapsOverlay(result);
} else {
deck = await createMapWithMapboxOverlay(result);
+ // deck = await createMapWithDeckController(result);
}
}
diff --git a/test/apps/carto-map/index.html b/test/apps/carto-map/index.html
index c09a39ce366..5ec17a70c82 100644
--- a/test/apps/carto-map/index.html
+++ b/test/apps/carto-map/index.html
@@ -31,6 +31,7 @@
diff --git a/test/modules/carto/api/basemap.spec.ts b/test/modules/carto/api/basemap.spec.ts
index 9dab34aab38..b27aed1e151 100644
--- a/test/modules/carto/api/basemap.spec.ts
+++ b/test/modules/carto/api/basemap.spec.ts
@@ -1,4 +1,4 @@
-import {BASEMAP, CartoAPIError, MaplibreBasemap} from '@deck.gl/carto';
+import {BASEMAP, CartoAPIError, _MapLibreBasemap as MapLibreBasemap} from '@deck.gl/carto';
import test from 'tape-catch';
import {withMockFetchMapsV3} from '../mock-fetch';
import {KeplerMapConfig} from '@deck.gl/carto/api/types';
@@ -82,7 +82,7 @@ test('fetchBasemapProps#carto - with filters', async t =>
t.equals(calls.length, 1, 'should call fetch only once');
t.equals(calls[0].url, BASEMAP.VOYAGER, 'should request voyager style');
t.equals(r.type, 'maplibre', 'proper basemap type is returned');
- const r2 = r as MaplibreBasemap;
+ const r2 = r as MapLibreBasemap;
t.equals(r2.rawStyle, mockedCartoStyle, 'raw style is returned');
t.deepEquals(
r2.props.style,