cartodb / carto-react-template

CARTO for React. The best way to develop Location Intelligence (LI) Apps usign CARTO platform and React

CARTO for React

Welcome to CARTO for React! The best way to develop Location Intelligence (LI) Apps using CARTO platform + React + deck.gl.

You can see for yourself how easy it is to create an application in this video.

It is based on the most popular toolchain, Create React App, and it will allow you to start with a well designed structure following the best practices for modern frontend development and an integrated toolchain for testing, building and deploying your application.

@carto/cra-template-base-3 (basic template for CARTO 3)

@carto/cra-template-base-3-typescript (basic template for CARTO 3 with TypeScript)

@carto/cra-template-sample-app-3 (sample app template for CARTO 3)

Getting started

The basic prerequisite for using Create React App is to have a package manager (npm or yarn) previously installed. yarn is preferred for developers contributing to the projects, as it will ensure a better integration with external libs.

To download our basic template for create-react-app and kickstart your application, just type the following command:

npm:

npx create-react-app my-app --template @carto/base-3

Yarn:

yarn create react-app my-app --template @carto/base-3

Note: that's the version corresponding to CARTO 3 (latest, recommended), but there are also other templates mentioned above.

Then you can start the development server:

npm:

cd my-app
npm start

Yarn:

cd my-app
yarn start

A full Sample Application with the most common functionality, deployed from the sample-app-3 template, is available at https://sample-app-react.carto.com

---

Want to know more about it? Visit the CARTO for React documentation page for more details, guides and a reference.

carto-react-template's Issues

How I could draw shapes.

Hello I don't find in the documentation How I could draw shapes(point, lines, etc). Thanks

Compilation error: Can't resolve 'gl-matrix/mat3'

Following the steps in Getting Started brings up this compilation error:

./node_modules/@math.gl/core/dist/esm/classes/matrix3.js
Module not found: Can't resolve 'gl-matrix/mat3' in '/Users/julien/workspace/tmp/carto-base-3/node_modules/@math.gl/core/dist/esm/classes'

yarn build shows a similar error.

I've tried yarn add gl-matrix-mat3 but the error remains. I have the same issue with the other templates (base-2 and sample-app-2).

Performance issues for SQL-based source, following tutorial

Hi there,

I followed this tutorial: https://github.com/CartoDB/carto-react-template/blob/master/docs/guides/02_page_layer_widgets.md

But I used my own dataset instead: https://nycplanning-web.carto.com/u/planninglabs/dataset/facdb_v2019_12

When I compare the dataset used in the tutorial (~12k rows), it's not that much smaller than my dataset (~30k rows). They are both point geometries. Yet, the performance difference is drastic: when using my dataset, the app barely functions and ultimately runs out of memory before crashing. When I'm able to, I see tons of warnings about Redux in the console.

Here's my source file (along with the full repo attempt): https://github.com/allthesignals/carto-react-app-test/blob/main/src/data/sources/facilitiesSource.js

Any thoughts on this? I'm not sure what is causing this or what the difference is.

Thanks!

Matt

Chrome iPad simulator === not supported screen

Self explanatory

Proposal: new /sources folder

To allow user to define sources easily, the Front-PS team proposes to create a new /sources folders where the definition of the sources are setted. This new folder will be encountered inside a new /data folder that will also contains the /models. The data folder and its structure is aimed to split the front / back parts of the application.

└── data
    ├── models
    └── sources

What's inside sources folder?

Inside the sources folder, you can find multiple JS files named with the following structure: somethingSource.js. Each file contains one source definition beside the definition of its related widgets. It's more easy to dive inside with an example:

This is the KpiSource.js:

// Firstly, we define the ID of the source
export const KPI_SOURCE_ID = 'kpiSource'

// Use constants for query columns aliases to
// avoid problem with future changes.
export const KPI_SOURCE_COLUMNS = {
  NAME: 'name',
  REVENUE: 'revenue'
}

