Developing Spatial Applications with CARTO for React v1.1

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

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

Agenda
● Introduction to CARTO for React
● New features in version 1.1
● Demo time
● Q&A

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

Most organizations are missing an
opportunity...
TREND
80%
of all data collected has a
location component
10%
used to power
business decisions

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

With a fully cloud native platform

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

● 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 simpliﬁed CARTO connections.
● Direct access to technical documentation and
templates, including the latest updates
Developer Tools

POLL 1
React ……………………………………………………………..
Vue.js ……………………………………………………………..
Angular ……………………………………………………………..
Which frontend frameworks do you use?
No framework / Vanilla JavaScript…………………………………..

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.

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

Architecture
● Best practices for building scalable and maintainable spatial web apps
● Not reinvent the wheel, use popular libraries with a huge community behind

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 ﬁltered using widgets and updating widgets when another widget is ﬁltered

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 ……………………………………………………………..

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

● 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
--template @carto/sample-app-3

Templates -
Layout
● Responsive design
● Header with the title, links to
the diﬀerent pages and a user
menu
● Sidebar to display view
content
● Map area for the map and
related ﬂoating elements

Templates - Authentication & Authoriz.
● Works with CARTO platform OAuth
● First create a new app in the CARTO workspace to get a client ID (public identiﬁer)
● Then conﬁgure 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

Library
● Multi-package repo built with Lerna
● Can be used standalone
● Small packages with speciﬁc 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

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

Library - Widgets

● 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)

Debugging
VS Code + Chrome + 2 extensions

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)
--template @carto/base-3
--template @carto/base-3-typescript
--template @carto/sample-app-3

New features in v1.1 (II)
New widgets

New features in v1.1 (III)
Integration with Google Maps vector basemaps

It’s time for a real world example!

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

Developing Spatial Applications with CARTO for React v1.1

Recommended

More Related Content

What's hot (20)

Similar to Developing Spatial Applications with CARTO for React v1.1 (20)

More from CARTO (20)

Recently uploaded (20)

Developing Spatial Applications with CARTO for React v1.1