Come explore with us CartoDB - Ext JS components (www.cartodb.com). These new components will allow you, as developers, to visualize and interact with geospatial data using up to a billion data points in real time. We will show you how easy it is to enable visualizations, filter dynamically, create time-lapse animations, and explore large location datasets at unprecedented scale. Come learn how to use these new open source components to build interactive geospatial visualizations that deliver solutions, value, and insights to your customers.

1. Integrating Geospatial Maps & Big
Data Using CARTO via ExtJS
Components
Michael Giddens

2. What is CARTO?
• Built on Open Source Technologies
• Runs on top of PostGIS Database
• SaaS, On-Premise, DIY
• Generates Raster Tiles and Geospatial Data
• Full SQL API, JavaScript, and 3rd party libraries
• Great User Interfaces to design and publish maps

3. Geospatial Data & Maps
BY 2020, APPROXIMATELY 25 BILLION DEVICES WILL BE
PERMANENTLY CONNECTED THROUGH THE INTERNET,
ALL OF WHICH WILL GENERATE LOCATION DATA.
SOURCE: GARTNER

5. BUSINESS PRESSURES
• Massive sensorisation due to IoT
• Consumerization of data & maps
• Data storage is more accessible
than ever
• Mobility demands location awareness
• Empowerment of data scientists & business professionals
THE POWER OF PLACE OPTIMIZES
OPERATIONAL PERFORMANCE

6. MARKET DRIVERS
• Continuous need for deeper knowledge
on business drivers: location is crucial
• Use location insights to increase your
operational efficiencies
• Limit risk by fully understanding the
impact of location on your decisions
THE MORE DIGITAL WE BECOME,
THE MORE LOCATION MATTERS

7. Data Sizes
• < 1,000 Data
Points
• 1k to 1M
• 1M to 10M
• 10M+

9. http://flightroutes.geographica.gs

10. http://asterra.vizonomy.com

11. https://carto.com/blog/airbnb-impact

13. ExtJS 6.x + CARTO = Amazing
Maps
• CARTO Map Component
• CARTO Proxy
• CARTO Store
• MVVM & Binding
• Open Source on GitHub
https://github.com/CrestoneDigital/extjs-carto
• Examples

14. Integrates Natively
• Filters
• Sorters
• Grids
• Paging Toolbars
• ComboBoxes
• Charts
• Data Views

15. items: [{
xtype: “cartomap”
}]
CARTO Map Component
• Easy to add to any layout
• Inherited from Ext.Component
http://rawgit.com/CrestoneDigital/extjs-
carto/master/carto/examples/basicMap/basicMap-example1.html

16. items: [{
xtype: “cartomap”,
basemap: “positronLite”
}]
items: [{
xtype: “cartomap”,
basemap: {
url: “http://{s}.tile.osm.org/{z}/{x}/{y}.png”,
attribution: “&copy; <a
href="http://osm.org/copyright">OpenStreetMap</a> contributors”
}
}]
CARTO Map Component
• Choice of many predefined base layers
• Ability to use custom base layers

17. CARTO Map Component
• Center on any country using ISO3166
country code
• Provide Array [lat, lng] format
• Setting a default zoom level
items: [{
xtype: “cartomap”,
center: “jp”
}]
items: [{
xtype: “cartomap”,
center: [30, -90]
}]
items: [{
xtype: “cartomap”,
center: [30, -90],
defaultMapZoom: 9
}]
http://rawgit.com/CrestoneDigital/extjs-
carto/master/carto/examples/basicMap/basicMap-example2.html

18. items: [{
xtype: “cartomap”,
center: “us”,
layers: [{
subLayers: [{
store: {
autoLoad: true,
proxy: {
username: 'crestonedigital',
table: 'petroleum_refineries'
}
}
}]
}]
}]
CARTO Map Component
• Easily add a basic layer to your map
• Map has layers
• CARTO layers have multiple subLayers
http://rawgit.com/CrestoneDigital/extjs-
carto/master/carto/examples/basicMap/basicMap-example3.html

19. CARTO Map Component + CARTO Store
• More advanced map with a grid binding (map to grid)
http://rawgit.com/CrestoneDigital/extjs-carto/master/carto/examples/gridMap/gridMap-example1.html