// Define the source structure that will be passed to `addSource` reducer
// Remember: it's important to use aliases with the constants defined above.
export const kpiSource = {
  id: KPI_SOURCE_ID,
  data: `
  SELECT
    states.name as ${KPI_SOURCE_COLUMNS.NAME},
    SUM(stores.revenue) as ${KPI_SOURCE_COLUMNS.REVENUE},
    states.the_geom_webmercator
  FROM ne_50m_admin_1_states as states
  JOIN retail_stores as stores ON ST_Intersects(states.the_geom_webmercator, stores.the_geom_webmercator)
  GROUP BY states.name, states.the_geom_webmercator
  `,
}

// After the definition of the source, define the widgets properties
// needed to make them work. In this case, we have two widgets:
export const KPI_SOURCE_WIDGETS = {
  TOTAL_REVENUE: {
    column: KPI_SOURCE_COLUMNS.REVENUE,
    operation: AggregationTypes.SUM
  },
  REVENUE_BY_STATE: {
    column: KPI_SOURCE_COLUMNS.NAME,
    operationColumn: KPI_SOURCE_COLUMNS.REVENUE,
    operation: AggregationTypes.SUM
  }
}

Custom formatter for widgets not working on Safari

Formatter works for Chrome (Version 86.0.4240.198):

But if doesn't work for Safari (Version 14.0 (15610.1.28.1.9, 15610)):

How to Style layers without CartoCss

How can I style layers now that carto does not recommend using cartocss and turbocarto.
Where can I find documentation about it? Thanks

Error when installing Carto skeleton app

Hello,

I tried to create a react app using Carto templates from these documentations:

1. https://docs.carto.com/react/overview/
2. https://docs.carto.com/react/guides/getting-started/

When I tried to create a react app with the skeleton template using:

npx create-react-app carto-skeleton-app --template @carto

there was an error:

E:\<username>\Exercises\React-Js> npx create-react-app carto-skeleton-app --template @carto
error: option '--template <path-to-template>' argument missing
E:\<username>\Exercises\React-Js>

But when I tried to create a react app with the sample app template using:

npx create-react-app carto-skeleton-app --template @carto/sample-app

the app was successfully created.

This is not a big deal for me because I can use the sampe app.
I just want to inform you about this.

Here are my environments:

1. NPM version: 6.14.8
2. Node version: 12.19.0
3. OS: Windows 10 Home 64-bit built 19042

Missing dependencies break npx cra common use

I have detected that both skeleton and sample-app templates are currently broken, using node v14 LTS

Both of them failed when being used with the typical npx create-react-app flow, throwing an error like this when executing yarn start:

Failed to compile.

./src/index.js
Error: [BABEL] /Users/victor/CODE/carto-for-react-training/setup/my-app/src/index.js: Cannot find module '@babel/helper-builder-react-jsx'
Require stack:
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx/lib/transform-classic.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/node_modules/@babel/plugin-transform-react-jsx/lib/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/node_modules/@babel/preset-react/lib/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/create.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/node_modules/@babel/core/lib/config/files/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/node_modules/@babel/core/lib/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/node_modules/babel-loader/lib/index.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/loader-runner/lib/loadLoader.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/loader-runner/lib/LoaderRunner.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/webpack/lib/NormalModule.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/webpack/lib/NormalModuleFactory.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/webpack/lib/Compiler.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/webpack/lib/webpack.js
- /Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/react-scripts/scripts/start.js (While processing: "/Users/victor/CODE/carto-for-react-training/setup/my-app/node_modules/babel-preset-react-app/index.js")

highlightColor defined as a function on CartoLayer doesnt seem to work

This doesnt seem to work. But CartoLayer inherit from MVTLayer which inherit from Layer in the end (I think)
https://deck.gl/docs/api-reference/core/layer#highlightcolor

return new CartoLayer({
  ...cartoLayerProps,
  id: id,
  pickable: true,
  autoHighlight: true,
  highlightColor: (info) => {
    console.log('test')
  },
});

Basic tab layout id broken on first load

Steps:

• Created a simple new 'Home' component for a tab

// Home.js
export default function Home(){
    return <div> My fancy Home tab</div>
}

• Setup as default tab in routes.js

// routes.js
const routes = [
  {
    path: '/',
    element: <Main />,
    children: [
      { path: '/', element: <Navigate to='/home' /> },
      // Auto import routes
      { path: '/home', element: <Home /> },
    ],
  },
  { path: '/oauthCallback', element: <OAuthCallback /> },
  { path: '404', element: <NotFound /> },
  { path: '*', element: <Navigate to='/404' /> },
];

