In this hands-on webinar, we introduce the new features of CARTO for React v1.1 and showcase how this framework can be used to accelerate the development of cloud-native geospatial applications. You can watch the recorded webinar at: https://go.carto.com/webinars/carto-react-developers

1. Developing Spatial
Applications with CARTO for
React v1.1
Follow @CARTO on Twitter

2. CARTO — Unlock the power of spatial analysis
Introductions
Borja Muñoz
Product Manager at CARTO
Antonio Hita
Solutions Engineer at CARTO

3. CARTO — Unlock the power of spatial analysis
Agenda
● Introduction to CARTO for React
● New features in version 1.1
● Demo time
● Q&A

4. CARTO
Customers
Unlock the power of spatial analysis
>2,000
Team members
150+
Contender - LI Wave 2020

5. CARTO — Unlock the power of spatial analysis
Most organizations are missing an
opportunity...
TREND
80%
of all data collected has a
location component
10%
used to power
business decisions

6. CARTO — Unlock the power of spatial analysis
We unlock the power of spatial
analysis in the cloud
New End Users
● Business Analysts
● Product Managers
● Data Scientists
● Decision Makers
● Web Developers
● Advanced Analytics
New Data Streams New Use Cases
● Human Mobility
● Weather
● Credit Card Transactions
● IoT Hardware
● Connected Devices
● Census or Open Data
● CRM or Loyalty Data
● Site Selection
● POS Market Analysis
● Territory Design
● Supply Chain Optimization
● Geomarketing
● Data Monetization

7. CARTO — Unlock the power of spatial analysis
With a fully cloud native platform

8. CARTO — Unlock the power of spatial analysis
Fully cloud native
Seamlessly interact with data on top of the leading cloud data warehouse
platforms, eliminating ETL complexity and any limits on scalability.
An end-to-end Location Intelligence solution
Connect to data, access spatial data subscriptions, create advanced map
visualizations and run spatial analysis, natively in the cloud environment.
Spatial analytics wherever your data is hosted
Advanced spatial functions, extending the geospatial capabilities available
in cloud data platforms, all executed from within CARTO, using simple SQL
commands.
Rapid spatial app development
For developers, CARTO integrates a complete toolkit of frameworks,
libraries and templates for scalable spatial app development.
A unique Location Intelligence platform

9. CARTO — Unlock the power of spatial analysis
● Create intuitive, map-centric web applications
quickly using our developer frameworks and
templates.
● With CARTO for deck.gl create scalable
applications to visualize spatial data using
vector technology, fully integrated with Google
Maps.
● Kickstart app development with CARTO for
React, a library of user interface components
and simplified CARTO connections.
● Direct access to technical documentation and
templates, including the latest updates
Developer Tools

10. CARTO — Unlock the power of spatial analysis
POLL 1
React ……………………………………………………………..
Vue.js ……………………………………………………………..
Angular ……………………………………………………………..
Which frontend frameworks do you use?
No framework / Vanilla JavaScript…………………………………..

11. CARTO — Unlock the power of spatial analysis
CARTO for React
● Toolbox for programmers for faster development of better map centric
applications.
● Includes a library of UI components based on the CARTO design system
● It is free for anybody to use with CARTO.
● The recommended way to build apps with CARTO.

12. CARTO — Unlock the power of spatial analysis
Main components
● Create React App templates
○ Base
■ base-2
■ base-3
■ base-3-typescript
○ Sample Apps
■ sample-app-2
■ sample-app-3
● Library
○ API
○ Auth
○ Basemaps
○ Core
○ Redux
○ UI
○ Widgets
○ Workers

13. CARTO — Unlock the power of spatial analysis
Architecture
● Best practices for building scalable and maintainable spatial web apps
● Not reinvent the wheel, use popular libraries with a huge community behind

14. CARTO — Unlock the power of spatial analysis
State management
● The goal is to keep all the components (map, layers and widgets) in sync
● One of the most complex issues in spatial web apps development
● Using imperative programming things become unmanageable when the number of
components grow
● Redux provides a central store where you can maintain your application state
● Components that depend on state react to changes:
○ Provides a clean design to update widgets on viewport changes, update layers when
data is filtered using widgets and updating widgets when another widget is filtered

15. CARTO — Unlock the power of spatial analysis
POLL 2
deck.gl ……………………………………………………………..
Google Maps Javascript API ……………………………..
Mapbox GL JS ……………………………………………………………..
What visualizations libraries do you use for web applications?
ArcGIS API for JavaScript …………………………………………..
Other ……………………………………………………………..

