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
68
69
70
<!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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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('ne_10m_populated_places_simple');
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
75
76
77
<!DOCTYPE html>
<html>
<head>
<title>Basic style | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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('ne_10m_populated_places_simple');
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
83
84
<!DOCTYPE html>
<html>
<head>
<title>Query 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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 ne_10m_populated_places_simple
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
83
84
85
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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 ne_10m_populated_places_simple
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
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>Select 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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 ne_10m_populated_places_simple
`);
const europeanCitiesSource = new carto.source.SQL(`
SELECT *
FROM ne_10m_populated_places_simple
WHERE adm0name IN (SELECT admin FROM ne_adm0_europe)
`);
const spanishCitiesSource = new carto.source.SQL(`
SELECT *
FROM ne_10m_populated_places_simple
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
136
137
<!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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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('ne_10m_populated_places_simple');
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
93
94
95
<!DOCTYPE html>
<html>
<head>
<title>Color schemes | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
108
109
110
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
133
134
135
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
77
78
79
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
72
73
74
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
75
76
77
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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('ne_10m_populated_places_simple');
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
74
75
76
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
75
76
77
<!DOCTYPE html>
<html>
<head>
<title>Single Image | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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('ne_10m_populated_places_simple');
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
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<title>Multiple Images | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src='https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js'></script>
<!-- Include Mapbox GL CSS -->
<link href='https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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('ne_10m_populated_places_simple');
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
73
74
75
<!DOCTYPE html>
<html>
<head>
<title>External Image | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
126
127
128
<!DOCTYPE html>
<html>
<head>
<title>Draw order | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
75
76
77
<!DOCTYPE html>
<html>
<head>
<title>Scaled width | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
<!DOCTYPE html>
<html>
<head>
<title>Hover | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
92
93
94
<!DOCTYPE html>
<html>
<head>
<title>Click | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
122
123
124
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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 ne_10m_populated_places_simple
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
120
121
122
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
161
162
163
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html>
<head>
<title>Animation | CARTO VL</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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/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.9.1/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] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
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;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
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-btn {
background: url('./play.svg') no-repeat;
background-color: #1785FB;
background-position: center;
}
#js-pause-btn {
background: url('./pause.svg') no-repeat;
background-color: #1785FB;
background-position: center;
}
</style>
</head>
<body>
<div id="map"></div>
<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-btn">
<input type="button" id="js-pause-btn">
<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>
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(`
@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
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
// Elements
const $playBtn = document.getElementById('js-play-btn');
// const $stopBtn = document.getElementById('js-stop-btn');
const $pauseBtn = document.getElementById('js-pause-btn');
const $durationRange = document.getElementById('js-duration-range');
const $timeRange = document.getElementById('js-time-range');
const $spanDuration = document.getElementById('js-duration-span');
// Callbacks
$durationRange.onchange = () => {
const duration = parseInt($durationRange.value, 10);
viz.variables.duration = $spanDuration.innerHTML = duration;
}
$timeRange.onchange = () => {
viz.variables.animation.setProgressPct($timeRange.value);
}
$playBtn.onclick = () => {
viz.variables.animation.play()
$playBtn.style.display = 'none';
$pauseBtn.style.display = 'initial';
};
$pauseBtn.onclick = () => {
viz.variables.animation.pause();
$pauseBtn.style.display = 'none';
$playBtn.style.display = 'initial';
};
$playBtn.style.display = 'none';
let last = $timeRange.value;
$timeRange.onchange = () => {
viz.variables.animation.setProgressPct($timeRange.value);
last = $timeRange.value;
}
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
68
69
70
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
75
76
77
<!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">
<!-- Include CARTO VL JS -->
<script src="https://libs.cartocdn.com/carto-vl/v0.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
76
77
78
<!DOCTYPE html>
<html>
<head>
<title>Taxi pickups | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
77
78
79
<!DOCTYPE html>
<html>
<head>
<title>Ocean bathymetry | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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
74
75
76
<!DOCTYPE html>
<html>
<head>
<title>Hurricane Harvey | 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.9.1/carto-vl.min.js"></script>
<!-- Include Mapbox GL JS -->
<script src="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.js"></script>
<!-- Include Mapbox GL CSS -->
<link href="https://libs.cartocdn.com/mapbox-gl/v0.48.0-carto1/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v0.9.1/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>