feat(react): Add a map

.env

@@ -0,0 +1 @@
+VITE_CARTO_ACCESS_TOKEN=""

.gitignore

@@ -1,5 +1,7 @@
 node_modules
 
+*.local
+
 sandbox/*
 !sandbox/.gitkeep
 

templates/create-react/package.json

@@ -10,8 +10,22 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@carto/api-client": "^0.0.1-2",
+    "@deck.gl/aggregation-layers": "^9.0.24",
+    "@deck.gl/carto": "^9.0.24",
+    "@deck.gl/core": "^9.0.24",
+    "@deck.gl/extensions": "^9.0.24",
+    "@deck.gl/geo-layers": "^9.0.24",
+    "@deck.gl/json": "^9.0.24",
+    "@deck.gl/layers": "^9.0.24",
+    "@deck.gl/mesh-layers": "^9.0.24",
+    "@deck.gl/react": "^9.0.24",
+    "@loaders.gl/core": "^4.2.2",
+    "@luma.gl/core": "^9.0.16",
+    "maplibre-gl": "^4.5.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-map-gl": "^7.1.7"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

templates/create-react/src/App.tsx

@@ -1,37 +1,6 @@
-import { createContext, useContext } from 'react'
-import cartoLogo from '/carto.svg'
-
-interface AppContextProps {
-  title: string,
-  logo?: {
-    src: string,
-    alt: string,
-  },
-  pages: { name: string, href: string }[],
-  theme: {
-    textColor: string,
-    backgroundColor: string,
-    primaryColor: string,
-    secondaryColor: string,
-  },
-}
-
-const DEFAULT_APP_CONTEXT = {
-  title: /* replace:title:begin */'Untitled'/* replace:title:end */,
-  logo: {
-    src: cartoLogo,
-    alt: 'CARTO logo',
-  },
-  pages: [{name: 'default', href: '/'}],
-  theme: {
-    textColor: '#000000',
-    backgroundColor: '#FFFFFF',
-    primaryColor: '#162945',
-    secondaryColor: '#45546A',
-  },
-};
-
-const AppContext = createContext<AppContextProps>(DEFAULT_APP_CONTEXT)
+import { useContext } from 'react'
+import { AppContext, DEFAULT_APP_CONTEXT } from './context'
+import { Map } from './components/Map'
 
 function App() {
   const context = useContext(AppContext)
@@ -52,7 +21,9 @@ function App() {
         </header>
         <div className="container">
           <aside className="sidebar"></aside>
-          <main className="map"></main>
+          <main className="map">
+            <Map />
+          </main>
         </div>
       </AppContext.Provider>
     </>

templates/create-react/src/components/Map.tsx

@@ -0,0 +1,53 @@
+import { useContext, useMemo } from "react";
+import { AppContext } from "../context";
+
+import {Map as Basemap} from 'react-map-gl/maplibre';
+import DeckGL from '@deck.gl/react';
+import { MapView } from "@deck.gl/core";
+import { VectorTileLayer } from '@deck.gl/carto';
+import { vectorTableSource } from '@carto/api-client';
+
+const MAP_VIEW = new MapView({repeat: true});
+const MAP_STYLE =
+  'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
+
+export function Map() {
+  const context = useContext(AppContext)
+  // const [viewState, setViewState] = useState({...context.viewState});
+  // const [attributionHTML, setAttributionHTML] = useState('');
+
+  // Update sources.
+  const data = useMemo(() => {
+    return vectorTableSource({
+      accessToken: import.meta.env.VITE_CARTO_ACCESS_TOKEN,
+      connectionName: 'carto_dw',
+      tableName: 'carto-demo-data.demo_tables.retail_stores',
+    });
+  }, []);
+
+  // Update layers.
+  const layers = useMemo(() => {
+    return [
+      new VectorTileLayer({
+        id: 'retail_stores',
+        data,
+        pointRadiusMinPixels: 4,
+        getFillColor: [200, 0, 80],
+      }),
+    ];
+  }, [data]);
+
+  // useEffect(() => {
+  //   data?.then(({attribution}) => setAttributionHTML(attribution));
+  // }, [data]);
+
+  return <DeckGL
+    layers={layers}
+    views={MAP_VIEW}
+    initialViewState={context.viewState}
+    controller={{dragRotate: false}}
+    // onViewStateChange={({viewState}) => setViewState(viewState)}
+  >
+    <Basemap reuseMaps mapStyle={MAP_STYLE} />
+  </DeckGL>
+}

templates/create-react/src/context.ts

@@ -0,0 +1,56 @@
+import { createContext } from 'react';
+import cartoLogo from '/carto.svg'
+
+export interface AppContextProps {
+  title: string,
+  logo?: {
+    src: string,
+    alt: string,
+  },
+  viewState: {
+    latitude: number,
+    longitude: number,
+    zoom: number,
+  },
+  credentials: {
+    accessToken: string,
+    apiVersion?: string,
+    apiBaseUrl?: string,
+  },
+  googleApiKey?: string,
+  googleMapId?: string,
+  accountsUrl?: string,
+  pages: { name: string, href: string }[],
+  theme: {
+    textColor: string,
+    backgroundColor: string,
+    primaryColor: string,
+    secondaryColor: string,
+  },
+}
+
+export const DEFAULT_APP_CONTEXT = {
+  title: /* replace:title:begin */'Untitled'/* replace:title:end */,
+  logo: {
+    src: cartoLogo,
+    alt: 'CARTO logo',
+  },
+  viewState: {
+    latitude: 31.8028,
+    longitude: -103.0078,
+    zoom: 2,
+  },
+  credentials: {
+    accessToken: import.meta.env.VITE_CARTO_ACCESS_TOKEN,
+  },
+  accountsUrl: 'http://app.carto.com/',
+  pages: [{name: 'default', href: '/'}],
+  theme: {
+    textColor: '#000000',
+    backgroundColor: '#FFFFFF',
+    primaryColor: '#162945',
+    secondaryColor: '#45546A',
+  },
+};
+
+export const AppContext = createContext<AppContextProps>(DEFAULT_APP_CONTEXT)

templates/create-react/src/index.css

@@ -131,7 +131,7 @@ html, body {
  */
 
 .map {
-    background: var(--secondary-color);
+    position: relative;
 }
 
 /******************************************************************************