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,