---

• step 1. Initial render is wrong, with a thin grey area under the map
  

• step 2. Resize, and content is well displayed on mobile
  

• step 3. Content looks good now in desktop, after step 2
  

Viewstate sync in app template is broken when using Google Maps

This issue is not due to the upgrade of Google Maps (CartoDB/carto-react#194) but is present in older version of the code also.

To repro launch the template-sample-app-2 and configure the initialStateSlice to use a Google basemap, e.g.GOOGLE_ROADMAP. When the app is loaded the map is jerky, when it is dragged to pan it often snaps back to where it was before.

If the lines which update the viewState in GoogleMap are disabled, then the map moves correctly (although of course this breaks the zoom buttons as the state is no longer propagated).

https://github.com/CartoDB/carto-react/blob/6e0b0d6b2f2aadb656297a28c0086702893042f5/packages/react-basemaps/src/basemaps/GoogleMap.js#L104

Carto for React + deck.gl/react (react-map-gl) component, are they compatible?

(I dont know where I can ask for help with this. If you know about a forum or whatever where I could ask for help, please comment)

I am using Carto for React for the first time, I built my app using this (https://docs.carto.com/react/guides/getting-started/)
i.e. npx create-react-app my-app --template @carto

I am trying to incorporate react-map-gl component into it. I tried adding it into Main.js like this:

...
import {FullscreenControl} from 'react-map-gl';
...
<Grid item className={`${classes.mapWrapper} ${isGmaps ? classes.gmaps : ''}`}>
        <Map layers={getLayers()} />

        <FullscreenControl style={{
          right: 10,
          top: 10
        }} />
...

...fullscreen button appears but I keep getting this error when I click on it

Tried a bunch of components here (https://visgl.github.io/react-map-gl/docs/api-reference/fullscreen-control) and I mostly get errors too. Are those 2 libs compatible or am I trying to do something pointless?

p.s. sorry english not my first language :P

Vercel seems to be broken

In my last PR #165 Vercel seems to be broken.

I've run yarn build in my computer, but it seems to be ok.

Error on console related to browser compat in stores detail

While testing I found an error

1. Go to https://sample-app-react.carto.com/stores/1 (also in current master if you try https://localhost:3000/stores/1)
2. See console error

How I could add layer to map dynamically

Hello I recieve the layers info from An API and I need to render layers dynamically.
How I could do this?
Thanks

Template is failing due to a bug in the latest version in loaders.gl

The templates are linked to the latest version of loaders.gl.

The latest version of loaders.gl is broken visgl/loaders.gl#2021.

cc: @borja-munoz

Unnessary files included in the npm package

I used the latest version of template via the following command

npx create-react-app ui --template @carto/cra-template

This generated the app but 3 files are generated that are also included in .gitignore.

config-overrides.js

$ head config-overrides.js 
/* config-overrides.js */
const path = require('path');

module.exports = function override(config, env) {
  const newConfig = config;

  newConfig.resolve.alias = {
    ...newConfig.resolve.alias,
    react: path.resolve('./node_modules/react'),
    'react-redux': path.resolve('./node_modules/react-redux'),

.eslintcache

$ head .eslintcache
[
    {
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/index.js": "1",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/App.js": "2",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/store/store.js": "3",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/store/initialStateSlice.js": "4",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/routes.js": "5",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/store/appSlice.js": "6",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/components/common/Header.js": "7",
        "/Users/victor/dev/carto-react-template/template-skeleton/template/src/components/views/login/Login.js": "8",

package.dev.json

$ head package.dev.json 
{
  "name": "carto-for-react",
  "version": "1.0.2",
  "private": true,
  "dependencies": {
    "@carto/react-api": "1.0.1",
    "@carto/react-auth": "1.0.1",
    "@carto/react-basemaps": "1.0.1",
    "@carto/react-core": "1.0.1",
    "@carto/react-redux": "1.0.1",

I'm dont think any of these should have been included. The template still works so this is a minor annoyance.

You can check the files are included via the following link https://registry.npmjs.org/@carto/cra-template/-/cra-template-1.0.2.tgz

Library compatibility with React 18

I'm getting some issues with React 18. Is this library compatible with that version of React?

Thanks!