This is a DEPRECATED VERSION of Web SDK.
Web SDK is a JavaScript library to create custom applications on top of CARTO, using deck.gl
DEPRECATION WARNING! This project won’t be continued. Due to feedback received from the users and to bring a better integration with deck.gl, we’re moving to a native deck.gl module. See @deck.gl/carto
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add layer</title>
<!-- mapbox-gl css ia required by Mapbox GL JS library (which provides the basemaps tech) -->
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<!-- airship provides CARTO styles used, for example, in the panel -->
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<!-- css styles to get a 'full-screen' map -->
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
strong {
color:
}
</style>
</head>
<!-- 'as- classes come from Airship, and they provide help for the layout and basic styles -->
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map component will be instantiated here -->
<div id="map"></div>
<!-- panel with title and description -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Add layer</h1>
<h4 class="as-subheader as-mb--12">
Add one CARTO layer to your map with <em>carto.viz.createMap</em> and <em>carto.viz.Layer</em>
</h4>
</div>
</div>
</main>
</div>
<!-- mapbox-gl js, the corresponding JavaScript for the Mapbox GL library -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<!-- deck.gl library -->
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<!-- CARTO Web SDK library -->
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
/*
Set default credentials to access datasets in the CARTO platform, in this case from the 'public' user.
You can use your own user account here (there's a free plan available at https://carto.com/signup/)
*/
carto.auth.setDefaultCredentials({ username: 'public' });
/*
If apiKey is the default for public, it can be ommitted, so the previous is equivalent to:
`carto.auth.setDefaultCredentials({ username: 'public', apiKey: 'default_public' });`
*/
/*
This creates a simple world map, but it can be further configured (zoom, center, basemap...). Check the reference
and other examples.
*/
const deckMap = carto.viz.createMap();
/*
Create a layer with the whole dataset and add it to the map.
You can browse available datasets for the account in https://public.carto.com/datasets/
*/
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
countriesLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Set style</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Set style</h1>
<h4 class="as-subheader as-mb--12">
Change the style of a layer, using <em>carto.viz.style.colorCategories</em> style helper and the <em>carto.viz.layer.setStyle</em> method
</h4>
<div>
<!-- Clicking the button will replace the original (default) style -->
<button class="as-btn as-btn--primary" onclick="updateStyle()">Update Style</button>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
let countries;
function initialize() {
/*
A common setup: basemap + a CARTO Layer (from the 'public' user)
*/
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
/*
Not using a style gets a layer with 'default styles' (in the case of
polygons, purple fill and light lines)
*/
countries = new carto.viz.Layer('ne_50m_admin_0_countries');
countries.addTo(deckMap);
}
initialize();
function updateStyle() {
/*
Web SDK allows a lot of customization on layer styles, thanks to several functions
or "style helpers", like colorCategories. There is also a way to set styles compatible
with the underlying deckgl (see examples on deckgl category)
This gets a choropleth map, in which the value of a string field is used as a category
and each category gets a color, automatically. Style helpers also accept further
customization (for example on palettes).
*/
const newStyle = carto.viz.style.colorCategories('continent');
countries.setStyle(newStyle);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add several layers</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Add several layers</h1>
<h4 class="as-subheader as-mb--12">
Add several CARTO layers to your map, using just multiple <em>carto.viz.Layer.addTo</em> calls
</h4>
<div>
<!-- Clicking the button will toggle the ports layer visibility -->
<button class="as-btn as-btn--primary" onclick="toggleVisibility()">Show/Hide layer</button>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
let ports;
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
/*
A createMap, setting up a custom initial viewport
*/
const deckMap = carto.viz.createMap({
view: {
longitude: -116.846099,
latitude: 50.2672297,
zoom: 2.5
}
});
/*
if order of the layers is relevant, add `await` to the `addTo` sentences and the next
layer will be added on top of the previous. For example, here we ensure states are
at the bottom, but we don't care about boundaries or ports relative ordering.
*/
const states = new carto.viz.Layer('ne_50m_admin_1_states_1');
await states.addTo(deckMap);
const boundaries = new carto.viz.Layer('ne_50m_admin_0_boundary_lines_land');
boundaries.addTo(deckMap);
ports = new carto.viz.Layer('world_ports');
ports.addTo(deckMap);
/*
Another option to control the layer order is using 'overLayerId|underLayerId' options in addTo
methods. See the reference for a description on how to use it.
*/
/*
A note on async/await. Modern JS code tries to use async/await pattern to better manage Promises
and in general asynchronous code (vs the 'callback hell'). If you are not used to id, have
a look at https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await
*/
}
function toggleVisibility(){
if(ports.isVisible()){
ports.hide();
} else {
ports.show();
}
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>deck.gl map</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">deck.gl map</h1>
<h4 class="as-subheader as-mb--12">
If you already have a deckgl map, you can simply add a CARTO Layer on it
(if not, you can create one directly or using our basemap helpers). This example uses <em>deck.DeckGL scripting API </em>
</h4>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
// standard deckgl map using scripting API (see https://deck.gl/#/documentation/getting-started/using-standalone?section=using-the-scripting-api)
const deckMap = new window.deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
initialViewState: {
longitude: 0,
latitude: 0,
zoom: 2,
pitch: 45,
bearing: 15
},
controller: true,
layers: []
});
// once there is a map reference, just using it on addTo(map) is enough.
const countries = new carto.viz.Layer('world_ports');
countries.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>deck.gl layers</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">deck.gl layers</h1>
<h4 class="as-subheader as-mb--12">
Using a deckgl map, you can add any deck.gl layer, whether it is a CARTO layer or not
</h4>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
/*
standard deckgl map, using scripting API.
See: https://deck.gl/#/documentation/getting-started/using-standalone?section=using-the-scripting-api
*/
const deckMap = new window.deck.DeckGL({
container: 'map',
mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
initialViewState: {
longitude: -122.45,
latitude: 37.8,
zoom: 8
},
controller: true,
layers: [
// standard deckgl layer, replace with any layer you prefer
new deck.ScatterplotLayer({
data: [
{ position: [-122.45, 37.8], color: [0, 255, 0, 100], radius: 10000 }
],
getColor: d => d.color,
getRadius: d => d.radius
})
]
});
/*
A CARTO Layer builds internally a deck.gl layer (built over MVTLayer) so you can
just add it to the deck.gl map, mixed with other 'pure' deck.gl layers
*/
const countries = new carto.viz.Layer('world_ports');
countries.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>deck.gl styles</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">deck.gl styles</h1>
<h4 class="as-subheader as-mb--12">
CARTOLayer is a deck.gl layer, so you can use common deck.gl style syntax for it.
</h4>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
/*
For styling, you can use pure deck.gl styles, specified as values or functions.
The available properties are those included in GeoJsonLayer.
See https://deck.gl/docs/api-reference/layers/geojson-layer
Colors are specified as [R, G, B, A] components, from 0 to 255
*/
const styles = {
getFillColor: [245, 22, 48, 200],
getLineWidth: 3,
getLineColor: [255, 255, 255, 127]
};
/*
Notice how deck.gl styles are simply passed to the layer
*/
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries', styles);
countriesLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CARTO Basemap</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">CARTO basemap</h1>
<h4 class="as-subheader as-mb--12">
An easy way to create a CARTO basemap, using DeckGL and Mapbox GL under the hood
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
// by default you get a full world positron basemap, centered at (0, 0) coordinates
const deckMap = carto.viz.createMap();
// ... but all these variations are also allowed
// const deckMap = carto.viz.createMap({ basemap: 'voyager'});
// const deckMap = carto.viz.createMap({ basemap: 'darkmatter', view: { zoom: 4 } });
// const deckMap = carto.viz.createMap({ basemap: 'positron', view: { zoom: 4, longitude: 3, latitude: 40, pitch: 45, bearing: 30 }, container: 'map' });
const ports = new carto.viz.Layer('world_ports');
ports.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Google Maps basemap</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Google Maps basemap</h1>
<h4 class="as-subheader as-mb--12">
An easy way to create a Google Maps basemap and adding a CARTO Layer on top of it.
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<!-- TODO: Set up a proper API_KEY for Google Maps (this one is only valid for carto.com site) -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDvHtBZM79O5uGTBT1ZOWOKW2_FVMstHNs&libraries=visualization&v=weekly"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
// by default you get a full world google maps basemap, centered at (0, 0) coordinates
const deckMap = carto.viz.createGoogleMap();
// All these variations are also allowed:
// const deckMap = carto.viz.createGoogleMap({ mapOptions: { mapTypeId: 'satellite' } });
// const deckMap = carto.viz.createGoogleMap({ mapOptions: { mapTypeId: 'hybrid', zoom: 4 } });
// const deckMap = carto.viz.createGoogleMap({ container: 'map', mapOptions: { mapTypeId: 'terrain', zoom: 4, center: { lng: 3, lat: 40 } } });
let ports = new carto.viz.Layer('world_ports');
ports.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SQL Source</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">SQL source</h1>
<h4 class="as-subheader as-mb--12">
Set a <em>carto.viz.source.SQL</em> source to a Layer, using a SQL query and <em>carto.layer.setSource</em>
</h4>
<div>
<!-- Clicking the button will replace the original source -->
<button class="as-btn as-btn--primary" onclick="updateSource()">Update Source</button>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
/*
countries layer is an external variable, so it can be later accessed from `updateSource`
*/
let countries;
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
/*
A common layer, connected to a CARTO Dataset
*/
countries = new carto.viz.Layer('ne_50m_admin_0_countries');
/*
previous is equivalent to...
countries = new carto.viz.Layer(new carto.viz.source.Dataset('ne_50m_admin_0_countries')); // full table
and also the same as...
countries = new carto.viz.Layer(new carto.viz.source.SQL('SELECT * FROM ne_50m_admin_0_countries')); // custom SQL
*/
countries.addTo(deckMap);
}
initialize();
function updateSource() {
/*
Replace the original source (the whole dataset) with a subset of it, expressed as a SQL query
*/
countries.setSource(`SELECT * FROM ne_50m_admin_0_countries WHERE continent='North America'`);
/*
And you could have directly created the layer with:
countries = new carto.viz.Layer(`SELECT * FROM ne_50m_admin_0_countries WHERE continent='North America'`);
Remember that you have the full power of PostGIS from CARTO Platform in those queries!
If you want to experiment with SQL, you can see this dataset and its columns at
https://public.carto.com/tables/ne_50m_admin_0_countries/
*/
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add a GeoJSON Layer</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">GeoJSON</h1>
<h4 class="as-subheader as-mb--12">
Add a GeoJSON layer to your map. The common layer accepts geojson data thanks
to the <em>carto.viz.source.GeoJSON</em>
</h4>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
/*
Here we use CARTO SQL API endpoint (https://carto.com/developers/sql-api/), but you can use any other
source for standard GeoJSON.
When you load data this way, there is just one request for all the features, thus it can work well
if its number is low. But for bigger layers coming from CARTO, we always recommend the `Dataset`
or `SQLSource` types, which work internally more efficiently with MVT Tiles.
*/
const user = 'public';
const apiKey = 'default_public';
const sql = 'SELECT * FROM world_ports';
const url = `https://${user}.carto.com/api/v2/sql?api_key=${apiKey}&q=${sql}&format=geojson`;
const geojsonData = await fetch(url).then(response => response.json());
const deckMap = carto.viz.createMap();
const basicStyle = carto.viz.style.basic({
color: '#0000FF',
size: 14,
strokeColor: '#0000FF44',
strokeWidth: 6
});
/*
Notice how we just pass the geojsonData to the constructor...
*/
const layer = new carto.viz.Layer(geojsonData, basicStyle);
/*
...which is interpreted internally the same way as:
const layer = new carto.viz.Layer(new carto.viz.source.GeoJSON(geojsonData), basicStyle);
*/
layer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Basic style</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Basic style</h1>
<h4 class="as-subheader as-mb--12">
A simple style for a Layer, using <em>carto.viz.style.basic</em> helper
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: -116.846099,
latitude: 50.2672297,
zoom: 2.5
}
});
const basicStyle = carto.viz.style.basic({
/*
Color as a HEX value.
Defaults are points: '#EE4D5A', lines: '#4CC8A3' and polygons: '#826DBA'
*/
color: '#831123',
/*
Opacity value
(1 = 100% visible and 0 = transparent)
*/
opacity: 0.7,
/*
Color of the stroke
*/
strokeColor: '#fff',
/*
Size of the stroke
*/
strokeWidth: 2
/*
In a point layer, you would have available the 'size' property...
*/
});
const airbnbLayer = new carto.viz.Layer('ne_50m_admin_1_states_1', basicStyle);
airbnbLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Style with Icon</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Style with Icon</h1>
<h4 class="as-subheader as-mb--12">
Use a custom image for your point layers, using <em>carto.viz.style.icon</em>. In
this case representing the subway stations in New York City.
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
view: {
longitude: -73.915942,
latitude: 40.709481,
zoom: 12
}
});
/*
In this case this image is just a .png as a relative url (but you can use an absolute url
and several formats, like .svg, .bmp, jpg...). The icon size is specified in pixels
*/
const style = carto.viz.style.icon('./subway-icon.png', {
height: 40,
width: 40
});
const countriesLayer = new carto.viz.Layer('ny_subway_stations', style);
countriesLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color bins</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Color bins</h1>
<h4 class="as-subheader as-mb--12">
Create a thematic map with <em>carto.viz.style.colorBins</em>,
to represent distribution of a numerical field in the dataset with 'color'
(in this case, number of available days for airbnb apartments)
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: -3.7003859,
latitude: 40.4153265,
zoom: 12
}
});
/*
Number of bins and palette are selected by default, but of course they can be further configured.
*/
const availabilityStyle = carto.viz.style.colorBins('availability_365');
/*
previous would be equivalent to
carto.viz.style.colorBins('availability_365', {
bins: 5,
method: 'quantiles', // automatically calculated from layer's data
palette: 'purpor' // See CARTO Colors at https://carto.com/carto-colors/
});
*/
const airbnbLayer = new carto.viz.Layer('listings_madrid', availabilityStyle);
airbnbLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color categories</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Color categories</h1>
<h4 class="as-subheader as-mb--12">
Create a thematic map with <em>carto.viz.style.colorCategories</em>, to represent
distribution of a category field (string) in the dataset (in this case, room type
for airbnb apartments)
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: -3.7003859,
latitude: 40.4153265,
zoom: 12
}
});
/*
Number of categories and palette are selected by default, but of course they can be further configured.
*/
const roomTypeStyle = carto.viz.style.colorCategories('room_type');
/*
previous would be equivalent to
carto.viz.style.colorCategories('room_type', {
top: 11, // most represented categories
palette: 'bold' // See CARTO Colors at https://carto.com/carto-colors/
});
*/
const airbnbLayer = new carto.viz.Layer('listings_madrid', roomTypeStyle);
airbnbLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color continuous</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Color continuous</h1>
<h4 class="as-subheader as-mb--12">
Create a thematic map with <em>carto.viz.style.colorContinuous</em>,
to represent distribution of a numerical field in the dataset
(in this case, temperature values)
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: -116.846099,
latitude: 50.2672297,
zoom: 2.5
}
});
/*
min & max values can be omitted, and the min & max values of the layer will be automatically
fetched and considered
*/
const style = carto.viz.style.colorContinuous('value');
/*
or you can set your own custom values, like in
const style = carto.viz.style.colorContinuous('value', { rangeMin: 80, rangeMax: 100, palette: 'sunset' });
*/
const tempLayer = new carto.viz.Layer('temps', style);
tempLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Size bins</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Size bins</h1>
<h4 class="as-subheader as-mb--12">
Create a thematic map with <em>carto.viz.style.sizeBins</em>, to represent
distribution of a numerical field in the dataset with 'size' (in this case, number
of available days for airbnb apartments)
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: -3.700385991742541,
latitude: 40.41532659629741,
zoom: 14
}
});
/*
Number of bins and size range are selected by default, but of course they can be further configured.
*/
const availabilityStyle = carto.viz.style.sizeBins('availability_365');
/*
previous would be equivalent to
carto.viz.style.sizeBins('availability_365', {
bins: 5,
sizeRange: [2, 14]
});
*/
const airbnbLayer = new carto.viz.Layer('listings_madrid', availabilityStyle);
airbnbLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Size categories</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Size categories</h1>
<h4 class="as-subheader as-mb--12">
Create a thematic map with <em>carto.viz.style.sizeCategories</em>, to represent
distribution of a category field (string) in the dataset, assigning a size to each
category (in this case, road types in Australia)
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: 135.7,
latitude: -25.48,
zoom: 3
}
});
/*
Number of categories and size values are selected by default, but of course they can be further configured.
*/
const roomTypeStyle = carto.viz.style.sizeCategories('type');
const airbnbLayer = new carto.viz.Layer('roads', roomTypeStyle);
airbnbLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Size continous</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Size continuous</h1>
<h4 class="as-subheader as-mb--12">
Create a thematic map with <em>carto.viz.style.sizeContinuous</em>,
to represent distribution of a numerical field in the dataset (in this case, population size).
Used with points, you get a nice "Bubble Map"
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: -116.846099,
latitude: 50.2672297,
zoom: 2.5
}
});
/*
Size values are selected by default, but of course they can be further configured.
*/
const style = carto.viz.style.sizeContinuous('total_pop');
const californiaPopulationLayer = new carto.viz.Layer('ca_measures', style);
californiaPopulationLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formula dataview</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Formula dataview</h1>
<h4 class="as-subheader as-mb--12">
Compute a simple formula with
<em>carto.viz.dataview.Formula</em>. In this case, it is the SUM of estimated population (on screen)
</h4>
<hr/>
<div id="result"></div>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
await countriesLayer.addTo(deckMap);
const dataview = new carto.viz.dataview.Formula(countriesLayer, 'pop_est', {
operation: 'sum',
spatialFilter: 'viewport' // data will be updated on every viewport change (remove for 'global')
});
dataview.on('dataUpdate', async () => {
const data = await dataview.getData();
console.log(data); // review the dataview info
/*
We'll just present the raw number for the 'sum', without any formatting
*/
const $result = document.getElementById('result');
$result.innerHTML = data.result;
});
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Category dataview</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Category dataview</h1>
<h4 class="as-subheader as-mb--12">
Compute aggregation values per category with
<em>carto.viz.dataview.Category</em>
</h4>
<hr/>
<div id="result"></div>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
await countriesLayer.addTo(deckMap);
/*
A category dataview allows computing aggregations easily.
*/
const dataview = new carto.viz.dataview.Category(countriesLayer, 'continent', {
operation: 'sum',
operationColumn: 'pop_est',
spatialFilter: 'viewport' // data will be updated on every viewport change (remove for 'global')
});
dataview.on('dataUpdate', async () => {
const data = await dataview.getData();
console.log(data); // review the dataview info
/*
You can use here the data for any arbitrary representation.
(eg on an external chart lib).
We'll just present the raw data in a list, but check the CategoryWidget example
for a complete UI solution
*/
const $result = document.getElementById('result');
$result.innerHTML = '';
/*
total number of aggregations (categories) with .count
*/
const numberOfCategories = data.count;
$result.append(`Total: ${numberOfCategories}`);
/*
Iterate on every category, to display its name and aggregatedd 'sum' value
*/
var list = document.createElement('ul');
for (let i = 0; i < numberOfCategories; i++) {
const category = data.categories[i];
var li = document.createElement('li');
const { name, value } = category;
li.textContent = `${name}: ${value}`;
list.appendChild(li);
}
$result.append(list);
});
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Histogram dataview</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div id="panel" class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Histogram dataview</h1>
<h4 class="as-subheader as-mb--12">
Compute frequency values, aggregating features in bins, with
<em>carto.viz.dataview.Histogram</em>. In this case estimated population per country
</h4>
<hr/>
<div id="result"></div>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
await countriesLayer.addTo(deckMap);
/*
A histogram dataview allows computing bins easily.
*/
const dataview = new carto.viz.dataview.Histogram(countriesLayer, 'pop_est', {
bins: 10,
start: 1000000,
end: 127078679,
spatialFilter: 'viewport' // data will be updated on every viewport change (remove for 'global')
});
dataview.on('dataUpdate', async () => {
const data = await dataview.getData();
console.log(data); // review the dataview info
/*
You can use here the data for any arbitrary representation.
(eg on an external chart lib).
We'll just present the raw data in a list, but check the HistogramWidget example
for a complete UI solution
*/
const $result = document.getElementById('result');
$result.innerHTML = '';
/*
Iterate on every bin, to display its start-end and frequency value
*/
var list = document.createElement('ul');
for (let i = 0; i < 10; i++) {
const bin = data.bins[i];
var li = document.createElement('li');
const { start, end, value } = bin;
li.textContent = `(${start.toFixed(0)} to ${end.toFixed(0)}) => ${value}`;
list.appendChild(li);
}
$result.append(list);
});
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Viewport features</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Viewport features</h1>
<h4 class="as-subheader as-mb--12">
Get the visible features, updated on every viewport change.
</h4>
<div id="result" class="as-subheader"></div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
// vieportLoad will be triggered after every viewport change (zoom, pan...)
countriesLayer.on('dataChanged', async () => {
const features = await countriesLayer.getViewportFeatures();
// clear the panel
const $result = document.getElementById('result');
$result.innerHTML = '';
// total number of features
$result.append(`Total: ${features.length} countries`);
// Details from just a subset of <=8 features, to avoid a long list
const maxNumber = Math.min(features.length, 8);
var list = document.createElement('ul');
for (let i = 0; i < maxNumber; i++) {
const feature = features[i];
var li = document.createElement('li');
// check https://public.carto.com/tables/ne_50m_admin_0_countries/public for available fields
li.textContent = feature.iso_a3;
list.appendChild(li);
};
if (features.length > maxNumber) {
var li = document.createElement('li');
li.textContent = '... and more';
list.appendChild(li);
}
$result.append(list);
});
countriesLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formula widget</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v2.4.0-rc.0/airship.css" />
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
#panel {
width: 300px;
}
@media (max-width: 812px) {
.as-panel {
max-height: 600px;
}
}
#panel .as-box {
width: 250px;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div id="panel" class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<div class="as-container as-container--scrollable">
<section class="as-box">
<h1 class="as-title">Formula widget</h1>
<h4 class="as-subheader as-mb--12">
Display values from a Formula aggregation with
<em>carto.viz.widget.Formula</em>, In this case, it is the MAX value of estimated population
</h4>
</section>
<section class="as-box">
<!-- An airship widget for the 'global' data -->
<as-formula-widget
id="formula-global"
heading="Max Estimated Population (global)"
description="All countries"
>
</as-formula-widget>
</section>
<section class="as-box">
<!-- An airship widget for the 'viewport' data -->
<as-formula-widget
id="formula-viewport"
heading="Max Estimated Population (viewport)"
description="Countries on screen"
>
</as-formula-widget>
</section>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/airship-components/v2.4.0-rc.0/airship.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
const widgetElement = document.querySelector('as-category-widget');
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
await countriesLayer.addTo(deckMap);
/*
The dataviews define the operation to apply (in this case 'max'), and the field
to query in the features ('pop_est')
*/
const formulaGlobal = new carto.viz.dataview.Formula(countriesLayer, 'pop_est', {
operation: 'max'
});
const formulaViewport = new carto.viz.dataview.Formula(countriesLayer, 'pop_est', {
operation: 'max',
spatialFilter: 'viewport' // data will be updated on every viewport change
});
/*
There are two option availables:
- global: values for the whole layer or
- a viewport spatial filter: considering just features on screen
*/
new carto.viz.widget.Formula('#formula-global', formulaGlobal);
new carto.viz.widget.Formula('#formula-viewport', formulaViewport);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Category widget</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
#panel {
width: 300px;
}
@media (max-width: 812px) {
.as-panel {
max-height: 600px;
}
}
#panel .as-box {
width: 250px;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div id="panel" class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<div class="as-container as-container--scrollable">
<section class="as-box">
<h1 class="as-title">Category widget</h1>
<h4 class="as-subheader as-mb--12">
Create widgets aggregating values per category, with
<em>carto.viz.widget.Category</em>
</h4>
</section>
<section class="as-box">
<!-- An airship widget for the 'global' data -->
<as-category-widget
id="category-global"
heading="Countries per continent (global)"
description="All countries"
show-clear-button
>
</as-category-widget>
</section>
<section class="as-box">
<!-- An airship widget for the 'viewport' data -->
<as-category-widget
id="category-viewport"
heading="Countries per continent (viewport)"
description="Countries on screen"
show-clear-button
>
</as-category-widget>
</section>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/airship-components/v2.4/airship.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
const widgetElement = document.querySelector('as-category-widget');
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
await countriesLayer.addTo(deckMap);
/*
The dataviews define the operation to apply (in this case 'count'), and how to group
the features (countries grouped by 'continent' field).
*/
const dataviewGlobal = new carto.viz.dataview.Category(countriesLayer, 'continent', {
operation: 'count'
});
const dataviewViewport = new carto.viz.dataview.Category(countriesLayer, 'continent', {
operation: 'count',
spatialFilter: 'viewport' // data will be updated on every viewport change
});
/*
There are two available options:
- global: values for the whole layer or
- a viewport spatial filter: considering just features on screen
Widgets include a filtering feature out of the box, so you can display / hide the categories
on the map
*/
new carto.viz.widget.Category('#category-global', dataviewGlobal);
new carto.viz.widget.Category('#category-viewport', dataviewViewport);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Histogram widget</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
#panel {
width: 300px;
}
@media (max-width: 812px) {
.as-panel {
max-height: 600px;
}
}
#panel .as-box {
width: 250px;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div id="panel" class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<div class="as-container as-container--scrollable">
<section class="as-box">
<h1 class="as-title">Histogram widget</h1>
<h4 class="as-subheader as-mb--12">
Create a histogram widget, aggregating values in bins, with
<em>carto.viz.widget.Histogram</em>
</h4>
</section>
<section class="as-box">
<!-- An airship widget for the 'global' data -->
<as-histogram-widget
id="histogram-global"
heading="Estimated Population (global)"
description="Distribution of estimated population in countries"
show-clear-button
>
</as-histogram-widget>
<!-- An airship widget for the 'viewport' data -->
<as-histogram-widget
id="histogram-viewport"
heading="Estimated Population (viewport)"
description="Distribution of estimated population in countries"
show-clear-button
>
</as-histogram-widget>
</section>
</div>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/airship-components/v2.4/airship.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
const widgetElement = document.querySelector('as-category-widget');
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
await countriesLayer.addTo(deckMap);
/*
The dataviews define the histogram params
*/
const histogramGlobal = new carto.viz.dataview.Histogram(countriesLayer, 'pop_est', {
bins: 10,
start: 1000000,
end: 127078679
});
const histogramViewport = new carto.viz.dataview.Histogram(countriesLayer, 'pop_est', {
bins: 10,
start: 1000000,
end: 127078679,
spatialFilter: 'viewport' // data will be updated on every viewport change
});
/*
There are two option availables:
- global: values for the whole layer or
- a viewport spatial filter: considering just features on screen
Widgets include a filtering feature out of the box, so you can display / hide the categories
on the map
*/
new carto.viz.widget.Histogram('#histogram-global', histogramGlobal);
new carto.viz.widget.Histogram('#histogram-viewport', histogramViewport);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup on click</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<link rel="stylesheet" type="text/css" href="https://libs.cartocdn.com/airship-icons/v2.4/icons.css"/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="as-app" style="height: 100vh;">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Popup on click</h1>
<h4 class="as-subheader as-mb--12">
Configure popup windows on click
</h4>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/airship-components/v2.4/airship.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const sizeBinStyle = new carto.viz.style.sizeBins('pop_2015', {
sizeRange: [1, 50]
});
const populationLayer = new carto.viz.Layer('world_population_2015', sizeBinStyle);
populationLayer.setPopupClick(['cartodb_id', { attr: 'pop_2015', title: 'Population' }]);
populationLayer.addTo(deckMap);
/*
you can easily disable later on the popups with
populationLayer.setPopupClick(null);
*/
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup on hover</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<link rel="stylesheet" type="text/css" href="https://libs.cartocdn.com/airship-icons/v2.4/icons.css"/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="as-app" style="height: 100vh;">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Popup on hover</h1>
<h4 class="as-subheader as-mb--12">
Configure popup windows on hover
</h4>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/airship-components/v2.4/airship.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-format/1.3.0/d3-format.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const sizeBinStyle = new carto.viz.style.sizeBins('pop_2015', {
sizeRange: [1, 50]
});
const populationLayer = new carto.viz.Layer('world_population_2015', sizeBinStyle, {
hoverStyle: 'default'
});
populationLayer.setPopupHover([
'cartodb_id',
{
attr: 'pop_2015',
title: 'Population',
format: d3.format('~s') // D3 format. See https://github.com/d3/d3-format for examples
}
]);
populationLayer.addTo(deckMap);
/*
you can easily disable later on the popups with
populationLayer.setPopupHover(null);
*/
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Feature click</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="as-app" style="height: 100vh;">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Feature click</h1>
<h4 class="as-subheader as-mb--12">
Click on the polygons to see the feature values
</h4>
<div id="result"></div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: -0.127,
latitude: 51.507,
zoom: 10
}
});
const defaultStyle = new carto.viz.style.basic();
const countriesLayer = new carto.viz.Layer('london_neighbourhoods', defaultStyle, {
clickStyle: 'default'
});
/*
you get a collection of features on click,
*/
countriesLayer.on('click', ([features, coordinates]) => {
let content = '';
features.forEach(f => {
content += `
<ul>
<li>Name: ${f.properties.neighbourh}</li>
<li>Latitude: ${coordinates[0].toFixed(4)}</li>
<li>Longitude: ${coordinates[1].toFixed(4)}</li>
</ul>
`;
});
document.getElementById('result').innerHTML = content;
});
countriesLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Feature hover</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="as-app" style="height: 100vh;">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Feature hover</h1>
<h4 class="as-subheader as-mb--12">
Move the mouse over the polygons to see the feature values
</h4>
<div id="result"></div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: -0.127,
latitude: 51.507,
zoom: 10
}
});
const defaultStyle = new carto.viz.style.basic();
const countriesLayer = new carto.viz.Layer('london_neighbourhoods', defaultStyle, {
hoverStyle: 'default'
});
/*
you get a collection of features on hover,
*/
countriesLayer.on('hover', ([features, coordinates]) => {
let content = '';
features.forEach(f => {
content += `
<ul>
<li>Name: ${f.properties.neighbourh}</li>
<li>Latitude: ${coordinates[0].toFixed(4)}</li>
<li>Longitude: ${coordinates[1].toFixed(4)}</li>
</ul>
`;
});
document.getElementById('result').innerHTML = content;
});
countriesLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive style</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="as-app" style="height: 100vh;">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Interactive style</h1>
<h4 class="as-subheader as-mb--12">
Hover and clik the points, to see a style change due to the interaction, with
<em>hoverStyle</em> and <em>clickStyle</em> options
</h4>
<div id="result"></div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
async function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap();
const sizeBinStyle = new carto.viz.style.sizeBins('pop_2015', {
sizeRange: [1, 50],
opacity: 0.5
});
/*
A custom hover style is specified in the options.
For the click, a 'default' with a yellow color is set
*/
const populationLayer = new carto.viz.Layer('world_population_2015', sizeBinStyle, {
hoverStyle: {
getFillColor: [255, 0, 165, 200],
getLineColor: [214, 0, 138, 200],
getLineWidth: 4
},
clickStyle: 'default'
});
populationLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Popup format</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<link rel="stylesheet" type="text/css" href="https://libs.cartocdn.com/airship-icons/v2.4/icons.css"/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<div class="as-app" style="height: 100vh;">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Popup format</h1>
<h4 class="as-subheader as-mb--12">
Configure popup windows format
</h4>
<div id="result"></div>
</div>
</div>
</div>
</main>
</div>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src="https://libs.cartocdn.com/airship-components/v2.4/airship.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-format/1.3.0/d3-format.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({
username: 'cartovl',
apiKey: 'default_public'
});
const deckMap = carto.viz.createMap({
basemap: 'voyager',
view: {
longitude: 0,
latitude: 30,
zoom: 1.5
}
});
const sizeBinStyle = new carto.viz.style.sizeBins('pop_2015', {
sizeRange: [1, 50]
});
const populationLayer = new carto.viz.Layer('world_population_2015', sizeBinStyle, {
hoverStyle: 'default'
});
populationLayer.setPopupHover([
{
attr: 'cartodb_id',
title: null // hide the title of this field
},
{
attr: 'pop_2015',
title: 'Population D3',
/*
The attribute format accepts a function, so for example you can use a D3 format (see
https://github.com/d3/d3-format) or any other arbitrary function.
*/
format: d3.format('~s')
},
{
attr: 'pop_2015',
title: 'Population Custom',
format: value => value.toString().replace(/000$/, 'K habitants')
}
]);
populationLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Manual popup</title>
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
.customPopup {
background-color: white;
padding: 16px;
}
</style>
</head>
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map -->
<div id="map"></div>
<!-- panel -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Manual popup</h1>
<h4 class="as-subheader as-mb--12">
A custom popup on arbitrary coordinates with <em>carto.viz.Popup</em>
</h4>
</div>
</div>
</div>
</main>
</div>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
carto.auth.setDefaultCredentials({ username: 'public' });
const deckMap = carto.viz.createMap({ basemap: 'darkmatter' });
const popup = new carto.viz.Popup();
popup.setContent('<div class="customPopup">HELLO!</div>');
popup.setCoordinates([0, 0]);
popup.addTo(deckMap);
popup.open();
}
initialize();
</script>
</body>
</html>