16. CARTO — Unlock the power of spatial analysis
Visualization
● CARTO for React uses the CARTO module for deck.gl for visualization (CartoLayer)
● You can customize the style using any of the properties available in the GeoJsonLayer
● The CARTO module for deck.gl provides style helpers to easily apply color scales to features
● You can get additional tips in the Customizing the CartoLayer Style guide
● Layers and widgets are linked indirectly through the source
● The CartoLayer and the widgets are prepared to work both with GeoJSON and vector
tiles data sources

17. CARTO — Unlock the power of spatial analysis
● Base: minimum template with a
blank map and no widgets
● Sample app: template with layers
and widgets to demonstrate how
common spatial web apps
functionalities can be implemented
using CARTO for React
Templates
~ npx create-react-app my-app
--template @carto/base-3
~ npx create-react-app my-app
--template @carto/sample-app-3

18. CARTO — Unlock the power of spatial analysis
Templates -
Layout
● Responsive design
● Header with the title, links to
the different pages and a user
menu
● Sidebar to display view
content
● Map area for the map and
related floating elements

19. CARTO — Unlock the power of spatial analysis
Templates - Authentication & Authoriz.
● Works with CARTO platform OAuth
● First create a new app in the CARTO workspace to get a client ID (public identifier)
● Then configure the clientID in the InitialStateSlice
● You can also create applications that are not integrated with the CARTO platform
authentication (public or with their own auth system). You have two options:
○ You can use permanent tokens if you don’t do dynamic queries
○ You can develop your own backend that creates tokens with a
machine-to-machine client ID / client secret pair. More information: API docs

20. CARTO — Unlock the power of spatial analysis
Library
● Multi-package repo built with Lerna
● Can be used standalone
● Small packages with specific functionality
● React-Redux (with Redux Toolkit) for state management
● Material-UI for user interface components
● ECharts for charts in widgets
● Turf.js for spatial intersections

21. CARTO — Unlock the power of spatial analysis
Library - Packages
Property Description
@carto/react-api Interaction with CARTO platform APIs (i.e. SQL API) and general functionality.
@carto/react-auth Authentication & Authorization with the CARTO platform using OAuth
@carto/react-basemaps Access to CARTO and Google Maps basemaps
@carto/react-core Core functionality used from other packages
@carto/react-redux State management using Redux Toolkit
@carto/react-ui CARTO theme for Material-UI and user interface components for widgets
@carto/react-widgets Widgets models and business logic
@carto/react-workers Web worker methods for viewport features

22. CARTO — Unlock the power of spatial analysis
Library - Widgets

23. CARTO — Unlock the power of spatial analysis
● Based on Hygen
● The fastest way to create new
components
● Views
● Sources
● Layers
Code Generator
~ yarn hygen view new
$ hygen view new
✔ Name: · Places
✔ Route path: · places
✔ Do you want a link in the menu? (y/N) · true
~ yarn hygen source new
$ hygen source new
✔ Name: · Places
✔ Choose type · SQL dataset
✔ Type a query · SELECT * FROM populated_places
~ yarn hygen layer new
$ hygen layer new
✔ Name: · Places
✔ Choose a source · placesSource
✔ Do you want to attach to some view (y/N) · true
✔ Choose a view · Places (views/Places.js)

24. CARTO — Unlock the power of spatial analysis
Debugging
VS Code + Chrome + 2 extensions

25. CARTO — Unlock the power of spatial analysis
New templates
● Base JavaScript template for CARTO 3
● Base TypeScript template for CARTO 3
● Sample app template for CARTO 3
New features in
v1.1 (I)
~ npx create-react-app my-app
--template @carto/base-3
~ npx create-react-app my-app
--template @carto/base-3-typescript
~ npx create-react-app my-app
--template @carto/sample-app-3

26. CARTO — Unlock the power of spatial analysis
New features in v1.1 (II)
New widgets

27. CARTO — Unlock the power of spatial analysis
New features in v1.1 (III)
Integration with Google Maps vector basemaps

28. CARTO — Unlock the power of spatial analysis
It’s time for a real world example!

29. Thanks for listening!
Any questions?
Request a demo at CARTO.COM
Antonio Hita
Solutions Engineer at CARTO // ahita@carto.com
Borja Muñoz
Product Manager at CARTO // bmunoz@carto.com