Developing Spatial Applications with Google Maps and CARTO

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

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

Agenda
● Introduction
● Integration with deck.gl
● Using Builder to prototype visualizations
● Extending the platform with CARTO for React
● Demo time
● Q&A

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

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

Platform Architecture
CARTO Builder
Spatial Data
Vector data:
Shapeﬁles, geojson,
geopackage...
Imagery data:
Cogs, tilesets, NetCDF
Point clouds
Lidar, 3D vector tiles.
Raster data:
GeoTiﬀ, 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

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

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

deck.gl
● Open source library initially developed by Uber
● Open governance model (Urban Computing
Foundation)
● Coordinated eﬀorts with contributions from Microsoft,
Google, nVidia, CARTO...
● High performance (WebGL)
● Compatible with major basemap providers
● Great mobile support

CARTO for deck.gl
● deck.gl module with speciﬁc support for the CARTO
platform
● The preferred/oﬃcial 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

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

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',
});

CARTO platform:
2. Set CARTO credentials
Integration with
CartoLayer
...
});
deck.carto.setDefaultCredentials({
apiBaseUrl: 'https://gcp-us-east1.api.carto.com',
apiVersion: deck.carto.API_VERSIONS.V3,
accessToken: 'eyJhb...'
});

CARTO platform:
3. Create overlay with CartoLayer
Integration with
CartoLayer
...
});
});
const deckOverlay = new deck.GoogleMapsOverlay({
layers: [
new deck.carto.CartoLayer({
connection: 'bqconn',
type: deck.carto.MAP_TYPES.TABLE,
data: `cartobq.public_account.retail_stores`,
...
}),
],
});

CARTO platform:
3. Create overlay with CartoLayer
4. Assign the map to the overlay
Integration with
CartoLayer
...
});
});
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);

Using CARTO Builder to prototype
visualizations

Design your map in Builder and load it
easily with deck.gl:
Using CARTO
Builder to
prototype
visualizations
...
});

Using Builder to
prototype
visualizations
...
});
});

3. Fetch the map
Using Builder to
prototype
visualizations
...
});
});
deck.carto.fetchMap({
cartoMapId: 'ff6ac53f-741a-49fb-b615-d040bc5a96b8'
})

3. Fetch the map
4. Create the overlay and set the map
Using Builder to
prototype
visualizations
...
});
});
deck.carto.fetchMap({
cartoMapId: 'ff6ac53f-741a-49fb-b615-d040bc5a96b8'
}).then(({layers}) => {
const deckOverlay =
new deck.GoogleMapsOverlay({layers});
deckOverlay.setMap(map);
});

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

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.

Simple Architecture
CARTO Platform
Instance
Cloud Native APIs:
SQL & Maps
Frontend side application
Cloud Data
Warehouse
CARTO Analytics
Toolbox
API Metadata

Main components
● Create React App templates
○ Base
○ Sample Apps
● Library
○ API
○ Auth
○ Basemaps
○ Core
○ Redux
○ UI
○ Widgets
○ Workers

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

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

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

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

Workﬂow

It’s time for a real world example!

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

Developing Spatial Applications with Google Maps and CARTO

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Developing Spatial Applications with Google Maps and CARTO

Ähnlich wie Developing Spatial Applications with Google Maps and CARTO (20)

Mehr von CARTO

Mehr von CARTO (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Developing Spatial Applications with Google Maps and CARTO