This is a DEPRECATED VERSION of CARTO VL. You can find more information about the support and the availability of the different CARTO VL versions.
CARTO VL is a JavaScript library to create custom Location Intelligence applications over vector rendering.
This library is still under support but it will not be further developed. We don’t recommend starting new projects with it as it will eventually become deprecated. Instead, learn more about our current CARTO for deck.gl library here
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
<!DOCTYPE html>
<html>
<head>
<title>Add layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Add layer</h1>
</header>
<section>
<p class="description open-sans">Add one CARTO layer to your map</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 0],
zoom: 0,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('populated_places');
const viz = new carto.Viz();
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Basic style | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Style layer</h1>
</header>
<section>
<p class="description open-sans">Basic styling of a layer</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 2,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('populated_places');
const viz = new carto.Viz(`
width: 8
color: #6A5ACD
strokeWidth: 0.5
strokeColor: #191970
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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>
<head>
<title>Query layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>SQL Source layer</h1>
</header>
<section>
<p class="description open-sans">Use a SQL query as a source</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 3,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.SQL(`
SELECT *
FROM populated_places
WHERE adm0name = 'Spain'
`);
const viz = new carto.Viz(`
width: 8
color: #6A5ACD
strokeWidth: 0.5
strokeColor: #191970
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Add multiple layers | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Multiple layers</h1>
</header>
<section>
<p class="description open-sans">Add multiple layers to your map</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 43],
zoom: 4,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layers
const citiesSource = new carto.source.SQL(`
SELECT *
FROM populated_places
WHERE adm0name IN ('Spain','France','Italy','Switzerland','Portugal')
`);
const citiesViz = new carto.Viz();
const citiesLayer = new carto.Layer('citiesLayer', citiesSource, citiesViz);
const countriesSource = new carto.source.SQL(`
SELECT *
FROM ne_adm0_europe
WHERE admin IN ('Spain','France','Italy','Switzerland','Portugal')
`);
const countriesViz = new carto.Viz();
const countriesLayer = new carto.Layer('countriesLayer', countriesSource, countriesViz);
citiesLayer.addTo(map, 'watername_ocean');
countriesLayer.addTo(map, 'citiesLayer');
countriesLayer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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>
<head>
<title>Select layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Select layer</h1>
</header>
<section>
<p class="description open-sans">Update the source of your layers</p>
<div id="controls">
<ul class="actions">
<li>
<input type="radio" name="source" onclick="setAllCities()" id="all" checked>
<label for="all">All cities</label>
</li>
<li>
<input type="radio" name="source" onclick="setEuropeanCities()" id="europe">
<label for="europe">European cities</label>
</li>
<li>
<input type="radio" name="source" onclick="setSpanishCities()" id="spain">
<label for="spain">Spanish cities</label>
</li>
</ul>
<div id="info"></div>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 2,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define sources
const allCitiesSource = new carto.source.SQL(`
SELECT *
FROM populated_places
`);
const europeanCitiesSource = new carto.source.SQL(`
SELECT *
FROM populated_places
WHERE adm0name IN (SELECT admin FROM ne_adm0_europe)
`);
const spanishCitiesSource = new carto.source.SQL(`
SELECT *
FROM populated_places
WHERE adm0name = 'Spain'
`);
// Define layer
const citiesViz = new carto.Viz(`
width: 8
color: #6A5ACD
strokeWidth: 0.5
strokeColor: #191970
`);
const citiesLayer = new carto.Layer('citiesLayer', allCitiesSource, citiesViz);
citiesLayer.addTo(map, 'watername_ocean');
citiesLayer.on('loaded', hideLoader);
function setAllCities() {
citiesLayer.update(allCitiesSource, citiesViz);
}
function setEuropeanCities() {
citiesLayer.update(europeanCitiesSource, citiesViz);
}
function setSpanishCities() {
citiesLayer.update(spanishCitiesSource, citiesViz);
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Color spaces | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Color spaces</h1>
</header>
<section>
<p class="description open-sans">The color spaces that we support</p>
<div id="controls">
<ul>
<li>
<input type="radio" name="viz" onclick="setHEXGreen()" id="green" checked>
<label for="green">HEX - Green</label>
</li>
<li>
<input type="radio" name="viz" onclick="setRGBARed()" id="red">
<label for="red">RGBA - Red</label>
</li>
<li>
<input type="radio" name="viz" onclick="setNamedColorOrange()" id="orange">
<label for="orange">Named Color - Orange</label>
</li>
<li>
<input type="radio" name="viz" onclick="setHSVBlue()" id="blue">
<label for="blue">HSV - Blue</label>
</li>
<li>
<input type="radio" name="viz" onclick="setHSLPurple()" id="purple">
<label for="purple">HSL - Purple</label>
</li>
<li>
<input type="radio" name="viz" onclick="setCIELABYellow()" id="yellow">
<label for="yellow">CIELAB - Yellow</label>
</li>
</ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 2,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define styles
const vizGreen = new carto.Viz(`
color: #00874D
`);
const vizRed = new carto.Viz(`
color: rgba(255, 0, 0, 1)
`);
const vizOrange = new carto.Viz(`
color: orange
`);
const vizBlue = new carto.Viz(`
color: hsva(0.59, 0.89, 1.0, 1.0)
`);
const vizPurple = new carto.Viz(`
color: hsla(0.7, 0.7, 0.5, 1.0)
`);
const vizYellow = new carto.Viz(`
color: cielab(90, 10, 60)
`);
// Define layer
const source = new carto.source.Dataset('populated_places');
const layer = new carto.Layer('layer', source, vizGreen);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function setHEXGreen() {
layer.blendToViz(vizGreen);
}
function setRGBARed() {
layer.blendToViz(vizRed);
}
function setNamedColorOrange() {
layer.blendToViz(vizOrange);
}
function setHSVBlue() {
layer.blendToViz(vizBlue);
}
function setHSLPurple() {
layer.blendToViz(vizPurple);
}
function setCIELABYellow() {
layer.blendToViz(vizYellow);
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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>
<head>
<title>Color schemes | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Color schemes</h1>
</header>
<section>
<p class="description open-sans">How to use CARTOcolors and custom color schemes</p>
<div id="controls">
<ul>
<li>
<input type="radio" name="style" onclick="setCartocolor()" id="Cartocolor" checked>
<label for="Cartocolor">CARTOcolor (default)</label>
</li>
<li>
<input type="radio" name="style" onclick="setCartocolorReverse()" id="CartocolorReverse">
<label for="CartocolorReverse">CARTOcolor (reverse)</label>
</li>
<li>
<input type="radio" name="style" onclick="setCustomColors()" id="CustomColors">
<label for="CustomColors">Custom colors</label>
</li>
</ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-100.3710, 38.4793],
zoom: 4,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('us_county_points');
const viz = new carto.Viz(`color: ramp(viewportQuantiles($total_pop, 5), sunsetdark)`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
function setCartocolor() {
viz.color.blendTo('ramp(viewportQuantiles($total_pop, 5), sunsetdark)');
}
function setCartocolorReverse() {
viz.color.blendTo('ramp(viewportQuantiles($total_pop, 5), reverse(sunsetdark))');
}
function setCustomColors() {
viz.color.blendTo('ramp(linear($total_pop, 10000, 500000), [#0a3e39, #84ebe1])');
}
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Style by category | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Style by category</h1>
</header>
<section>
<p class="description open-sans">Options for symbolizing category attributes</p>
<div id="controls">
<ul>
<li>
<input type="radio" name="style" onclick="setRampAuto()" id="auto" checked>
<label for="auto">All categories</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampBuckets()" id="buckets">
<label for="buckets">Custom categories</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampTop()" id="top">
<label for="top">Top categories</label>
</li>
</ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [2.1734, 41.3851],
zoom: 12,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define styles
const rampAutoViz = new carto.Viz(`
color: ramp($category, vivid)
strokeWidth: 0
`);
const rampBucketsViz = new carto.Viz(`
color: ramp(buckets($category, ['Moda y calzado']), vivid)
strokeWidth: 0
`);
const rampTopViz = new carto.Viz(`
color: ramp(top($category, 3), vivid)
strokeWidth: 0
`);
// Define layer
const source = new carto.source.Dataset('spend_data');
const layer = new carto.Layer('layer', source, rampAutoViz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function setRampAuto() {
layer.blendToViz(rampAutoViz);
}
function setRampBuckets() {
layer.blendToViz(rampBucketsViz);
}
function setRampTop() {
layer.blendToViz(rampTopViz);
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Style by number | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Style by number</h1>
</header>
<section>
<p class="description open-sans">Options for symbolizing numeric attributes</p>
<div id="controls">
<ul>
<li>
<input type="radio" name="style" onclick="setRampQuantiles()" id="auto" checked>
<label for="auto">Quantiles</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampBuckets()" id="buckets">
<label for="buckets">Manual</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampLinear()" id="linear">
<label for="linear">Interpolate</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampEqualIntervals()" id="equalintervals">
<label for="equalintervals">Equal intervals</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampStandardDev()" id="standardDev">
<label for="standardDev">Mean-Standard Deviation</label>
</li>
</ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-100.3710, 38.4793],
zoom: 4,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define styles
const rampQuantilesViz = new carto.Viz(`
color: ramp(viewportQuantiles($total_pop, 5), sunsetdark)
strokeWidth: 0
`);
const rampBucketsViz = new carto.Viz(`
color: ramp(buckets($total_pop, [10000, 25000, 100000, 500000, 1000000]), sunsetdark)
strokeWidth: 0
`);
const rampLinearViz = new carto.Viz(`
color: ramp(linear($total_pop, 10000, 500000), sunsetdark)
strokeWidth: 0
`);
const rampEqualIntervalsViz = new carto.Viz(`
color: ramp(viewportEqIntervals($total_pop, 5), sunsetdark)
strokeWidth: 0
`);
const rampStandardDevViz = new carto.Viz(`
color: ramp(viewportStandardDev($total_pop, 5), tealrose)
strokeWidth: 0
`);
// Define layer
const source = new carto.source.Dataset('us_county_points');
const layer = new carto.Layer('layer', source, rampQuantilesViz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function setRampQuantiles() {
layer.blendToViz(rampQuantilesViz);
}
function setRampBuckets() {
layer.blendToViz(rampBucketsViz);
}
function setRampLinear() {
layer.blendToViz(rampLinearViz);
}
function setRampEqualIntervals() {
layer.blendToViz(rampEqualIntervalsViz);
}
function setRampStandardDev() {
layer.blendToViz(rampStandardDevViz);
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Style with variables | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Style with variables</h1>
</header>
<section>
<p class="description open-sans">Styling properties using variables</p>
</section>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 2,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('world_population_2015');
const viz = new carto.Viz(`
@pop: sqrt($pop_2015) / 200
@style: ramp($country_name, bold)
width: @pop
color: @style
strokeColor: @style
strokeWidth: 1.5
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Animate by date/time | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Animated map</h1>
</header>
<section>
<p class="description open-sans">How to animate features by date/time</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-73.96, 40.75],
zoom: 11,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('taxi_50k');
const viz = new carto.Viz(`
filter: animation(linear($tpep_pickup_datetime,time('2016-05-01T00:00:07Z'),time('2016-05-06T10:40:59Z')),30,fade(0.1,0.5))
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Filter based styling | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Filter based styling</h1>
</header>
<section>
<p class="description open-sans">Filter data in the browser</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [0, 30],
zoom: 2,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('populated_places');
const viz = new carto.Viz(`
color: ramp(viewportQuantiles($pop_max, 5), redor)
width: 5
strokeWidth: 0
filter: between($pop_max, 10000, 100000)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Viewport based styling | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Viewport based styling</h1>
</header>
<section>
<p class="description open-sans">Vary symbol color based on data in current viewport</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [2.1734, 41.3851],
zoom: 12,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('spend_data');
const viz = new carto.Viz(`
width: sqrt($amount)/2
color: ramp(linear($amount,viewportMax($amount),viewportMin($amount)),bluyl)
strokeColor: rgba(51,51,51,0.3)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Single Image | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Single Image</h1>
</header>
<section>
<p class="description open-sans">Symbolize points with a built-in image</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 3,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('populated_places');
const viz = new carto.Viz(`
symbol: star
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Multiple Images | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Multiple Images</h1>
</header>
<section>
<p class="description open-sans">Assign images to different categories</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 3,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('populated_places');
const viz = new carto.Viz(`
width: ramp(buckets($featurecla, ['Admin-0 capital','Admin-1 capital','Populated place']), [30,20,10])
color: ramp(buckets($featurecla, ['Admin-0 capital','Admin-1 capital','Populated Place']), [violet,limegreen,gray])
symbol: ramp(buckets($featurecla, ['Admin-0 capital','Admin-1 capital','Populated place']), [star,triangle,marker])
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>External Image | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>External Image</h1>
</header>
<section>
<p class="description open-sans">Symbolize points with an external image</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-95.907985, 37.746163],
zoom: 4,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('walmarts');
const viz = new carto.Viz(`
width: 25
symbol: image('https://libs.cartocdn.com/carto-vl/assets/walmart.svg')
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Draw order | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Draw Order</h1>
</header>
<section>
<p class="description open-sans">How to use CARTO ordering style property</p>
<div id="controls">
<ul>
<li>
<input type="radio" name="style" onclick="setAscOrder()" id="Asc" checked>
<label for="Asc">Asc</label>
</li>
<li>
<input type="radio" name="style" onclick="setDescOrder()" id="Desc">
<label for="Desc">Desc</label>
</li>
<li>
<input type="radio" name="style" onclick="setDefaultOrder()" id="Default">
<label for="Default">Default / No order</label>
</li>
</ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [2.1734, 41.3851],
zoom: 14,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset(`
spend_data
`);
const s = carto.expressions;
// Define style
const viz = new carto.Viz({
width: s.sqrt(s.prop('amount')),
color: s.ramp(s.prop('category'), s.palettes.PRISM),
strokeColor: s.rgba(255, 255, 255, 0.5),
strokeWidth: 1,
order: s.asc(s.width())
});
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
function setDefaultOrder() {
layer.blendToViz(new carto.Viz({
width: s.sqrt(s.prop('amount')),
color: s.ramp(s.prop('category'), s.palettes.PRISM),
strokeColor: s.rgba(255, 255, 255, 0.5),
strokeWidth: 1,
}));
}
function setAscOrder() {
layer.blendToViz(new carto.Viz({
width: s.sqrt(s.prop('amount')),
color: s.ramp(s.prop('category'), s.palettes.PRISM),
strokeColor: s.rgba(255, 255, 255, 0.5),
strokeWidth: 1,
order: s.asc(s.width())
}));
}
function setDescOrder() {
layer.blendToViz(new carto.Viz({
width: s.sqrt(s.prop('amount')),
color: s.ramp(s.prop('category'), s.palettes.PRISM),
strokeColor: s.rgba(255, 255, 255, 0.5),
strokeWidth: 1,
order: s.desc(s.width())
}));
}
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Scaled width | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Scaled width</h1>
</header>
<section>
<p class="description open-sans">How to keep feature at constant widths in real meters</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-73.96, 40.75],
zoom: 14,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('taxi_50k');
const viz = new carto.Viz(`
// 3 pixels at zoom level 13
// 6 pixels at zoom level 14
// 12 pixels at zoom level 15
width: scaled(6, 14)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Geometry types | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<!-- Add map container -->
<div id="map"></div>
<!-- Add title/legend box -->
<aside class="toolbox">
<div class="box">
<header>
<h1>Visualization properties by geometry</h1>
</header>
<section>
<p class="description open-sans">Styling properties adapt to each geometry type. Some geometry types will
ignore some styling properties.</p>
<div id="controls">
<ul class="actions">
<li>
<input type="radio" name="source" onclick="usePoints()" id="points" checked>
<label for="points">Points</label>
</li>
<li>
<input type="radio" name="source" onclick="useLines()" id="lines">
<label for="lines">Lines</label>
</li>
<li>
<input type="radio" name="source" onclick="usePolygons()" id="polygons">
<label for="polygons">Polygons</label>
</li>
</ul>
<div id="info"></div>
</div>
</section>
</div>
</aside>
<script>
// Add basemap and set properties
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [7, 25],
zoom: 2,
scrollZoom: false,
});
// Add zoom controls
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
//** CARTO VL functionality begins here **//
// Define user
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
// Define source
const source = new carto.source.Dataset('populated_places_small');
// Define Viz object and custom style
const viz = new carto.Viz(`
color: navy // 'color' is never ignored
width: 8 // 'width' is ignored for polygons
strokeColor: fuchsia // 'strokeColor' is ignored for lines
strokeWidth: 2 // 'strokeWidth' is ignored for lines
`);
// Define map layer
const layer = new carto.Layer('layer', source, viz);
// Add map layer
layer.addTo(map);
// Define selection behavior
function usePoints() {
layer.update(new carto.source.Dataset('populated_places_small'), viz)
}
function useLines() {
layer.update(new carto.source.Dataset('world_rivers_small'), viz)
}
function usePolygons() {
layer.update(new carto.source.Dataset('world_borders'), viz)
}
</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>
<head>
<title>Access viz properties | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<!-- Add map container -->
<div id="map"></div>
<!-- Add title/legend box -->
<aside class="toolbox">
<div class="box">
<header>
<h1>Access visualization properties</h1>
</header>
<section>
<p class="description open-sans">Modify and access visualization properties</p>
<label>The current color is:</label>
<label id="colorDisplay"></label>
<button onclick="randomizeColor()">Randomize color</button>
</section>
</div>
</aside>
<script>
// Add basemap and set properties
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [7, 25],
zoom: 2,
scrollZoom: false,
});
// Add zoom controls
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
//** CARTO VL functionality begins here **//
// Define user
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
// Define source
const source = new carto.source.Dataset('populated_places');
// Define Viz object and custom style
const viz = new carto.Viz(`
color: slateblue
`);
// Define map layer
const layer = new carto.Layer('layer', source, viz);
// Add map layer
layer.addTo(map);
// Define randomize color behavior
layer.on('updated', () => {
const currentColor = viz.color.value;
document.getElementById('colorDisplay').innerText = JSON.stringify(currentColor, null, 4);
});
function randomizeColor() {
viz.color.blendTo(`rgb(${(Math.random() * 255).toFixed(0)}, ${(Math.random() * 255).toFixed(0)}, ${(Math.random() * 255).toFixed(0)})`);
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Implicit casting | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Implicit casts</h1>
</header>
<section>
<p class="description open-sans">Select a style</p>
<div id="controls">
<ul class="actions">
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp($dn, [midnightblue, deeppink, gold])')" id="viz1" checked>
<label for="viz1">Style 1</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp(linear($dn), [midnightblue, deeppink, gold])')" id="viz2">
<label for="viz2">Style 2</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp(linear($dn, globalMin($dn), globalMax($dn)), [midnightblue, deeppink, gold])')" id="viz3">
<label for="viz3">Style 3</label>
</li>
</ul>
<div id="info"></div>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [60, 19],
zoom: 2,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("pop_density_points");
const viz = new carto.Viz(`
width: 2
color: ramp($dn, [midnightblue, deeppink, gold])
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
</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
<!DOCTYPE html>
<html>
<head>
<title>Add layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Classification Methods</h1>
</header>
<section>
<p class="description open-sans">Click on a style</p>
<div id="controls">
<ul class="actions">
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp(globalQuantiles($dn, 3), [midnightblue, deeppink, gold])')"
id="viz1" checked>
<label for="viz1">Style 1: Quantiles Global</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp(globalEqIntervals($dn, 3), [midnightblue, deeppink, gold])')"
id="viz2">
<label for="viz2">Style 2: Equal Intervals Global</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp(viewportQuantiles($dn, 3), [midnightblue, deeppink, gold])')"
id="viz3">
<label for="viz3">Style 3: Quantiles Viewport</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp(viewportEqIntervals($dn, 3), [midnightblue, deeppink, gold])')"
id="viz4">
<label for="viz4">Style 4: Equal Interval Viewport</label>
</li>
</ul>
<div id="info"></div>
<h1 id="content-title"></h1>
<ul id="content" class="description open-sans"></ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [60, 19],
zoom: 2,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("pop_density_points");
const viz = new carto.Viz(`
width: 2
color: ramp(globalQuantiles($dn, 3), [midnightblue, deeppink, gold])
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('updated', () => {
// Get the legend
if (!layer.viz.color.getLegendData) {
return;
}
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
colorLegend.data.forEach((legend) => {
const colorHex = rgbToHex(legend.value);
const keyMin = legend.key[0].toFixed(2).replace('Infinity', '∞');
const keyMax = legend.key[1].toFixed(2).replace('Infinity', '+∞');
colorLegendList +=
`<li><span class="point-mark" style="background-color:${colorHex};"></span> <span>[${keyMin}, ${keyMax}]</span></li>\n`;
});
// Update the information
document.getElementById('content').innerHTML = colorLegendList;
});
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Add layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-0.815850, 52.087124],
zoom: 6,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("uk_elections ");
const viz = new carto.Viz(`
color: ramp(buckets($winner, ["Conservative Party", "Labour Party"]), [royalblue, crimson])
strokeColor: rgba(255,255,255,0.6)`
);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
</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
<!DOCTYPE html>
<html>
<head>
<title>Add layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-0.815850, 52.087124],
zoom: 6,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("uk_elections");
const viz = new carto.Viz(`
color: ramp(buckets($winner, ["Conservative Party", "Labour Party"]), [royalblue, crimson], orange)
strokeColor: rgba(255,255,255,0.4)`
);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
</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
<!DOCTYPE html>
<html>
<head>
<title>Railroad accidents | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Weather Conditions</h1>
</header>
<section>
<div id="controls">
<ul id="content"></ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 41],
zoom: 2.75,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("railroad_accidents");
const viz = new carto.Viz(`
width: 5
color: ramp(top($weather, 3), [darkorange,darkviolet,darkturquoise], white)
strokeWidth: 0.2
strokeColor: black
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
colorLegend.data.forEach((legend, index) => {
const color = legend.value
? rgbToHex(legend.value)
: 'white'
if (color) {
colorLegendList +=
`<li><span class="point-mark" style="background-color:${color}; border: 1px solid black;"></span><span>${legend.key.replace('CARTO_VL_OTHERS', 'Other weather')}</span></li>\n`;
}
});
document.getElementById('content').innerHTML = colorLegendList;
});
</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
<!DOCTYPE html>
<html>
<head>
<title>Railroad accidents | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Weather Conditions</h1>
</header>
<section>
<div id="controls">
<ul id="content"></ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 41],
zoom: 2.75,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("railroad_accidents");
const viz = new carto.Viz(`
width: 5
color: ramp($weather,[darkorange,darkviolet,darkturquoise])
strokeWidth: 0.2
strokeColor: black
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
colorLegend.data.forEach((legend, index) => {
const color = rgbToHex(legend.value);
colorLegendList +=
`<li><span class="point-mark" style="background-color:${color}; border: 1px solid black;"></span><span>${legend.key.replace('CARTO_VL_OTHERS', 'Other causes')}</span></li>\n`;
});
document.getElementById('content').innerHTML = colorLegendList;
});
</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>
<head>
<title>Add layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Select Visualization</h1>
</header>
<section>
<p class="description open-sans">Change the visualization of the layer</p>
<div id="controls">
<ul class="actions">
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp($dn, [green, yellow, red])')"
id="viz1" checked>
<label for="viz1">
<h2>ramp($dn, [green, yellow, red])</h2>
<p class="description open-sans"> Take colors from a color list. Since the input is an unclassified numeric property, interpolation of the colors values will be performed.</p>
</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp($dn, temps)')" id="viz2">
<label for="viz2">
<h2>ramp($dn, temps)</h2>
<p class="description open-sans"> Use the "temps" CARTOColors palette.</p>
</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp($dn, [hsv(0.5, 1,1), hsv(1, 1, 1)])')"
id="viz3">
<label for="viz3">
<h2>'ramp($dn, [hsv(0.5, 1,1), hsv(1, 1, 1)])'</h2>
<p class="description open-sans">Take colors from a color list with HSV color constructors.</p>
</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.color.blendTo('ramp($dn, [transparent, gray, yellow])')"
id="viz4">
<label for="viz4">
<h2>'ramp($dn, [transparent, gray, yellow])'</h2>
<p class="description open-sans">The same as the first example, but showing that `ramp` supports transparency too.</p>
</label>
</li>
</ul>
<div id="info"></div>
<p id="content-title"></p>
<ul id="content"></ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [60,19],
zoom: 2,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("pop_density_points");
const viz = new carto.Viz(`
width: scaled(0.7)
color: ramp($dn, [green, yellow, red])
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('updated', () => {
// Get the legend
if (!layer.viz.color.getLegendData) {
return;
}
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
colorLegend.data.forEach((legend) => {
const colorHex = rgbToHex(legend.value);
const key = legend.key.toFixed(2);
colorLegendList +=
`<li><span class="point-mark" style="background-color:${colorHex};"></span> <span>${key}</span></li>\n`;
});
// Update the information
document.getElementById('content').innerHTML = colorLegendList;
document.getElementById('content-title').innerHTML = `Legend of ${colorLegend.name}`;
});
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Railroad accidents | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Legend</h1>
</header>
<p class="description open-sans">Type of accident</p>
<section>
<div id="controls">
<ul id="content"></ul>
</div>
</section>
<br/>
<header>
<h1>Visualizations</h1>
</header>
<p class="description open-sans">Change the visualization of the layer</p>
<div id="controls">
<ul class="actions">
<li>
<input type="radio" name="source" onclick="viz.width.blendTo('ramp($total_damage, [0, 50])')"
id="viz0" checked>
<label for="viz0">
<h2>ramp($total_damage, [0, 50])</h2>
<p class="description open-sans">This will set a 0 pixel width to accidents with the minimum amount of damage in the dataset and 50 pixels to the one with the most damage.</span></p>
</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.width.blendTo('sqrt(ramp($total_damage, [0, 50^2]))')"
id="viz1">
<label for="viz1">
<h2>sqrt(ramp($total_damage, [0, 50^2]))</h2>
<p class="description open-sans">The same as before for the extreme points, but the interpolation will be linear in area, not in width. An intermediate accident with half the damage of the worst accident will get half the area of the worst (50²/2), but not half its width. Unless you want to accentuate differences, this is usually the proper way to make a bubble map</span></p>
</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.width.blendTo('sqrt($total_damage/globalMax($total_damage))*50')"
id="viz4">
<label for="viz4">
<h2>sqrt($total_damage/globalMax($total_damage))*50')</h2>
<p class="description open-sans">The same as before since the dataset has accidents with zero damage.</span></p>
</label>
</li>
<li>
<input type="radio" name="source" onclick="viz.width.blendTo('ramp(globalEqIntervals($total_damage, 3), [0.5, 50])')"
id="viz2">
<label for="viz2">
<h2>ramp(globalEqIntervals($total_damage, 3), [1, 25])</h2>
<p class="description open-sans">Classifiers can be used too. In this example, the "Equal Intervals" method allows to detect the outliers quickly.</span></p>
</label>
</li>
</ul>
<div id="info"></div>
</div>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 41],
zoom: 3.5,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("railroad_accidents");
const viz = new carto.Viz(`
width: ramp($total_damage, [0, 50])
strokeWidth: 0.2
color: ramp(top($accident_type, 3), [#3969AC, #F2B701, #E73F74], #A5AA99)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
colorLegend.data.forEach((legend, index) => {
const color = legend.value
? rgbToHex(legend.value)
: 'white'
if (color) {
colorLegendList +=
`<li><span class="point-mark" style="background-color:${color}; border: 1px solid black;"></span><span>${legend.key.replace('CARTO_VL_OTHERS', 'Rest of types')}</span></li>\n`;
}
});
document.getElementById('content').innerHTML = colorLegendList;
});
</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>
<head>
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Latitudes</h1>
</header>
<section>
<div id="controls">
<ul id="content"></ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 43],
zoom: 1,
});
map.touchZoomRotate.disableRotation();
// Authenticate the client
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define the source
const source = new carto.source.Dataset('populated_places');
// Define the visualization
const viz = new carto.Viz(`
color: ramp(linear($latitude), sunset)
width: 5
strokeWidth: 0
`);
// Create the layer
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
// Get the information for legend
colorLegend.data.forEach((legend, index) => {
const colorHex = rgbToHex(legend.value);
colorLegendList +=
`<li><span class="point-mark" style="background-color:${colorHex};"></span> <span>${legend.key}</span></li>\n`;
});
// Update the legend with the legend information
document.getElementById('content').innerHTML = colorLegendList;
});
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
</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
<!DOCTYPE html>
<html>
<head>
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Legend</h1>
</header>
<section>
<div id="controls">
<ul id="content"></ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-73.954323, 40.711743],
zoom: 15.7,
});
map.touchZoomRotate.disableRotation();
// Autenticate the client
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Create the source
const source = new carto.source.Dataset('table_311_complaints');
// Add better styles
const viz = new carto.Viz(`
color: ramp(buckets($complaint,['Car','Bus','Building']), [#59ca22,#009fff,#f51ac4])
width: 30
`);
// Create the layer
const layer = new carto.Layer('layer', source, viz);
// Add the layer to the map
layer.addTo(map);
layer.on('loaded', () => {
hideLoader();
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
colorLegend.data.forEach((legend, index) => {
const color = legend.value
? rgbToHex(legend.value)
: 'white'
if (color) {
colorLegendList +=
`<li><span class="${viz.geometryType}-mark" style="background-color:${color}; border: 1px solid black;"></span><span>${legend.key}</span></li>\n`;
}
});
document.getElementById('content').innerHTML = colorLegendList;
});
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
</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>
<head>
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Legend</h1>
</header>
<section>
<div id="controls">
<ul id="content"></ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-73.954323, 40.711743],
zoom: 15.7,
});
map.touchZoomRotate.disableRotation();
// Autenticate the client
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Create the source
const source = new carto.source.Dataset('table_311_complaints');
// Add better styles
const viz = new carto.Viz(`
symbol: ramp(buckets($complaint,['Car','Bus']), [car,bus], cross)
color: ramp(buckets($complaint,['Car','Bus']), [#59ca22,#009fff])
symbolPlacement: align_bottom
width: 30
`);
// Create the layer
const layer = new carto.Layer('layer', source, viz);
// Add the layer to the map
layer.addTo(map);
layer.on('loaded', () => {
hideLoader();
const symbolLegend = layer.viz.symbol.getLegendData({othersLabel: 'Default'});
const colorLegend = layer.viz.color.getLegendData();
let symbolLegendList = '';
symbolLegend.data.forEach((legend, index) => {
const colorHex = rgbToHex(colorLegend.data[index].value);
symbolLegendList +=
`
<li>
<span
class="image-mark"
style="
background-color: ${colorHex};
mask-image:url(${legend.value});
-webkit-mask-image:url(${legend.value})
"></span>
<span>${legend.key}</span>
</li>
`
});
document.getElementById('content').innerHTML = symbolLegendList;
});
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
</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>
<head>
<title>Railroad accidents | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Widgets</h1>
</header>
<p class="description open-sans">Displaying additional information</p>
<br/>
<div id="widgets" class="open-sans">
<div>
<label>Viewport accidents:</label>
<div id="widget-viewport-accidents"></div>
<!-- <label>Total accidents:</label>
<div id="widget-total-accidents"></div> -->
<label>Viewport damage:</label>
<div id="widget-viewport-damage"></div>
<label>Total damage:</label>
<div id="widget-total-damage"></div>
</div>
</div>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 41],
zoom: 3.5,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("railroad_accidents");
const viz = new carto.Viz(`
// @totalAccidents: globalCount()
@viewportAccidents: viewportCount()
@totalDamage: globalSum($total_damage)
@viewportDamage: viewportSum($total_damage)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
});
layer.on('updated', () => {
// Update widgets
document.getElementById('widget-total-damage').innerText = `$ ${viz.variables.totalDamage.value / 1000000} M`;
document.getElementById('widget-viewport-damage').innerText = `$ ${viz.variables.viewportDamage.value / 1000000} M`;
// document.getElementById('widget-total-accidents').innerText = viz.variables.totalAccidents.value;
document.getElementById('widget-viewport-accidents').innerText = viz.variables.viewportAccidents.value;
});
</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
<!DOCTYPE html>
<html>
<head>
<title>Railroad accidents | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
<!-- Airship -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.0-beta.0/airship.css">
<script src="https://libs.cartocdn.com/airship-components/v1.0.0-beta.0/airship.js"></script>
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Damage distribution (logarithmic scale)</h1>
</header>
<as-histogram-widget />
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 41],
zoom: 3.5,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("railroad_accidents");
const viz = new carto.Viz(`
@histogram: viewportHistogram($total_damage, 1, 6)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
document.getElementById('loader').style.opacity = '0';
});
layer.on('updated', drawHistogram);
function drawHistogram() {
var histogramWidget = document.querySelector('as-histogram-widget');
const histogram = layer.viz.variables.histogram.value;
histogramWidget.data = histogram.map(entry => {
return {
start: entry.x[0] / 1e6,
end: entry.x[1] / 1e6,
value: Math.log(entry.y + 1)
}
});
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Railroad accidents | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
<!-- Airship -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.0-beta.0/airship.css">
<script src="https://libs.cartocdn.com/airship-components/v1.0.0-beta.0/airship.js"></script>
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Accident type</h1>
</header>
<as-category-widget disable-interactivity />
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 41],
zoom: 3.5,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("railroad_accidents");
const viz = new carto.Viz(`
@histogram: viewportHistogram($accident_type)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
document.getElementById('loader').style.opacity = '0';
});
layer.on('updated', drawHistogram);
function drawHistogram() {
var histogramWidget = document.querySelector('as-category-widget');
const histogram = layer.viz.variables.histogram.value;
histogramWidget.categories = histogram.map(entry => {
return {
name: entry.x,
value: entry.y
}
});
}
</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>
<head>
<meta charset="utf-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
<style>
#js-zoom {
position: absolute;
bottom: 0;
padding: 0 5px;
background-color: rgba(255, 255, 255, 0.5);
margin: 0;
color: rgba(0, 0, 0, 0.75);
font-size: 16px;
}
</style>
</head>
<body>
<!-- Add map container -->
<div id="map"></div>
<!-- Zoom level indicator -->
<div id="js-zoom"></div>
<script>
// Add basemap and set properties
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-123.098599, 49.240685],
zoom: 11
});
// Add zoom controls
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');
// Zoom level
function updateZoom() {
const zoom = map.getZoom().toFixed(2);
document.getElementById('js-zoom').innerText = `Zoom: ${zoom}`;
}
map.on('load', updateZoom);
map.on('move', updateZoom);
//** CARTO VL functionality begins here **//
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define source
const source = new carto.source.Dataset('vancouver_trees');
// Define Viz object and custom style
const viz = new carto.Viz(`
color: white
strokeColor: green
`);
// Define map layer
const layer = new carto.Layer('layer', source, viz);
// Add map layer
layer.addTo(map, 'watername_ocean');
</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>
<head>
<title>Hover | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Feature hover</h1>
</header>
<section>
<p class="description open-sans">Move the mouse over the polygons</p>
<div id="controls">
<div id="content"></div>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-0.127, 51.507],
zoom: 10,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer and variables for interactivity
const source = new carto.source.Dataset('london_neighbourhoods');
const viz = new carto.Viz(`
@neighbourhood: $neighbourhood
`);
const layer = new carto.Layer('layer', source, viz);
// Define interactivity
const interactivity = new carto.Interactivity(layer);
interactivity.on('featureHover', updateNeighbourhood);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function updateNeighbourhood(event) {
let content = '';
for (let feature of event.features) {
content += `
<div class="container">
<h3 class="h3">${feature.variables.neighbourhood.value}</h3>
<p class="open-sans">Latitude: ${event.coordinates.lat.toFixed(4)}</p>
<p class="open-sans">Longitude: ${event.coordinates.lng.toFixed(4)}</p>
</div>
`;
}
document.getElementById('content').innerHTML = content;
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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>
<head>
<title>Click | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Feature click</h1>
</header>
<section>
<p class="description open-sans">Click on the polygons</p>
<div id="controls">
<div id="content"></div>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-0.127, 51.507],
zoom: 10,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer and variables for interactivity
const source = new carto.source.Dataset('london_neighbourhoods');
const viz = new carto.Viz(`
@neighbourhood: $neighbourhood
`);
const layer = new carto.Layer('layer', source, viz);
// Define interactivity
const interactivity = new carto.Interactivity(layer);
interactivity.on('featureClick', updateNeighbourhood);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function updateNeighbourhood(event) {
let content = '';
for (let feature of event.features) {
content += `
<div class="container">
<h3 class="h3">${feature.variables.neighbourhood.value}</h3>
<p class="open-sans">Latitude: ${event.coordinates.lat.toFixed(4)}</p>
<p class="open-sans">Longitude: ${event.coordinates.lng.toFixed(4)}</p>
</div>
`;
}
document.getElementById('content').innerHTML = content;
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Interact with multiple layers | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Interact with multiple layers</h1>
</header>
<section>
<p class="description open-sans">Detect features from different layers</p>
<div class="separator"></div>
<section class="usage">
<header>USAGE</header>
<p class="open-sans">Click on a city or country</p>
</section>
<div id="controls">
<div id="content"></div>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 43],
zoom: 4,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define first layer style and variables for interactivity
const citiesSource = new carto.source.SQL(`
SELECT *
FROM populated_places
WHERE adm0name IN ('Spain','France','Italy','Switzerland','Portugal')
`);
const citiesViz = new carto.Viz(`
@name: $name
@pop: $pop_max
width: sqrt($pop_max/2000)
`);
const citiesLayer = new carto.Layer('citiesLayer', citiesSource, citiesViz);
// Define second layer style and variables for interactivity
const countriesSource = new carto.source.SQL(`
SELECT *
FROM ne_adm0_europe
WHERE admin IN ('Spain','France','Italy','Switzerland','Portugal')
`);
const countriesViz = new carto.Viz(`
@country: $admin
`);
const countriesLayer = new carto.Layer('countriesLayer', countriesSource, countriesViz);
// Define interactivity
const interactivity = new carto.Interactivity([countriesLayer, citiesLayer]);
interactivity.on('featureClick', updateInfo);
citiesLayer.addTo(map, 'watername_ocean');
countriesLayer.addTo(map, 'citiesLayer');
countriesLayer.on('loaded', hideLoader);
function updateInfo(event) {
let content = '<div class="container">';
for (let feature of event.features) {
if (feature.layerId === 'countriesLayer') {
content += `
<h3 class="h3">${feature.variables.country.value}</h3>
`;
}
if (feature.layerId === 'citiesLayer') {
content += `
<p class="open-sans"><b>${feature.variables.name.value}</b></p>
<p class="open-sans">Population: ${feature.variables.pop.value}</p>
`;
}
}
content += `
<p class="open-sans">Latitude: ${event.coordinates.lat.toFixed(4)}</p>
<p class="open-sans">Longitude: ${event.coordinates.lng.toFixed(4)}</p>
`
content += '</div>';
document.getElementById('content').innerHTML = content;
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Interactive based styling | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Interactive based styling</h1>
</header>
<section>
<p class="description open-sans">Style a feature based on type of interactivity</p>
<div class="separator"></div>
<section class="usage">
<header>USAGE</header>
<p class="open-sans">Hover and click on the points</p>
</section>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 1.5,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('world_population_2015');
const viz = new carto.Viz(`
width: sqrt($pop_2015)/200
color: opacity(BlueViolet, 0.5)
strokeColor: opacity(BlueViolet, 0.8)
`);
const layer = new carto.Layer('layer', source, viz);
// Define interactivity
const interactivity = new carto.Interactivity(layer);
const delay = 50;
let clickedFeatureId = null;
interactivity.on('featureEnter', event => {
event.features.forEach(feature => {
if (feature.id !== clickedFeatureId) {
feature.color.blendTo('opacity(DeepPink, 0.5)', delay)
feature.strokeWidth.blendTo('4', delay);
feature.strokeColor.blendTo('opacity(DeepPink, 0.8)', delay);
}
});
});
interactivity.on('featureLeave', event => {
event.features.forEach(feature => {
if (feature.id !== clickedFeatureId) {
feature.color.reset(delay);
feature.strokeWidth.reset(delay);
feature.strokeColor.reset(delay);
}
});
});
interactivity.on('featureClick', event => {
if (event.features.length) {
const feature = event.features[0];
clickedFeatureId = feature.id;
feature.color.blendTo('opacity(LimeGreen, 0.5)', delay)
feature.strokeWidth.blendTo('7', delay);
feature.strokeColor.blendTo('opacity(LimeGreen, 0.8)', delay);
}
});
interactivity.on('featureClickOut', event => {
if (event.features.length) {
const feature = event.features[0];
clickedFeatureId = '';
feature.color.reset(delay);
feature.strokeWidth.reset(delay);
feature.strokeColor.reset(delay);
}
});
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE html>
<html>
<head>
<title>Add pop-ups | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Add pop-ups</h1>
</header>
<section>
<p class="description open-sans">Create pop-up information windows and interact with your map</p>
<div id="controls">
<ul class="actions">
<li>
<input type="radio" name="style" onclick="setPopupsClick()" id="click" checked>
<label for="click">Pop-ups on click</label>
</li>
<li>
<input type="radio" name="style" onclick="setPopupsHover()" id="hover">
<label for="hover">Pop-ups on hover</label>
</li>
</ul>
</div>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 30],
zoom: 1.5,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define pop-up
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('world_population_2015');
const viz = new carto.Viz(`
@country_name: $country_name
@pop_2015: $pop_2015
width: sqrt($pop_2015)/200
color: opacity(BlueViolet, 0.5)
strokeColor: opacity(BlueViolet, 0.8)
`);
const layer = new carto.Layer('layer', source, viz);
// Define interactivity
const interactivity = new carto.Interactivity(layer);
const delay = 50;
let clickedFeatureId = null;
interactivity.on('featureEnter', event => {
event.features.forEach(feature => {
if (feature.id !== clickedFeatureId) {
feature.color.blendTo('opacity(DeepPink, 0.5)', delay)
feature.strokeWidth.blendTo('4', delay);
feature.strokeColor.blendTo('opacity(DeepPink, 0.8)', delay);
}
});
});
interactivity.on('featureLeave', event => {
event.features.forEach(feature => {
if (feature.id !== clickedFeatureId) {
feature.color.reset(delay);
feature.strokeWidth.reset(delay);
feature.strokeColor.reset(delay);
}
});
});
interactivity.on('featureClick', event => {
if (event.features.length) {
const feature = event.features[0];
clickedFeatureId = feature.id;
feature.color.blendTo('opacity(LimeGreen, 0.5)', delay)
feature.strokeWidth.blendTo('7', delay);
feature.strokeColor.blendTo('opacity(LimeGreen, 0.8)', delay);
}
});
interactivity.on('featureClickOut', event => {
if (event.features.length) {
const feature = event.features[0];
clickedFeatureId = '';
feature.color.reset(delay);
feature.strokeWidth.reset(delay);
feature.strokeColor.reset(delay);
}
});
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
setPopupsClick();
function setPopupsClick() {
interactivity.off('featureHover', updatePopup);
interactivity.on('featureClick', updatePopup);
}
function setPopupsHover() {
interactivity.off('featureClick', updatePopup);
interactivity.on('featureHover', updatePopup);
}
function updatePopup(event) {
if (event.features.length > 0) {
const vars = event.features[0].variables;
popup.setHTML(`
<div>
<h3 class ="h3">${vars.country_name.value}</h3>
<p class="description open-sans">Population: ${vars.pop_2015.value}</h3>
</div>
`);
popup.setLngLat([event.coordinates.lng, event.coordinates.lat]);
if (!popup.isOpen()) {
popup.addTo(map);
}
} else {
popup.remove();
}
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
<!DOCTYPE html>
<html>
<head>
<title>Animation | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,200,400,500" rel="stylesheet">
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
<style type="text/css">
aside.toolbox {
right: 96px;
}
.box {
width: 320px;
background: #f2f2f2;
}
section {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
hr {
margin: 15px auto;
}
input[type=range] {
-webkit-appearance: none;
border: 1px solid white;
background: transparent;
border: none;
cursor: pointer;
flex: 1;
padding: auto 10px;
margin: auto 5px;
}
input[type=range]::-webkit-slider-runnable-track {
height: 3px;
background: #1785FB;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #1785FB;
margin-top: -4px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
height: 3px;
background: #1785FB;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #1785FB;
}
input[type=range].white-thumb::-moz-range-thumb {
border-radius: 50%;
border: 2px solid #1785FB;
background: white;
height: 12px;
width: 12px;
}
input[type=range].white-thumb::-webkit-slider-thumb {
border-radius: 50%;
border: 3px solid #1785FB;
background: white;
height: 15px;
width: 15px;
margin-top: -6px;
}
input[type=range].white-thumb::-ms-thumb {
border-radius: 50%;
border: 2px solid #1785FB;
background: white;
height: 12px;
width: 12px;
}
input[type=range]:-moz-focusring {
outline: 1px solid white;
outline-offset: -1px;
}
input[type=range]::-ms-track {
height: 3px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #1785FB;
}
input[type="range"]::-moz-range-progress {
background: #1785FB;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
}
input[type="range"]::-moz-range-track {
background: #ccc;
}
input[type=range]::-ms-thumb {
border: none;
height: 10px;
width: 10px;
border-radius: 50%;
background: #1785FB;
}
input[type="button"] {
width: 36px;
height: 36px;
border-radius: 4px;
border: 0;
box-shadow: none;
color: #fff;
cursor: pointer;
display: inline-flex;
font: 500 12px/20px 'Roboto';
margin: 0;
margin-right: 10px;
}
#map {
flex: 1;
}
#js-duration-span {
background: white;
border: 1px solid #ddd;
width: 32px;
height: 32px;
;
display: flex;
align-items: center;
justify-content: center;
}
#js-play-button {
background: url('./play.svg') no-repeat;
background-color: #1785FB;
background-position: center;
}
#js-pause-button {
background: url('./pause.svg') no-repeat;
background-color: #1785FB;
background-position: center;
}
</style>
</head>
<body>
<!-- Map goes here -->
<div id="map"></div>
<!-- Animation control elements -->
<aside class="toolbox">
<div class="box">
<header>
<h1>Animation controls</h1>
</header>
<section>
<p class="description open-sans">Control animations by issuing "play", "pause" and "set" commands</p>
</section>
<section style="margin-top: 15px;">
<input type="button" id="js-play-button">
<input type="button" id="js-pause-button">
<input type="range" id="js-time-range" min="0" max="1" step="0.01">
</section>
<hr>
<section>
<span style="margin-right: 5px" class="open-sans">Duration (seconds)</span>
<input class="white-thumb" type="range" id="js-duration-range" min="1" max="60" step="1">
<span style="margin-left: 5px" class="open-sans" id="js-duration-span">10</span>
</section>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
// Add basemap and set properties
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-73.96, 40.75],
zoom: 11,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
//** CARTO VL functionality begins here **//
// Autenticate the client
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define source
const source = new carto.source.Dataset('taxi_50k');
// Define and style Viz object
const viz = new carto.Viz(`
@duration: 30
@animation: animation(linear($tpep_pickup_datetime, time('2016-05-01T00:00:07Z'), time('2016-05-06T10:40:59Z')), @duration, fade(0.1, 0.5))
filter: @animation
`);
// Define map layer
const layer = new carto.Layer('layer', source, viz);
// Add map layer
layer.addTo(map, 'watername_ocean');
// Get HTML elements
const $playbutton = document.getElementById('js-play-button');
const $pausebutton = document.getElementById('js-pause-button');
const $durationRange = document.getElementById('js-duration-range');
const $timeRange = document.getElementById('js-time-range');
const $spanDuration = document.getElementById('js-duration-span');
// Save initial time range value
let last = $timeRange.value;
// Listen to interaction events
$durationRange.addEventListener('change', () => {
const duration = parseInt($durationRange.value, 10);
// Update animation duration
viz.variables.duration = $spanDuration.innerHTML = duration;
});
$playbutton.addEventListener('click', () => {
// Play the animation
viz.variables.animation.play()
});
$pausebutton.addEventListener('click', () => {
// Pause the animation
viz.variables.animation.pause();
});
$timeRange.addEventListener('change', () => {
// Update animation progress
viz.variables.animation.setProgressPct($timeRange.value);
last = $timeRange.value;
});
// Listen to layer events
layer.on('updated', () => {
if ($timeRange.value == last) {
$timeRange.value = viz.variables.animation.getProgressPct();
last = $timeRange.value;
}
});
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>External GeoJSON layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>External GeoJSON layer</h1>
</header>
<section>
<p class="description open-sans">Add one external GeoJSON layer to your map</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-77.04, 38.89],
zoom: 9,
scrollZoom: true,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
fetch('https://libs.cartocdn.com/carto-vl/assets/stations.geojson')
.then(response => response.json())
.then(function(data){
// Define layer
const source = new carto.source.GeoJSON(data);
const viz = new carto.Viz();
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
});
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>US Population by County | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>US Population by county</h1>
</header>
<section>
<p class="description open-sans">This map uses viewportMax to draw symbol sizes proportional to population values in the current viewport and also applies the same to the color and outline width. When you zoom in, you will see the map update all of its symbology with the values in the current viewport</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-99.6404893, 38.5480718],
zoom: 4,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('county_points_with_population');
const viz = new carto.Viz(`
width: 75*sqrt($estimate_total)/sqrt(viewportMax($estimate_total))
color: opacity(ramp(linear($estimate_total,viewportMax($estimate_total),viewportMin($estimate_total)),purpor),0.7)
strokeWidth: 0.05*sqrt($estimate_total/sqrt(viewportMax($estimate_total)))
strokeColor: opacity(ramp(linear($estimate_total,viewportMax($estimate_total),viewportMin($estimate_total)),purpor),0.8)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Taxi pickups | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Taxi pickups</h1>
</header>
<section>
<p class="description open-sans">Multi-scale animation with color interpolation through time of day and sized by trip distance</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-74.0032059, 40.7482066],
zoom: 12,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('taxi_50k');
const viz = new carto.Viz(`
width: ($fare_amount/15000)*scaled(1)
filter: animation($tpep_pickup_datetime,10,fade(0.2,0.2))
color: rgba(255,255,255,0.2)
strokeColor: ramp(linear($tpep_pickup_datetime,time('2016-05-01T00:08:39Z'),time('2016-05-06T10:29:11Z')),[#CF1C90,#F8CA00,#9BBD4D,#07A5AB,#B100EB])
strokeWidth: ($trip_distance/30000)*scaled(1)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Ocean bathymetry | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Ocean bathymetry</h1>
</header>
<section>
<p class="description open-sans">Since the ocean is forever active, and moving, we wanted to demonstrate how we could animate the points to give that sense of movement</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-20, 20],
zoom: 2,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('bathy_points');
const viz = new carto.Viz(`
@speed : 3*now()+$dn
width: 5
color: ramp(linear($dn,0,255),teal)
filter: sin(@speed)*0.5+0.5
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Hurricane Harvey | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v0.10.0/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.10.0/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Hurricane Harvey</h1>
</header>
<section>
<p class="description open-sans">Rainfall totals from Hurricane Harvey aggregated to counties. The animation is based on total rainfall. Counties with more rain draw first to lower rainfall totals. The opacity is based off population density (total pop / area). The brighter polygons have higher populations.</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 30],
zoom: 7,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('table_30');
const viz = new carto.Viz(`
color: opacity(ramp(linear($sum_qpf,1,120),temps),($e_totpop/$area_sqmi)/500)
filter: animation(linear($sum_qpf,144.5, 1.5),5,fade(0,100))+0.1
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>