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">
<script src="https://libs.cartocdn.com/carto-vl/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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: 1,
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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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('populated_places');
const viz = new carto.Viz(`
width: 5
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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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 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
<!DOCTYPE html>
<html>
<head>
<title>Check for browser support | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Check for browser support</h1>
</header>
<section>
<p class="description open-sans">Check if the browser supports CARTO VL and get the reasons if it doesn't.</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>
if (!carto.isBrowserSupported()) {
const reasons = carto.unsupportedBrowserReasons();
document.getElementById('loader').innerHTML = `
<div class="open-sans text-white">
<h3>Oops! Something went wrong.</h3>
<p>Your browser doesn't support CARTO VL:</p>
<ul>
${reasons.map(r => `<li>${r.message}.</li>`).join('')}
</ul>
</div>
`;
} else {
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 0],
zoom: 1,
scrollZoom: false,
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
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
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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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('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
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>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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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">Supported color schemes</p>
<div id="controls">
<ul>
<li>
<input type="radio" name="style" onclick="setCartoColor()" id="Cartocolor" checked>
<label for="Cartocolor"><a href="https://carto.com/carto-colors/" title="CARTOColors" target="_blank">CARTOColors</a></label>
</li>
<li>
<input type="radio" name="style" onclick="setCartoColorReverse()" id="CartocolorReverse">
<label for="CartocolorReverse">CARTOColors (reversed)</label>
</li>
<li>
<input type="radio" name="style" onclick="setColorBrewer()" id="Colorbrewer">
<label for="Colorbrewer"><a href="http://colorbrewer2.org/#type=sequential&scheme=YlGn&n=5" title="Colorbrewer" target="_blank">ColorBrewer</a></label>
</li>
<li>
<input type="radio" name="style" onclick="setColorBrewerReverse()" id="ColorbrewerReverse">
<label for="ColorbrewerReverse">ColorBrewer (reversed)</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: 3.5,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Color with CARTOColor scheme
const CartoColorViz = new carto.Viz(`
color: ramp(globalQuantiles($pct_higher_ed,5),Emrld)
strokeColor: rgba(0,0,0,0.4)
strokeWidth: 1
`);
// Reverse CARTOColor scheme
const CartoColorReverseViz = new carto.Viz(`
color: ramp(globalQuantiles($pct_higher_ed,5),reverse(Emrld))
strokeColor: rgba(0,0,0,0.4)
strokeWidth: 1
`);
// Color with ColorBrewer scheme
const ColorBrewerViz = new carto.Viz(`
color: ramp(globalQuantiles($pct_higher_ed,5),cb_YlGn)
strokeColor: rgba(0,0,0,0.4)
strokeWidth: 1
`);
// Color with ColorBrewer scheme
const ColorBrewerReverseViz = new carto.Viz(`
color: ramp(globalQuantiles($pct_higher_ed,5),reverse(cb_YlGn))
strokeColor: rgba(0,0,0,0.4)
strokeWidth: 1
`);
// Color with custom colors
const CustomColorsViz = new carto.Viz(`
color: ramp(globalQuantiles($pct_higher_ed, 5),[#234a67, #fad780])
strokeColor: rgba(0,0,0,0.4)
strokeWidth: 1
`);
const source = new carto.source.Dataset('higher_edu_by_county');
const layer = new carto.Layer('layer', source, CartoColorViz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function setCartoColor() {
layer.blendToViz(CartoColorViz);
}
function setCartoColorReverse() {
layer.blendToViz(CartoColorReverseViz);
}
function setColorBrewer() {
layer.blendToViz(ColorBrewerViz);
}
function setColorBrewerReverse() {
layer.blendToViz(ColorBrewerReverseViz);
}
function setCustomColors() {
layer.blendToViz(CustomColorsViz);
}
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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
136
137
138
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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="setRampInterpolate()" id="auto" checked>
<label for="auto">Interpolate</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampQuantiles()" id="quantiles">
<label for="quantiles">Quantiles</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampEqualIntervals()" id="equalintervals">
<label for="equalintervals">Equal Interval</label>
</li>
<li>
<input type="radio" name="style" onclick="setRampManual()" id="manual">
<label for="manual">Manual Classification</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.voyager,
center: [-100.3710, 38.4793],
zoom: 3.5,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Style numeric attributes
// Interpolate
const rampInterpolateViz = new carto.Viz(`
color: ramp(linear($pct_higher_ed,30,80),pinkyl)
strokeColor: rgba(0,0,0,0.2)
strokeWidth: 1
`);
// Quantiles
const rampQuantilesViz = new carto.Viz(`
color: ramp(globalQuantiles($pct_higher_ed, 5), pinkyl)
strokeColor: rgba(0,0,0,0.2)
strokeWidth: 1
`);
// Equal Intervals
const rampEqualIntervalsViz = new carto.Viz(`
color: ramp(globalEqIntervals($pct_higher_ed, 5), pinkyl)
strokeColor: rgba(0,0,0,0.2)
strokeWidth: 1
`);
// Manual Classification
const rampManualViz = new carto.Viz(`
color: ramp(buckets($pct_higher_ed,[30,40,50,60,70]),pinkyl)
strokeColor: rgba(0,0,0,0.2)
strokeWidth: 1
`);
// Mean-Standard Deviation
const rampStandardDevViz = new carto.Viz(`
color: ramp(globalStandardDev($pct_higher_ed, 5), tealrose)
strokeColor: rgba(0,0,0,0.2)
strokeWidth: 1
`);
const source = new carto.source.Dataset('higher_edu_by_county');
const layer = new carto.Layer('layer', source, rampInterpolateViz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function setRampInterpolate() {
layer.blendToViz(rampInterpolateViz);
}
function setRampQuantiles() {
layer.blendToViz(rampQuantilesViz);
}
function setRampEqualIntervals() {
layer.blendToViz(rampEqualIntervalsViz);
}
function setRampStandardDev() {
layer.blendToViz(rampStandardDevViz);
}
function setRampManual() {
layer.blendToViz(rampManualViz);
}
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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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('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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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('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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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('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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
95
96
97
98
99
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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,
dragPan: true,
dragRotate: true
});
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');
// Log some basic map events
const events = ['mousedown', 'click', 'mousemove', 'mouseup', 'dragstart', 'dragend', 'movestart', 'moveend'];
events.forEach((eventName) => {
map.on(eventName, () => {
console.log(`map:${eventName}`);
});
});
// 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.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/v1.1.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] {
-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>
<br />
<section>
<span id="js-current-time" class="open-sans"></span>
</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();
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');
const $currentTime = document.getElementById('js-current-time');
// 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;
}
$currentTime.innerText = viz.variables.animation.getProgressValue().toISOString();
});
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
<!DOCTYPE html>
<html>
<head>
<title>Legend categories | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Rail Accidents by Weather</h1>
</header>
<!-- Add legend data -->
<section>
<div id="controls">
<ul id="content"></ul>
</div>
</section>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 41],
zoom: 3
});
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("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);
//** ADD LEGEND **//
// A function to convert map colors to HEX values for legend
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
// When layer loads, trigger legend event
layer.on('loaded', () => {
// Request data for legend from the layer viz
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
// Create list elements for legend
colorLegend.data.forEach((legend, index) => {
const color = rgbToHex(legend.value);
// Style for legend items based on geometry type
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`;
});
// Place list items in the content section of the title/legend box
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
<!DOCTYPE html>
<html>
<head>
<title>Line legend | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>San Francisco Streets</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: [-122.424335, 37.771521],
zoom: 12
});
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('sf_stclines');
const viz = new carto.Viz(`
color: ramp(top($st_type, 5), bold)
width: 2
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
const colorLegend = layer.viz.color.getLegendData({
othersLabel: 'Default'
});
let colorLegendList = '';
colorLegend.data.forEach((legend) => {
const colorHex = rgbToHex(legend.value);
const type = legend.key;
const entry = type !== 'CARTO_VL_OTHERS' ? type : 'Others';
colorLegendList +=
`<li><span class="${viz.geometryType}-mark" style="border-color:${colorHex};"></span> <span>${entry}</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
105
<!DOCTYPE html>
<html>
<head>
<title>Image legend | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/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
});
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('table_311_complaints');
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
`);
const layer = new carto.Layer('layer', source, viz);
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html>
<head>
<title>Legend classification | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Percent Master's Degree</h1>
</header>
<section>
<div id="controls">
<p id="content-title"></p>
<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: [-122.419038, 37.752109],
zoom: 12
});
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('demographics_sf');
const viz = new carto.Viz(`
color: ramp(globalquantiles($masters_percent,5),purp)
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
const colorLegend = layer.viz.color.getLegendData({
othersLabel: 'Default',
samples: 20
});
let colorLegendList = '';
colorLegend.data.forEach((legend) => {
const colorHex = rgbToHex(legend.value);
const keyMin = legend.key[0].toFixed(2);
const keyMax = legend.key[1].toFixed(2);
let bucket = `${keyMin} - ${keyMax}`;
if (keyMin==='-Infinity'){
bucket = `<${keyMax}`;
}else if (keyMax==='Infinity'){
bucket = `>${keyMin}`;
}
colorLegendList +=
`<li><span class="polygon-mark" style="background-color:${colorHex};"></span> <span>${bucket}</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
<!DOCTYPE html>
<html>
<head>
<title>Legend unclassed | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/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
});
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(`
color: ramp(linear($latitude), sunset)
width: 5
strokeWidth: 0
`);
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
const entries = colorLegend.data;
entries.reverse();
entries.forEach((legend, index) => {
const colorHex = rgbToHex(legend.value);
const entry = legend.key.toFixed(2);
colorLegendList +=
`<li><span class="point-mark" style="background-color:${colorHex};"></span> <span>${entry}</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
<!DOCTYPE html>
<html>
<head>
<title>Transparent Legend | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box" id="dark">
<header>
<h1 id="light">Rail Accidents by Weather</h1>
</header>
<!-- Add legend data -->
<section id="light">
<div id="controls">
<ul id="content"></ul>
</div>
</section>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 41],
zoom: 3
});
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("railroad_accidents");
const viz = new carto.Viz(`
@myRamp: ramp($weather,[darkorange,darkviolet,darkturquoise])
@myOpacity: 0.5
width: 5
color: opacity(@myRamp, @myOpacity)
strokeWidth: 1
strokeColor: black
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map);
//** ADD LEGEND **//
// When layer loads, trigger legend event
layer.on('loaded', () => {
// Request data for legend from the layer viz variables 'myRamp' and 'myOpacity'
const colorLegend = layer.viz.variables.myRamp.getLegendData();
const opacity = layer.viz.variables.myOpacity.value;
let colorLegendList = '';
// Create list elements for legend
colorLegend.data.forEach((legend, index) => {
const color = legend.value;
// Add the predefined opacity to the ramp color components
const rgba = `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity})`;
// Style for legend items based on geometry type
colorLegendList +=
`<li><span class="point-mark" style="background-color:${rgba}; border: 1px solid black;"></span><span>${legend.key}</span></li>\n`;
});
// Place list items in the content section of the title/legend box
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
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>Category Chart | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
<!-- Include Chart JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
<div id="map"></div>
<aside class="toolbox chart-toolbox">
<div class="box chart-box">
<header>
<h1>Tree species distribution</h1>
</header>
<section>
<p class="description open-sans">Hover over each bar to see species name and count</p>
</section>
<section>
<div id="controls">
<canvas id="histogram" width="500" height="300"></canvas>
</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: [-122.424818, 37.777323],
zoom: 16
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const ctx = document.getElementById('histogram').getContext('2d');
// Define the source
const source = new carto.source.Dataset('trees_sf');
// Define the visualization
const viz = new carto.Viz(`
@color: ramp($common_species, bold)
@histogram: viewportHistogram($common_species)
color: @color
width: ramp(zoomrange([8,16]),[1,8])
strokeWidth: ramp(zoomrange([8,16]),[0,2])
`);
// Draw chart using Chart.js library (https://www.chartjs.org/)
const chartOptionsDefault = {
animation: {
duration: 0
},
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
suggestedMin: 1,
beginAtZero: true,
display: false
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false
},
barPercentage: 1.0,
categoryPercentage: 1.0
}]
}
};
const chart = new Chart(ctx, {
type: 'bar',
options: chartOptionsDefault
});
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
drawHistogramLegend();
});
layer.on('updated', drawHistogramLegend);
function drawHistogramLegend() {
// Get histogram variable
const histogram = layer.viz.variables.histogram;
// Get color ramp
const colorRamp = layer.viz.color;
// Use getLegendData to get color values from the ramp
const legendData = colorRamp.getLegendData().data;
// Use getJoinedValues to get sorted colors by frequency
const histogramData = histogram.getJoinedValues(legendData);
// Chart.js set up
const data = histogramData.map(elem => elem.frequency);
const labels = histogramData.map(elem => elem.key);
const backgroundColor = histogramData.map(elem => computeColor(elem.value));
chart.data = {
labels,
datasets: [{
data,
backgroundColor
}]
};
chart.update();
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
function computeColor(color) {
return `rgba(${color.r},${color.g},${color.b},${color.a})`;
}
</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
<!DOCTYPE html>
<html>
<head>
<title>Numeric Chart | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
<!-- Include Chart JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</head>
<body>
<div id="map"></div>
<aside class="toolbox chart-toolbox chart-toolbox-large">
<div class="box chart-box">
<header>
<h1>Transactions by hour</h1>
</header>
<section>
<div id="controls">
<canvas id="histogram" width="600" height="300"></canvas>
</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.2, 41.4],
zoom: 12
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const ctx = document.getElementById('histogram').getContext('2d');
// Define the source
const source = new carto.source.Dataset('spend_data');
// Define the visualization
const viz = new carto.Viz(`
@color: ramp($hour, sunset)
@histogram: viewportHistogram($hour, 12)
color: @color
width: 5
strokeWidth: 0
`);
// Draw chart using Chart.js library (https://www.chartjs.org/)
const chartOptionsDefault = {
animation: {
duration: 0
},
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
display: false
}
}],
xAxes: [{
gridLines: {
drawBorder: false,
display: false
},
ticks: {
callback: function (tick, index, ticks) {
if (!Number.isNaN(tick[0])) {
return `${tick[0]}-${tick[1]}h`;
}
},
autoSkip: false,
maxRotation: 0,
minRotation: 0
},
barPercentage: 0.95,
categoryPercentage: 1.0
}]
}
};
const chart = new Chart(ctx, {
type: 'bar',
options: chartOptionsDefault
});
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', () => {
hideLoader();
drawHistogramLegend();
});
layer.on('updated', drawHistogramLegend);
function drawHistogramLegend() {
// Get the color ramp
const colorRamp = layer.viz.color;
// Get the viewport histogram
const histogram = layer.viz.variables.histogram.value.map(roundedValue);
// Get labels (x)
const labels = histogram.map(value => value.x);
// Get data (y)
const data = histogram.map(value => value.y);
// Get chart bars colors
const colors = colorRamp
.getLegendData()
.data
.map(legend => computeColor(legend.value));
chart.data = {
labels,
datasets: [{
data,
backgroundColor: '#86d7ff'
}]
}
chart.update();
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
function computeColor(color) {
return `rgba(${color.r},${color.g},${color.b},${color.a})`;
}
function roundedValue(value) {
const x = [Math.round(value.x[0]), Math.round(value.x[1])];
const y = value.y;
return {
x,
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
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
<title>Viewport summary | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Railroad accidents</h1>
</header>
<p class="description open-sans">Viewport summaries</p>
<br />
<div id="widgets" class="open-sans">
<div>
<label>Viewport accidents:</label>
<div id="widget-viewport-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,
});
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("railroad_accidents");
const viz = new carto.Viz(`
@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-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
84
85
86
<!DOCTYPE html>
<html>
<head>
<title>Viewport category widget | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
<!-- Include Airship -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.3/airship.css">
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v1.0.3/icons.css">
<script src="https://libs.cartocdn.com/airship-components/v1.0.3/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,
});
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("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
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<title>Viewport histogram widget | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
<!-- Include Airship -->
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.3/airship.css">
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v1.0.3/icons.css">
<script src="https://libs.cartocdn.com/airship-components/v1.0.3/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,
});
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("railroad_accidents");
const viz = new carto.Viz(`
@histogram: viewportHistogram($total_damage, 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.disableInteractivity = true;
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
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
<!DOCTYPE html>
<html>
<head>
<title>Weighted histograms | 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/v1.1.1/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-style/v1.0.3/airship.css">
<link rel="stylesheet" href="https://libs.cartocdn.com/airship-icons/v1.0.3/icons.css">
<script src="https://libs.cartocdn.com/airship-components/v1.0.3/airship.js"></script>
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Weighted Histogram as a Table</h1>
<p>Airbnb, Madrid 2018</p>
</header>
<br />
<table class="as-table as-table--stripped">
<thead>
<tr>
<th>Type</th>
<th>Count</th>
<th>Sum ($/day)</th>
<th>Avg ($/day)</th>
</tr>
</thead>
<tbody id="js-table-body">
<!-- Example
<tr>
<td>Entire home/apt</td>
<td>10175</td>
<td>960312 $</td>
<td>94.37 $</td>
</tr>
-->
</tbody>
</table>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-3.70819, 40.42119],
zoom: 12,
dragRotate: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('airbnb_madrid_listings_2018');
const viz = new carto.Viz(`
@histogram: viewportHistogram($room_type, 3)
@histogramSum: viewportHistogram($room_type, 3, $price_dollars)
color: red
width: 4
strokeWidth: 0.5
`);
const layer = new carto.Layer('layer', source, viz);
layer.on('updated', () => {
const histogram = viz.variables.histogram.value;
const histogramSum = viz.variables.histogramSum.value;
let categories = histogram.reduce((categories, item) => {
categories[item.x] = {
name: item.x,
count: item.y
};
return categories;
}, {});
categories = histogramSum.reduce((categories, item) => {
categories[item.x].sum = item.y;
categories[item.x].avg = item.y / categories[item.x].count;
return categories;
}, categories);
updateTable(categories);
});
layer.addTo(map, 'watername_ocean');
function updateTable(categories) {
// console.table(categories);
const tableBody = document.getElementById('js-table-body');
while (tableBody.hasChildNodes()) {
tableBody.removeChild(tableBody.lastChild);
}
for (var key in categories) {
var category = categories[key];
let newRow = tableBody.insertRow(tableBody.length);
let type = newRow.insertCell(0);
type.innerText = category.name;
let count = newRow.insertCell(1);
count.innerText = category.count;
let sum = newRow.insertCell(2);
sum.innerText = category.sum;
let avg = newRow.insertCell(3);
avg.innerText = category.avg.toFixed(2);
}
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<title>Point labels | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/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: [-104.994105, 39.745939],
zoom: 14
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
// Point layer
const source = new carto.source.Dataset('points_of_interest');
const viz = new carto.Viz(`
color: fuchsia
width: 6
strokeColor: white
strokeWidth: 2
filter: $major == "YES"
@v_features: viewportFeatures($poi_name)
`);
const layer = new carto.Layer('points', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(f => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": f.getRenderedCentroid()
},
"properties": {
"label_field": `${f.properties['poi_name']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
"text-size": 10,
"text-offset": [0, 0.65],
"text-anchor": "top",
"text-max-width": 8,
"text-justify": "center"
},
"paint": {
"text-color": "white",
"text-halo-color": "fuchsia",
"text-halo-width": 0.5,
"text-halo-blur": 0.5
}
});
});
layer.addTo(map);
</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
<!DOCTYPE html>
<html>
<head>
<title>Point labels conditional 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/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: [-105.005366, 39.749277],
zoom: 14
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
// Point layer
const source = new carto.source.Dataset('points_of_interest');
const viz = new carto.Viz(`
color: ramp(buckets($poi_name, ['Union Station', 'Invesco Field at Mile High Stadium', 'Pepsi Center', 'Coors Field']), [#0B9F95, #D36DFB, #ff9674, #F75869],white)
width: 6
strokeWidth: 0
filter: $major == "YES"
@v_features: viewportFeatures($poi_name)
`);
const layer = new carto.Layer('points', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(f => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": f.getRenderedCentroid()
},
"properties": {
"label_field": `${f.properties['poi_name']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels add stops to paint properties for conditional label styles
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
"text-size": 10,
"text-offset": [0, 0.65],
"text-anchor": "top",
"text-max-width": 8,
"text-justify": "center",
"text-letter-spacing": 0.1
},
"paint": {
"text-color": {
"property": "label_field",
"type": "categorical",
"stops": [
["Union Station", "#0B9F95"],
["Invesco Field at Mile High Stadium", "#D36DFB"],
["Pepsi Center", "#ff9674"],
["Coors Field", "#F75869"]
]
},
"text-halo-color": "#888",
"text-halo-width": 1.2,
"text-halo-blur": 1
}
});
});
layer.addTo(map);
</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
<!DOCTYPE html>
<html>
<head>
<title>Point labels text size by zoom | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/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: [-104.994105, 39.745939],
zoom: 13
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
// Point layer
const source = new carto.source.Dataset('points_of_interest');
const viz = new carto.Viz(`
color: fuchsia
width: 6
strokeColor: white
strokeWidth: 2
filter: $major == "YES"
@v_features: viewportFeatures($poi_name)
`);
const layer = new carto.Layer('points', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(f => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": f.getRenderedCentroid()
},
"properties": {
"label_field": `${f.properties['poi_name']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels add stops for text size through zoom
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-size": {
"stops": [
[13, 8],
[14, 12],
[16, 16],
[18, 24]
]
},
"text-field": "{label_field}",
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.65],
"text-anchor": "top",
"text-max-width": 8,
"text-justify": "center"
},
"paint": {
"text-color": "white",
"text-halo-color": "fuchsia",
"text-halo-width": 0.5,
"text-halo-blur": 0.5
}
});
});
layer.addTo(map);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
<title>Labels & useLines | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-122.406855, 37.744263],
zoom: 11
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
user: 'cartovl',
apiKey: 'default_public'
});
// Polygon layer
const source = new carto.source.Dataset('sf_neighborhoods');
const viz = new carto.Viz(`
color: ramp($name,vivid)
strokeWidth: 1
strokeColor: black
@v_features: viewportFeatures($name)
`);
const layer = new carto.Layer('polygons', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(f => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": f.getRenderedCentroid()
},
"properties": {
"label_field": `${f.properties['name']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-size": 10,
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
"text-letter-spacing": 0.1,
"text-max-width": 7,
"text-transform": "uppercase"
},
"paint": {
"text-color": "#333",
"text-halo-color": "#fff",
"text-halo-width": 1,
"text-halo-blur": 0.5
},
});
});
layer.addTo(map);
</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>Basemap labels on top | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Labels on top</h1>
</header>
<section>
<p class="description open-sans">Basemap labels on top of 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, 0],
zoom: 2,
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('countries_110m_admin_0');
const viz = new carto.Viz(`
@country: ramp($mapcolor7,pastel)
color: opacity(@country,0.8)
strokeColor: @country
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
// Add layer below first basemap labeling layer
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>Basemap labels under | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Labels under</h1>
</header>
<section>
<p class="description open-sans">Basemap labels under 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, 0],
zoom: 2,
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('countries_110m_admin_0');
const viz = new carto.Viz(`
@country: ramp($mapcolor7,pastel)
color: opacity(@country,0.8)
strokeColor: @country
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
// Add layer on top of basemap
layer.addTo(map);
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
<!DOCTYPE html>
<html>
<head>
<title>Color map background | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Color background</h1>
</header>
<section>
<p class="description open-sans">Set custom color for map background</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>
// Set paint properties for map's background layer
const map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: { 'background-color': 'white' }
}
]
},
center: [0, 0],
zoom: 2,
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('countries_110m_admin_0');
const viz = new carto.Viz(`
@country: ramp($mapcolor7,pastel)
color: opacity(@country,0.8)
strokeColor: @country
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
// Add layer to map
layer.addTo(map);
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
<!DOCTYPE html>
<html>
<head>
<title>Project 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Project layer</h1>
</header>
<section>
<p class="description open-sans">World Robinson projection with SQL 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>
// Set paint properties for map's background layer
const map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: { 'background-color': 'white' }
}
]
},
center: [0, 0],
zoom: 1,
scrollZoom: false,
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
//Add SQL source layer with projection information
//For more information visit https://carto.com/help/working-with-data/changing-map-projections/
const source = new carto.source.SQL(`
SELECT
cartodb_id,
the_geom,
ST_Transform(the_geom_webmercator, 54030)
AS
the_geom_webmercator,
mapcolor7
FROM
countries_110m_admin_0
`);
const viz = new carto.Viz(`
@country: ramp($mapcolor7,pastel)
color: opacity(@country,0.8)
strokeColor: @country
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
// Add layer to map
layer.addTo(map);
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>Set pitch and bearing | 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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Pitch and bearing</h1>
</header>
<section>
<p class="description open-sans">Set pitch and bearing for basemap</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: [2.187984, 41.384065],
zoom: 14,
scrollZoom: false,
//set pitch and bearing
pitch: 60, //map.getPitch() in degrees
bearing: -47, // map.getBearing() in degrees
});
//enable compass
const nav = new mapboxgl.NavigationControl({
showCompass: true
});
map.addControl(nav, 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('spend_data');
const viz = new carto.Viz(`
width: 3
color: ramp(top($category,5),vivid)
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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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
<!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/v1.1.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.1.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>