Learn how CARTO integrates with Google Maps to unlock the advanced visualization capabilities of deck.gl and enables developers to build geospatial apps. You can watch the recorded webinar here: https://go.carto.com/webinars/google-maps-and-carto

1. Developing Spatial
Applications with Google Maps
and CARTO
Follow @CARTO on Twitter

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

3. CARTO — Unlock the power of spatial analysis
Agenda
● Introduction
● Integration with deck.gl
● Using Builder to prototype visualizations
● Extending the platform with CARTO for React
● Demo time
● Q&A

4. CARTO
Customers
Unlock the power of spatial analysis
>2,200
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
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

8. CARTO — Unlock the power of spatial analysis
Platform Architecture
CARTO Builder
Spatial Data
Vector data:
Shapefiles, geojson,
geopackage...
Imagery data:
Cogs, tilesets, NetCDF
Point clouds
Lidar, 3D vector tiles.
Raster data:
GeoTiff, H3, S2
global grid
ETL,
Streaming...
Data Visualization
Spatial Analysis
Feature
extraction & AI
App development
Real-time alerts
App development Map making
Data
consumers
Web,
APIs,
Embed...
Spatial Data Science
CARTO Frames
Data Observatory
Analytics Toolbox
React Maps

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
Google Maps JavaScript API ……………………………..
deck.gl ……………………………………………………………..
Mapbox/MapLibre GL JS …………………………………..
Which libraries do you have experience with?
LeafletJS …………………………………..…………………….

11. CARTO — Unlock the power of spatial analysis
Google Maps JavaScript API
● The Maps JavaScript API supports raster and vector maps
● The vector maps use WebGL to draw vector tiles taking
advantage of the GPU
● Vector maps add new features (beta channel) to:
○ Overlay 3D content using the WebGLOverlayView
○ Set tilt and heading
○ Fractional values supported for zoom
○ Advanced camera controls supporting camera
animations

12. CARTO — Unlock the power of spatial analysis
deck.gl
● Open source library initially developed by Uber
● Open governance model (Urban Computing
Foundation)
● Coordinated efforts with contributions from Microsoft,
Google, nVidia, CARTO...
● High performance (WebGL)
● Compatible with major basemap providers
● Great mobile support

13. CARTO — Unlock the power of spatial analysis
CARTO for deck.gl
● deck.gl module with specific support for the CARTO
platform
● The preferred/official library to build visualizations in
web apps with CARTO
● Simple, easy to use and powerful
● Provides a CartoLayer that takes care of
communication with the Maps API
● Includes style helpers for making it easy to create
thematic maps
● Adds support for loading a CARTO Builder map

14. CARTO — Unlock the power of spatial analysis
Google Maps deck.gl module
● Provides integration with the Google Maps JavaScript API
● Supports raster and vector (since v8.6) maps
● Shared canvas between Google Maps and deck.gl if using
vector maps → Improved performance with labels on top
of layers and 3D occlusions
● The GoogleMapsOverlay class is used to overlay deck.gl
layers
● Overlay method (raster or vector) chosen depending on the
map type

15. CARTO — Unlock the power of spatial analysis
Easiest way to retrieve data from
your data warehouse using the
CARTO platform:
1. Instantiate Map object
Integration with
CartoLayer
map = new google.maps.Map(mapDomElement, {
...
mapId: 'XXXXYYYYZZZZ111',
});

16. CARTO — Unlock the power of spatial analysis
Easiest way to retrieve data from
your data warehouse using the
CARTO platform:
1. Instantiate Map object
2. Set CARTO credentials
Integration with
CartoLayer
map = new google.maps.Map(mapDomElement, {
...
mapId: 'XXXXYYYYZZZZ111',
});
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
apiVersion: deck.carto.API_VERSIONS.V3,
accessToken: 'eyJhb...'
});

17. CARTO — Unlock the power of spatial analysis
Easiest way to retrieve data from
your data warehouse using the
CARTO platform:
1. Instantiate Map object
2. Set CARTO credentials
3. Create overlay with CartoLayer
Integration with
CartoLayer
map = new google.maps.Map(mapDomElement, {
...
mapId: 'XXXXYYYYZZZZ111',
});
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
apiVersion: deck.carto.API_VERSIONS.V3,
accessToken: 'eyJhb...'
});
const deckOverlay = new deck.GoogleMapsOverlay({
layers: [
new deck.carto.CartoLayer({
connection: 'bqconn',
type: deck.carto.MAP_TYPES.TABLE,
data: `cartobq.public_account.retail_stores`,
...
}),
],
});

