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
71
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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
});
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
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
<!DOCTYPE html>
<html>
<head>
<title>SQL Source 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer with SQL source
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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
<head>
<title>Add 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>GeoJSON</h1>
</header>
<section>
<p class="description open-sans">Add a GeoJSON source 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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
const geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-73.944158, 40.678178]
},
"properties": {
"address": "Brooklyn, New York"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-3.70379, 40.416775]
},
"properties": {
"address": "Madrid, Spain"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-77.036871, 38.907192]
},
"properties": {
"address": "Washington, DC"
}
}
]
};
const source = new carto.source.GeoJSON(geojson);
const viz = new carto.Viz(`width: 40`);
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>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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
116
117
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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">Select the source layer to draw</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');
map.addControl(new mapboxgl.FullscreenControl(), '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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
fetch('https://libs.cartocdn.com/carto-vl/assets/stations.geojson')
.then(response => response.json())
.then(function(data){
// Define layer
const source = new carto.source.GeoJSON(data);
const viz = new carto.Viz();
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
});
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
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
<!DOCTYPE html>
<html>
<head>
<title>Color spaces | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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 CARTO VL supports</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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
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)
`);
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
137
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
108
109
110
111
112
113
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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: 13,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define styles
const rampAutoViz = new carto.Viz(`
color: ramp($category, vivid)
width: 5
strokeColor: black
strokeWidth: 0.5
`);
const rampBucketsViz = new carto.Viz(`
color: ramp(buckets($category, ['Moda y calzado','Salud','Alimentación']), vivid)
width: 5
strokeColor: black
strokeWidth: 0.5
`);
const rampTopViz = new carto.Viz(`
color: ramp(top($category, 5), vivid)
width: 5
strokeColor: black
strokeWidth: 0.5
`);
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
139
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
77
78
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('world_population_2015');
const viz = new carto.Viz(`
@pop: sqrt($pop_2015) / 200
@style: ramp($country_name, bold)
width: @pop
color: @style
strokeColor: @style
strokeWidth: 1.5
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
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
74
75
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('spend_data');
const viz = new carto.Viz(`
width: sqrt($amount)/4
color: ramp(linear($amount,viewportMax($amount),viewportMin($amount)),bluyl)
strokeColor: rgba(51,51,51,0.3)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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">Set features to 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: [-123.1103, 49.2450],
zoom: 14,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('vancouver_trees');
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
<!DOCTYPE html>
<html>
<head>
<title>Style by zoom range | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Symbolize features by zoom range</h1>
</header>
<section>
<p class="description open-sans">Set feature style properties by a zoom range</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: [-123.1103, 49.2450],
zoom: 12,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('vancouver_trees');
const viz = new carto.Viz(`
width: ramp(zoomrange([12,18]),[1,16])
color: ramp(zoomrange([12,18]),[blue,red])
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<title>Filter by zoom range | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Filter features by zoom</h1>
</header>
<section>
<p class="description open-sans">Set the visibility of features with a zoom range filter</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: [-123.1103, 49.2450],
zoom: 12,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('vancouver_trees');
const viz = new carto.Viz(`
filter: ramp(zoomrange([12,13,14,15,16]),
[$diameter > 40,
$diameter > 30,
$diameter > 20,
$diameter > 10,
true]
)
width: 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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('populated_places');
const viz = new carto.Viz(`
symbol: ramp(buckets($featurecla, ['Admin-0 capital','Admin-1 capital','Populated place']), [star,triangle,marker])
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])
`);
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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), '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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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">Order point features by width</p>
<div id="controls">
<ul>
<li>
<input type="radio" name="style" onclick="setAscOrder()" id="Asc" checked>
<label for="Asc">Ascending</label>
</li>
<li>
<input type="radio" name="style" onclick="setDescOrder()" id="Desc">
<label for="Desc">Descending</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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset(`spend_data`);
const s = carto.expressions;
// Define style
const viz = new carto.Viz({
width: s.sqrt(s.prop('amount')),
color: s.ramp(s.prop('category'), s.palettes.PRISM),
strokeColor: s.rgba(255, 255, 255, 0.5),
strokeWidth: 1,
order: s.asc(s.width())
});
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
function setDefaultOrder() {
layer.blendToViz(new carto.Viz({
width: s.sqrt(s.prop('amount')),
color: s.ramp(s.prop('category'), s.palettes.PRISM),
strokeColor: s.rgba(255, 255, 255, 0.5),
strokeWidth: 1,
}));
}
function setAscOrder() {
layer.blendToViz(new carto.Viz({
width: s.sqrt(s.prop('amount')),
color: s.ramp(s.prop('category'), s.palettes.PRISM),
strokeColor: s.rgba(255, 255, 255, 0.5),
strokeWidth: 1,
order: s.asc(s.width())
}));
}
function setDescOrder() {
layer.blendToViz(new carto.Viz({
width: s.sqrt(s.prop('amount')),
color: s.ramp(s.prop('category'), s.palettes.PRISM),
strokeColor: s.rgba(255, 255, 255, 0.5),
strokeWidth: 1,
order: s.desc(s.width())
}));
}
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<title>Animate and color by date | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Seattle Collisions</h1>
</header>
<section>
<p class="description open-sans">Animate and color features over a date/time field</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: [-122.33, 47.61],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('seattle_collisions');
// Define animation viz
const viz = new carto.Viz(`
filter: animation($incdate, 30, fade(1, 1))
color: ramp(linear($incdate), sunset)
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
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
<!DOCTYPE html>
<html>
<head>
<title>Animate by date range | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Collisions in December 2018</h1>
</header>
<section>
<p class="description open-sans">Animate features by a date range</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: [-122.33, 47.61],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('seattle_collisions');
// Define time range for animation viz
const viz = new carto.Viz(`
filter: animation(
linear(
$incdate,
time('2018-12-01T00:00:00Z'),
time('2018-12-31T00:00:00Z')
),
20,
fade(0.5, 0.5)
)
color: turquoise
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
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
<!DOCTYPE html>
<html>
<head>
<title>Animate feature 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Number of People Involved in Collisions</h1>
</header>
<section>
<p class="description open-sans">Animate the width of features over 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: [-122.33, 47.61],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('seattle_collisions');
// Define animation viz
const viz = new carto.Viz(`
width: ramp(linear($personcount, 2, 5), [5, 20]) * animation(linear($incdate), 20,fade(1, 1))
color: opacity(turquoise, 0.8)
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
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
<!DOCTYPE html>
<html>
<head>
<title>Animate and filter | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Collisions involving pedestrians</h1>
</header>
<section>
<p class="description open-sans">Animate a subset of features using a filter</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: [-122.33, 47.61],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('seattle_collisions');
// Define animation viz
const viz = new carto.Viz(`
filter: $pedcount >= 1 and animation($incdate, 20,fade(0.5, 0.5))
color: opacity(turquoise, 0.8)
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
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
<!DOCTYPE html>
<html>
<head>
<title>Hold animated features | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Seattle Collisions</h1>
</header>
<section>
<p class="description open-sans">Hold fade out for cumulative animation</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: [-122.33, 47.61],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('seattle_collisions');
// Define animation viz
const viz = new carto.Viz(`
filter: animation($incdate, 30, fade(0.1, hold))
width: 3
color: turquoise
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
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
<!DOCTYPE html>
<html>
<head>
<title>Add feature visibility | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Seattle Collisions</h1>
</header>
<section>
<p class="description open-sans">Add visibility to all features in the background of an animation</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: [-122.33, 47.61],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('seattle_collisions');
// Define animation viz
const viz = new carto.Viz(`
filter: animation($incdate, 20, fade(0.5, 0.5)) + 0.05
width: 3
color: turquoise
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
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
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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.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.3.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>
<div id="map"></div>
<!-- Animation control elements -->
<aside class="toolbox">
<div class="box">
<header>
<h1>Seattle Collisions</h1>
</header>
<section>
<p class="description open-sans">Add animation controls for "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>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-122.33, 47.61],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('seattle_collisions');
// Define animation viz with variables
const viz = new carto.Viz(`
@duration: 30
@animation: animation($incdate, @duration, fade(1, 1))
filter: @animation
color: turquoise
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map);
// 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
91
92
93
94
95
96
97
98
99
100
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer and variables for interactivity
const source = new carto.source.Dataset('london_neighbourhoods');
const viz = new carto.Viz(`
@neighbourhood: $neighbourhood
`);
const layer = new carto.Layer('layer', source, viz);
// Define interactivity
const interactivity = new carto.Interactivity(layer);
interactivity.on('featureClick', updateNeighbourhood);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function updateNeighbourhood(event) {
let content = '';
for (let feature of event.features) {
content += `
<div class="container">
<h3 class="h3">${feature.variables.neighbourhood.value}</h3>
<p class="open-sans">Latitude: ${event.coordinates.lat.toFixed(4)}</p>
<p class="open-sans">Longitude: ${event.coordinates.lng.toFixed(4)}</p>
</div>
`;
}
document.getElementById('content').innerHTML = content;
}
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>Add pop-ups on 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Pop-ups on hover</h1>
</header>
<section>
<p class="description open-sans">Configure pop-up windows on hover</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: 1.5,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
// Define pop-up
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
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);
}
});
});
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
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
<!DOCTYPE html>
<html>
<head>
<title>Add pop-ups on 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Pop-ups on click</h1>
</header>
<section>
<p class="description open-sans">Configure pop-up windows on click</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: 1.5,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
// Define pop-up
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
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('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);
interactivity.on('featureClick', 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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('world_population_2015');
const viz = new carto.Viz(`
width: sqrt($pop_2015)/200
color: opacity(BlueViolet, 0.5)
strokeColor: opacity(BlueViolet, 0.8)
`);
const layer = new carto.Layer('layer', source, viz);
// Define interactivity
const interactivity = new carto.Interactivity(layer);
const delay = 50;
let clickedFeatureId = null;
interactivity.on('featureEnter', event => {
event.features.forEach(feature => {
if (feature.id !== clickedFeatureId) {
feature.color.blendTo('opacity(DeepPink, 0.5)', delay)
feature.strokeWidth.blendTo('4', delay);
feature.strokeColor.blendTo('opacity(DeepPink, 0.8)', delay);
}
});
});
interactivity.on('featureLeave', event => {
event.features.forEach(feature => {
if (feature.id !== clickedFeatureId) {
feature.color.reset(delay);
feature.strokeWidth.reset(delay);
feature.strokeColor.reset(delay);
}
});
});
interactivity.on('featureClick', event => {
if (event.features.length) {
const feature = event.features[0];
clickedFeatureId = feature.id;
feature.color.blendTo('opacity(LimeGreen, 0.5)', delay)
feature.strokeWidth.blendTo('7', delay);
feature.strokeColor.blendTo('opacity(LimeGreen, 0.8)', delay);
}
});
interactivity.on('featureClickOut', event => {
if (event.features.length) {
const feature = event.features[0];
clickedFeatureId = '';
feature.color.reset(delay);
feature.strokeWidth.reset(delay);
feature.strokeColor.reset(delay);
}
});
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!DOCTYPE html>
<html>
<head>
<title>Interactive Filter | 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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.1/examples/maps/style.css" rel="stylesheet">
<style>
li {
display: flex;
align-items: center;
padding: 8px 0;
}
.point-mark {
margin-right: 4px;
}
</style>
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Rail Accidents by Weather</h1>
</header>
<section>
<p class="description open-sans">Turn weather categories on and off using the checkboxes to filter each
type.</p>
</section>
<footer class="js-footer"></footer>
<!-- Add legend data -->
<section>
<div id="controls">
<ul id="content"></ul>
</div>
</section>
</div>
</aside>
<script>
const s = carto.expressions;
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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset("railroad_accidents");
let weatherCategories = ['Clear', 'Cloudly', 'Rain', 'Snow', 'Fog', 'Sleet'];
const viz = new carto.Viz(`
filter: $weather in ['Clear', 'Cloudly', 'Rain', 'Snow', 'Fog', 'Sleet']
color: ramp($weather, [ darkorange, darkviolet, darkturquoise])
width: 5
strokeWidth: 0.2
strokeColor: black
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map);
let initialized = false;
// When layer loads, trigger legend event
layer.on('updated', () => {
if (!initialized) {
generateLegend();
setupWidget();
initialized = true;
}
});
function generateLegend() {
// Request data for legend from the layer viz
const legend = layer.viz.color.getLegendData();
// Create list elements for legend
const legendList = legend.data.map((legend, index) => {
const color = rgbToHex(legend.value);
const key = legend.key.toLowerCase().replace(' ', '-');
const checked = weatherCategories.includes(legend.key);
// Use "js-checkbox" class to get all the checkbox elements from the widget
// Use "data-weather-category" attribute to set the category for each checkbox
return `
<li>
<input
id="js-checkbox-${key}"
class="js-checkbox"
type="checkbox"
name="categories"
data-weather-category="${legend.key}"
checked>
<span class="point-mark" style="background-color:${color};"></span>
<label for="js-checkbox-${key}">
${legend.key}
</label>
</li>\n`;
}).join('');
document.getElementById('content').innerHTML = legendList;
}
function setupWidget() {
// 1. Get all the category checkboxes
const checkboxes = document.getElementsByClassName('js-checkbox');
// 2. Add an event listener to each category checkbox
for (let i in checkboxes) {
const checkbox = checkboxes.item(i);
checkbox.addEventListener('change', toggleCategory);
};
}
function toggleCategory(event) {
// 1. Get the clicked checkbox element from the event
const checkboxElement = event.currentTarget;
// 2. Get the category through the "data-weather-category" attribute
const category = checkboxElement.getAttribute('data-weather-category');
// 3. Toggle the chosen category from the global weatherCategories array
weatherCategories = _toggle(weatherCategories, category);
// 4. Check / uncheck the checkbox element
checkboxElement.checked = weatherCategories.includes(category);
// 5. Update the filter
viz.filter.blendTo(s.in(s.prop('weather'), weatherCategories));
}
//** Helper Methods **//
// 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);
}
// A function to toggle an element in an array
function _toggle(arr, item) {
return arr.includes(item) ? arr.filter(i => i !== item) : [...arr, item];
}
</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>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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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({
othersValue: 'Other weather'
});
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}</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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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: 'Others'
});
let colorLegendList = '';
colorLegend.data.forEach((legend) => {
const colorHex = rgbToHex(legend.value);
colorLegendList +=
`<li><span class="${viz.geometryType}-mark" style="border-color:${colorHex};"></span> <span>${legend.key}</span></li>\n`;
});
document.getElementById('content').innerHTML = colorLegendList;
});
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
function rgbToHex(color) {
return "#" + ((1 << 24) + (color.r << 16) + (color.g << 8) + color.b).toString(16).slice(1);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
108
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
96
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('railroad_accidents');
const viz = new carto.Viz(`
@palette: [darkorange, darkviolet, darkturquoise]
width: 5
color: opacity(ramp($weather, @palette), 0.5)
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 color
const colorLegend = layer.viz.color.getLegendData();
let colorLegendList = '';
// Create list elements for legend
colorLegend.data.forEach((legend, index) => {
const color = legend.value;
const rgba = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
// 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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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">
<header>
<h1>Stree Side of Tree</h1>
</header>
<section>
<canvas id="histogram" width="300" height="300"></canvas>
</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: [-123.1205, 49.2617],
zoom: 12.41
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), '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('vancouver_trees');
// Define the visualization
const viz = new carto.Viz(`
@v_histogram: viewportHistogram($street_side_name)
color: #00718b
width: 5
strokeWidth: 0.5
`);
// 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: true,
fontSize: 7,
autoSkip: false,
maxRotation: 0,
minRotation: 0
},
barPercentage: 0.9,
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);
layer.on('updated', () => {
// Save histogram variable
const histogram = layer.viz.variables.v_histogram;
// Get histogram data
const histogramData = histogram.value;
// Chart.js set up
const labels = histogramData.map(elem => elem.x);
const data = histogramData.map(elem => elem.y);
const backgroundColor = '#00718b';
chart.data = {
labels,
datasets: [{
data,
backgroundColor
}]
};
chart.update();
});
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
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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">
<header>
<h1>Tree Diameter</h1>
</header>
<section>
<canvas id="histogram" width="300" height="300"></canvas>
</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: [-123.1205, 49.2617],
zoom: 12.41
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const ctx = document.getElementById('histogram').getContext('2d');
const source = new carto.source.Dataset('vancouver_trees');
// Define the visualization
const viz = new carto.Viz(`
@v_histogram: viewportHistogram($diameter, [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 6]])
color: #00718b
width: 5
strokeWidth: 0.5
`);
// 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: true,
callback: function (value, index, values) {
return `[${value.join(', ')}]`;
}
},
barPercentage: 0.9,
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);
layer.on('updated', () => {
// Save histogram variable
const histogram = layer.viz.variables.v_histogram;
// Get histogram data
const histogramData = histogram.value;
// Chart.js set up
const labels = histogramData.map(elem => elem.x);
const data = histogramData.map(elem => elem.y);
const backgroundColor = '#00718b';
chart.data = {
labels,
datasets: [{
data,
backgroundColor
}]
};
chart.update();
});
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>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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
87
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
89
<!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.3.1/carto-vl.min.js"></script>
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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
135
<!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.3.1/carto-vl.min.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<link href="https://carto.com/developers/carto-vl/v1.3.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');
map.addControl(new mapboxgl.FullscreenControl(), '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>