20. xtype: "cartomap",
region: 'center',
bind: {
selection: '{selectedValue}'
},
basemap: ‘darkMatterLite’,
layers: [{
subLayers: [{
style: {
type: 'intensity‘
},
bind: '{layer}',
interactivity: {
enable: true,
fields: [ 'site_name', 'company', 'state', 'total_oper' ],
tooltip: {
enable: true
}
}
}]
}]
viewModel: {
stores: {
layer: { type: 'carto', autoLoad: true,
proxy: {
username: 'crestonedigital', table: 'petroleum_refineries'
}
}
xtype: 'grid',
region: 'south',
reference: 'southGrid',
split: true,
idProperty: 'cartodb_id',
bind: {
selection: '{selectedValue}',
store: '{layer}‘
},
listeners: {
select: 'onSelect'
},
height: 350,
columns: [{
text: 'Site Name',
dataIndex: 'site_name',
flex: 1
},{
text: 'Company',
dataIndex: 'company',
flex: 1
},{
...

21. CARTO Map Component + CARTO Store
• More advanced map with a grid binding (grid to map)
http://rawgit.com/CrestoneDigital/extjs-carto/master/carto/examples/gridMap/gridMap-example2.html

22. xtype: ‘cartomap’,
region: 'center',
center: 'us',
reference: 'map',
bind: {
selection: '{selectedValue}'
},
selectedAction: [‘panTo’, ‘placeMarker’],
baseLayerName: ‘darkMatterLite’,
layers: [{
hidden: true,
subLayers: [{
bind: '{layer}'
}]
}]
viewModel: {
stores: {
layer: { type: 'carto', autoLoad: true, proxy: {
enableLatLng: true,
username: 'crestonedigital',
table: 'petroleum_refineries‘
}}
}
}
xtype: 'grid',
region: 'south',
reference: 'southGrid',
split: true,
idProperty: 'cartodb_id',
bind: {
selection: '{selectedValue}',
store: '{layer}‘
},
...
xtype: 'container',
tpl: ['<h3>Site Name</h3>',
'<p>{site_name}</p>',
'<h3>Company</h3>',
'<p>{company}</p>',
'<h3>State</h3>',
'<p>{state}</p>',
'<h3>Number of Operations</h3>',
'<p>{total_oper}</p>‘
],
bind: {
data: '{selectedValue}'
}

23. Carto Map Component
• More advanced map with grid locked to map extents
http://rawgit.com/CrestoneDigital/extjs-carto/master/carto/examples/gridMap/gridMap-example3.html

24. {
xtype: 'panel',
layout: 'border',
viewModel: {
stores: {
layer: {
storeId: 'layer1',
type: 'carto',
autoLoad: true,
proxy: {
enableLatLng: true,
username: 'crestonedigital',
table: 'petroleum_refineries'
}
}
}
},
controller: mapController,
tbar: {
items: {
xtype: 'checkboxfield',
reference: 'lockToMapBox',
boxLabel: 'Lock to Map'
}
},
items: [{
xtype: "cartomap",
...
bind: {
selection: '{selectedValue}',
mapLock: '{lockToMapBox.checked}'
},
storesToLock: ['layer1'],
basemap: 'darkMatterLite',
layers: [{
subLayers: [{
bind: '{layer}',
...

25. CARTO Store
• Handles all the building of CARTO SQL API Queries to retrieve data
• Can be used to access data for GridPanels, DataViews, Charts
• Store Filters, Sorters, Limit, Paging are all supported
• GroupBy: ‘value’ turns a store into a Facet that includes the name, count,
avg, min, and max values. Most commonly used for ComboBoxes to filter
data
• Can be used for Autocomplete ComboBoxes
• Filters, Limits can be used with GroupBy for sub selections
• Flags to multipurpose store to retrieve Tables and Table Fields

26. {
xtype: combobox',
valueField: 'table_name',
displayField: 'table_name',
bind: {
store: '{tables}'
}
}
viewModel: {
stores: {
tables: {
storeId: 'tablesStore',
sorters: 'table_name',
proxy: {
username: 'crestonedigital',
type: 'carto',
mode: 'tables'
}
}
}
CARTO Store
• Table List (mode: ‘tables’)
• Column List (mode: ‘columns’)
http://rawgit.com/CrestoneDigital/extjs-
carto/master/carto/examples/cartoAccount/cartoAccount-example1.html

27. {
xtype: 'grid',
columns: [
{text: 'Column', dataIndex: 'field', align: 'end'},
{text: 'Count', dataIndex: 'cnt', align: 'end', format: '0,000'},
{text: 'Sum', dataIndex: 'sum', align: 'end', format: '0,000.00'},
{text: 'Average', dataIndex: 'avg', align: 'end', format: '0,000.00'},
{text: 'Min', dataIndex: 'min', align: 'end', format: '0,000.00'},
{text: 'Max', dataIndex: 'max', align: 'end', format: '0,000.00'}
],
title: 'Statistics',
viewConfig: {
bind: {
store: '{stats}'
}
}
store.getProxy().addGroupByField({
property: value,
name: ‘avg’,
aggregateType: ‘avg’
});
CARTO Store
• Statistics
- Count
- Average
- Standard Deviation
- Min / Max
- Other PostgreSQLAggregation Functions

28. CARTO Explorer
• Browse any CARTO account
• List and view all Public tables
• Change base layers
• Filter any field
• Edit CartoCSS
• Explore statistics
• Bind statistics to viewport
• Styles outliers using STDEV
http://rawgit.com/CrestoneDigital/extjs-carto/master/carto/examples/playMap/playMap-example1.html

29. Demo Project - Wildfires
• Map
• GridPanel
• Filters
• Facets
• XTemplates
• ComboBoxes
• Binding
http://rawgit.com/CrestoneDigital/extjs-carto/master/carto/examples/fireMap/fireMap-example2.html

30. Thank you!
Michael Giddens
Crestone Digital
Open Source on GitHub
https://github.com/CrestoneDigital/extjs-carto