18. CARTO — Unlock the power of spatial analysis
Easiest way to retrieve data from
your data warehouse using the
CARTO platform:
1. Instantiate Map object
2. Set CARTO credentials
3. Create overlay with CartoLayer
4. Assign the map to the overlay
Integration with
CartoLayer
map = new google.maps.Map(mapDomElement, {
...
mapId: 'XXXXYYYYZZZZ111',
});
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
apiVersion: deck.carto.API_VERSIONS.V3,
accessToken: 'eyJhb...'
});
const deckOverlay = new deck.GoogleMapsOverlay({
layers: [
new deck.carto.CartoLayer({
connection: 'bqconn',
type: deck.carto.MAP_TYPES.TABLE,
data: `cartobq.public_account.retail_stores`,
...
}),
],
});
deckOverlay.setMap(map);

19. CARTO — Unlock the power of spatial analysis
Using CARTO Builder to prototype
visualizations

20. CARTO — Unlock the power of spatial analysis
Design your map in Builder and load it
easily with deck.gl:
1. Instantiate Map object
Using CARTO
Builder to
prototype
visualizations
map = new google.maps.Map(mapDomElement, {
...
mapId: 'XXXXYYYYZZZZ111',
});

21. CARTO — Unlock the power of spatial analysis
Design your map in Builder and load it
easily with deck.gl:
1. Instantiate Map object
2. Set CARTO credentials
Using Builder to
prototype
visualizations
map = new google.maps.Map(mapDomElement, {
...
mapId: 'XXXXYYYYZZZZ111',
});
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
apiVersion: deck.carto.API_VERSIONS.V3,
accessToken: 'eyJhb...'
});

22. CARTO — Unlock the power of spatial analysis
Design your map in Builder and load it
easily with deck.gl:
1. Instantiate Map object
2. Set CARTO credentials
3. Fetch the map
Using Builder to
prototype
visualizations
map = new google.maps.Map(mapDomElement, {
...
mapId: 'XXXXYYYYZZZZ111',
});
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
apiVersion: deck.carto.API_VERSIONS.V3,
accessToken: 'eyJhb...'
});
deck.carto.fetchMap({
cartoMapId: 'ff6ac53f-741a-49fb-b615-d040bc5a96b8'
})

23. CARTO — Unlock the power of spatial analysis
Design your map in Builder and load it
easily with deck.gl:
1. Instantiate Map object
2. Set CARTO credentials
3. Fetch the map
4. Create the overlay and set the map
Using Builder to
prototype
visualizations
map = new google.maps.Map(mapDomElement, {
...
mapId: 'XXXXYYYYZZZZ111',
});
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
apiVersion: deck.carto.API_VERSIONS.V3,
accessToken: 'eyJhb...'
});
deck.carto.fetchMap({
cartoMapId: 'ff6ac53f-741a-49fb-b615-d040bc5a96b8'
}).then(({layers}) => {
const deckOverlay =
new deck.GoogleMapsOverlay({layers});
deckOverlay.setMap(map);
});

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

25. CARTO — Unlock the power of spatial analysis
CARTO for React
● It is a toolbox for programmers for faster development
of better map centric applications.
● It comes with UI components based on the CARTO
Design System.
● It is open source and free for anybody to use with
CARTO.
● Includes support for Google Maps basemaps.
● Useful for extending the platform for custom use
cases.
● The recommended way to build apps with CARTO.

26. CARTO — Unlock the power of spatial analysis
Simple Architecture
CARTO Platform
Instance
Cloud Native APIs:
SQL & Maps
Frontend side application
Cloud Data
Warehouse
CARTO Analytics
Toolbox
API Metadata

27. CARTO — Unlock the power of spatial analysis
Main components
● Create React App templates
○ Base
○ Sample Apps
● Library
○ API
○ Auth
○ Basemaps
○ Core
○ Redux
○ UI
○ Widgets
○ Workers

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

29. CARTO — Unlock the power of spatial analysis
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

30. CARTO — Unlock the power of spatial analysis
Analytics Toolbox for Google BigQuery
● Collection of Spatial SQL
functions
● Allows to add spatial analysis
functionality to your application
● Functions are executed in
BigQuery through CARTO SQL API
● Results can be added as new
layers

31. 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)

32. CARTO — Unlock the power of spatial analysis
Workflow

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

34. Thanks for listening!
Any questions?
Request a demo at CARTO.COM
or sign up for a free 14-day trial: https://carto.com/signup/
Tomás Ehrenfeld
Solutions Engineer // tehrenfeld@carto.com
Borja Muñoz
Product Manager // bmunoz@carto.com