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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<title>Point labels | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>Points of interest</h1>
</header>
<section>
<p class="description open-sans">Style and label points</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-104.994105, 39.745939],
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({
user: 'cartovl',
apiKey: 'default_public'
});
// Point layer
const source = new carto.source.Dataset('points_of_interest');
const viz = new carto.Viz(`
@v_features: viewportFeatures($poi_name)
color: fuchsia
width: 6
strokeColor: white
strokeWidth: 2
filter: $major == "YES"
`);
const layer = new carto.Layer('points', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(feature => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": feature.getRenderedCentroid()
},
"properties": {
"label_field": `${feature.properties['poi_name']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
"text-size": 10,
"text-offset": [0, 0.65],
"text-anchor": "top",
"text-max-width": 8,
"text-justify": "center"
},
"paint": {
"text-color": "white",
"text-halo-color": "fuchsia",
"text-halo-width": 0.5,
"text-halo-blur": 0.5
}
});
});
layer.addTo(map);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<title>Point labels conditional style | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>Highlight points of interest</h1>
</header>
<section>
<p class="description open-sans">Style and label points with conditions</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-105.005366, 39.749277],
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({
user: 'cartovl',
apiKey: 'default_public'
});
// Point layer
const source = new carto.source.Dataset('points_of_interest');
const viz = new carto.Viz(`
@v_features: viewportFeatures($poi_name)
@pois: buckets(
$poi_name, [
'Union Station',
'Invesco Field at Mile High Stadium',
'Pepsi Center',
'Coors Field'
]
)
@colors: [#0B9F95, #D36DFB, #ff9674, #F75869]
color: ramp(@pois, @colors, white)
width: 6
strokeWidth: 0
filter: $major == "YES"
`);
const layer = new carto.Layer('points', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(feature => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": feature.getRenderedCentroid()
},
"properties": {
"label_field": `${feature.properties['poi_name']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels with conditions for text-fill paint property
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
"text-size": 10,
"text-offset": [0, 0.65],
"text-anchor": "top",
"text-max-width": 8,
"text-justify": "center",
"text-letter-spacing": 0.1
},
"paint": {
"text-color": [
'match',
['get', 'label_field'],
'Union Station', '#0B9F95',
'Invesco Field at Mile High Stadium', '#D36DFB',
'Pepsi Center', '#FF9674',
'Coors Field', '#F75869',
'#ccc'
],
"text-halo-color": "#000",
"text-halo-width": 1.2,
"text-halo-blur": 1
}
});
});
layer.addTo(map);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html>
<head>
<title>Point labels text size by zoom | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>Points of interest</h1>
</header>
<section>
<p class="description open-sans">Size symbols and labels through zoom</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-104.994105, 39.745939],
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({
user: 'cartovl',
apiKey: 'default_public'
});
// Point layer
const source = new carto.source.Dataset('points_of_interest');
const viz = new carto.Viz(`
@v_features: viewportFeatures($poi_name)
color: fuchsia
width: ramp(zoomrange([13,18]),[5,10])
strokeColor: white
strokeWidth: ramp(zoomrange([13,18]),[1,2])
filter: $major == "YES"
`);
const layer = new carto.Layer('points', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(feature => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": feature.getRenderedCentroid()
},
"properties": {
"label_field": `${feature.properties['poi_name']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels add stops for text size through zoom
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-size": {
"stops": [
[13, 8],
[14, 12],
[16, 16],
[18, 24]
]
},
"text-field": "{label_field}",
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
"text-offset": [0, 0.65],
"text-anchor": "top",
"text-max-width": 8,
"text-justify": "center"
},
"paint": {
"text-color": "white",
"text-halo-color": "fuchsia",
"text-halo-width": 0.5,
"text-halo-blur": 0.5
}
});
});
layer.addTo(map);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<title>Label clusters by count | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>Montreal parking signs</h1>
</header>
<section>
<p class="description open-sans">Symbolize and label by viewport cluster count</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [-73.605089, 45.536127],
zoom: 10,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultConfig({
serverURL: 'https://{user}.carto.com'
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('montreal_parking_signs');
const viz = new carto.Viz(`
@count: clusterCount()
@v_features: viewportFeatures(@count)
width: ramp(linear(@count, viewportMIN(@count), viewportMAX(@count)), [5,50])
color: opacity(#C91329,0.9)
strokeWidth: 0
resolution: 32
`);
const layer = new carto.Layer('layer', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(feature => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": feature.getRenderedCentroid()
},
"properties": {
"label_field": `${feature.properties['count']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Regular"],
"text-size": 10,
"text-justify": "center"
},
"paint": {
"text-color": "#FFFFFF",
"text-halo-width": 0,
"text-halo-blur": 0
},
filter: ['!=', ['string', ['get', 'label_field']], '1']
});
});
layer.addTo(map);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
<title>Label clusters by count | CARTO VL</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>Average temperatures</h1>
</header>
<section>
<p class="description open-sans">Symbolize and label global cluster averages</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: 'https://basemaps.cartocdn.com/gl/positron-gl-style/style.json',
center: [-95.491724, 38.685047],
zoom: 4,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultConfig({
serverURL: 'https://{user}.carto.com'
});
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('july_temps');
const viz = new carto.Viz(`
@clusterAverage: clusterAVG($value)
@v_features: viewportFeatures(@clusterAverage)
@g_min: globalMIN(@clusterAverage)
@g_max: globalMAX(@clusterAverage)
@color: ramp(linear(@clusterAverage, @g_min, @g_max), [blue, turquoise, yellow, red])
width: 30
color: opacity(@color, 0.8)
strokeWidth: 0
resolution: 16
`);
const layer = new carto.Layer('layer', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(feature => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": feature.getRenderedCentroid()
},
"properties": {
"label_field": Math.round(feature.properties['clusterAverage']) //Round cluster average values for labeling purposes
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-font": ["Open Sans Semibold", "Arial Unicode MS Regular"],
"text-size": 10
},
"paint": {
"text-color": "#000000",
"text-halo-width": 0,
"text-halo-blur": 0
}
});
});
layer.addTo(map);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html>
<head>
<title>Label polygons | 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 neighborhoods</h1>
</header>
<section>
<p class="description open-sans">Style and label polygons</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-122.406855, 37.744263],
zoom: 11,
scrollZoom: 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('sf_neighborhoods');
const viz = new carto.Viz(`
@v_features: viewportFeatures($name)
color: ramp($name,vivid)
strokeWidth: 1
strokeColor: black
`);
const layer = new carto.Layer('polygons', source, viz);
// Create labeling layer centroids
layer.on('loaded', () => {
map.addSource('labels', { type: 'geojson', data: null });
const labelSource = map.getSource('labels');
const layerUpdated = function () {
const features = viz.variables.v_features.value;
const geojsonFeatures = features.map(feature => {
return {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": feature.getRenderedCentroid()
},
"properties": {
"label_field": `${feature.properties['name']}`,
}
}
});
labelSource.setData({
type: 'FeatureCollection',
features: geojsonFeatures
});
};
layer.on('updated', layerUpdated);
// Style labels
map.addLayer({
"id": "my-labels",
"type": "symbol",
"source": "labels",
"layout": {
"text-field": "{label_field}",
"text-size": 10,
"text-font": ["Open Sans Bold", "Arial Unicode MS Bold"],
"text-letter-spacing": 0.1,
"text-max-width": 7,
"text-transform": "uppercase"
},
"paint": {
"text-color": "#333",
"text-halo-color": "#fff",
"text-halo-width": 1,
"text-halo-blur": 0.5
},
});
});
layer.addTo(map);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<title>Basemap labels on top | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>Labels on top</h1>
</header>
<section>
<p class="description open-sans">Basemap labels on top of layer</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 0],
zoom: 2,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('countries_110m_admin_0');
const viz = new carto.Viz(`
@country: ramp($mapcolor7,pastel)
color: opacity(@country,0.8)
strokeColor: @country
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
// Add layer below first basemap labeling layer
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html>
<head>
<title>Basemap labels under | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>Labels under</h1>
</header>
<section>
<p class="description open-sans">Basemap labels under layer</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [0, 0],
zoom: 2,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('countries_110m_admin_0');
const viz = new carto.Viz(`
@country: ramp($mapcolor7,pastel)
color: opacity(@country,0.8)
strokeColor: @country
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
// Add layer on top of basemap
layer.addTo(map);
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<html>
<head>
<title>Color map background | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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 background</h1>
</header>
<section>
<p class="description open-sans">Set custom color for map background</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
// Set paint properties for map's background layer
const map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: { 'background-color': 'white' }
}
]
},
center: [0, 0],
zoom: 2,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
const source = new carto.source.Dataset('countries_110m_admin_0');
const viz = new carto.Viz(`
@country: ramp($mapcolor7,pastel)
color: opacity(@country,0.8)
strokeColor: @country
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
// Add layer to map
layer.addTo(map);
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title>Project layer | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>Project layer</h1>
</header>
<section>
<p class="description open-sans">World Robinson projection with SQL source</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
// Set paint properties for map's background layer
const map = new mapboxgl.Map({
container: 'map',
style: {
version: 8,
sources: {},
layers: [
{
id: 'background',
type: 'background',
paint: { 'background-color': 'white' }
}
]
},
center: [0, 0],
zoom: 1,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
//Add SQL source layer with projection information
//For more information visit https://carto.com/help/working-with-data/changing-map-projections/
const source = new carto.source.SQL(`
SELECT
cartodb_id,
the_geom,
ST_Transform(the_geom_webmercator, 54030)
AS
the_geom_webmercator,
mapcolor7
FROM
countries_110m_admin_0
`);
const viz = new carto.Viz(`
@country: ramp($mapcolor7,pastel)
color: opacity(@country,0.8)
strokeColor: @country
strokeWidth: 1
`);
const layer = new carto.Layer('layer', source, viz);
// Add layer to map
layer.addTo(map);
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html>
<head>
<title>Set pitch and bearing | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>Pitch and bearing</h1>
</header>
<section>
<p class="description open-sans">Set pitch and bearing for basemap</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [2.187984, 41.384065],
zoom: 14,
scrollZoom: false,
//set pitch and bearing
pitch: 60, //map.getPitch() in degrees
bearing: -47, // map.getBearing() in degrees
});
//enable compass
const nav = new mapboxgl.NavigationControl({
showCompass: true
});
map.addControl(nav, 'top-left');
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: 3
color: ramp(top($category,5),vivid)
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<html>
<head>
<title>Classification using 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">
<style>
#controls li {
display: grid;
padding-top: 5px;
}
#nBuckets,
#nOpacity {
font-size: 10px;
}
.paletteSelector {
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
list-style-image: none;
}
.paletteSelector li div {
height: 30px;
}
.paletteSelector li div.selected {
border: 2px black solid;
}
.paletteSelector li p {
position: relative;
top: 0px;
left: 5px;
font-size: 10px;
}
</style>
</head>
<body>
<div id="map"></div>
<aside class="toolbox">
<div class="box">
<header>
<h1>Classification using variables</h1>
</header>
<section>
<p class="description open-sans">This example illustrates how to use variables for classification parameters to
build an interactive thematic mapping tool.
</p>
</section>
<br />
<section>
<div id="controls">
<ul>
<li>
<label>1. Select the input field</label>
<select id="valueSelector">
<option value="pct_trump" selected>Percent Trump</option>
<option value="pct_clinton">Percent Clinton</option>
<option value="pct_dem_r">Percent Democrat</option>
<option value="pct_higher_edu">Percent Higher Education</option>
</select>
</li>
<li>
<label>2. Select the number of buckets</label>
<input id="bucketsSelector" type="range" min="2" max="11" step="1" value="3">
<span id="nBuckets">3 buckets</span>
</li>
<li>
<label>3. Select the opacity</label>
<input id="opacitySelector" type="range" min="0" max="1" step="0.1" value="0.8">
<span id="nOpacity">80% opacity</span>
</li>
<li>
<label>4. Select a palette</label>
<ul class="paletteSelector">
<li>
<div class="selected"
style="background:linear-gradient(90deg,#ffc6c4 0,#ffc6c4 14.285714285714286%,#f4a3a8 14.285714285714286%,#f4a3a8 28.571428571428573%,#e38191 28.571428571428573%,#e38191 42.857142857142854%,#cc607d 42.857142857142854%,#cc607d 57.142857142857146%,#ad466c 57.142857142857146%,#ad466c 71.42857142857143%,#8b3058 71.42857142857143%,#8b3058 85.71428571428571%,#672044 85.71428571428571%,#672044 100%)">
<p>Burg</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#fbe6c5 0,#fbe6c5 14.285714285714286%,#f5ba98 14.285714285714286%,#f5ba98 28.571428571428573%,#ee8a82 28.571428571428573%,#ee8a82 42.857142857142854%,#dc7176 42.857142857142854%,#dc7176 57.142857142857146%,#c8586c 57.142857142857146%,#c8586c 71.42857142857143%,#9c3f5d 71.42857142857143%,#9c3f5d 85.71428571428571%,#70284a 85.71428571428571%,#70284a 100%)">
<p>BurgYl</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#f6d2a9 0,#f6d2a9 14.285714285714286%,#f5b78e 14.285714285714286%,#f5b78e 28.571428571428573%,#f19c7c 28.571428571428573%,#f19c7c 42.857142857142854%,#ea8171 42.857142857142854%,#ea8171 57.142857142857146%,#dd686c 57.142857142857146%,#dd686c 71.42857142857143%,#ca5268 71.42857142857143%,#ca5268 85.71428571428571%,#b13f64 85.71428571428571%,#b13f64 100%)">
<p>RedOr</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#ecda9a 0,#ecda9a 14.285714285714286%,#efc47e 14.285714285714286%,#efc47e 28.571428571428573%,#f3ad6a 28.571428571428573%,#f3ad6a 42.857142857142854%,#f7945d 42.857142857142854%,#f7945d 57.142857142857146%,#f97b57 57.142857142857146%,#f97b57 71.42857142857143%,#f66356 71.42857142857143%,#f66356 85.71428571428571%,#ee4d5a 85.71428571428571%,#ee4d5a 100%)">
<p>OrYel</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#fde0c5 0,#fde0c5 14.285714285714286%,#facba6 14.285714285714286%,#facba6 28.571428571428573%,#f8b58b 28.571428571428573%,#f8b58b 42.857142857142854%,#f59e72 42.857142857142854%,#f59e72 57.142857142857146%,#f2855d 57.142857142857146%,#f2855d 71.42857142857143%,#ef6a4c 71.42857142857143%,#ef6a4c 85.71428571428571%,#eb4a40 85.71428571428571%,#eb4a40 100%)">
<p>Peach</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#fef6b5 0,#fef6b5 14.285714285714286%,#ffdd9a 14.285714285714286%,#ffdd9a 28.571428571428573%,#ffc285 28.571428571428573%,#ffc285 42.857142857142854%,#ffa679 42.857142857142854%,#ffa679 57.142857142857146%,#fa8a76 57.142857142857146%,#fa8a76 71.42857142857143%,#f16d7a 71.42857142857143%,#f16d7a 85.71428571428571%,#e15383 85.71428571428571%,#e15383 100%)">
<p>PinkYl</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#e4f1e1 0,#e4f1e1 14.285714285714286%,#b4d9cc 14.285714285714286%,#b4d9cc 28.571428571428573%,#89c0b6 28.571428571428573%,#89c0b6 42.857142857142854%,#63a6a0 42.857142857142854%,#63a6a0 57.142857142857146%,#448c8a 57.142857142857146%,#448c8a 71.42857142857143%,#287274 71.42857142857143%,#287274 85.71428571428571%,#0d585f 85.71428571428571%,#0d585f 100%)">
<p>Mint</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#c4e6c3 0,#c4e6c3 14.285714285714286%,#96d2a4 14.285714285714286%,#96d2a4 28.571428571428573%,#6dbc90 28.571428571428573%,#6dbc90 42.857142857142854%,#4da284 42.857142857142854%,#4da284 57.142857142857146%,#36877a 57.142857142857146%,#36877a 71.42857142857143%,#266b6e 71.42857142857143%,#266b6e 85.71428571428571%,#1d4f60 85.71428571428571%,#1d4f60 100%)">
<p>BluGrn</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#d2fbd4 0,#d2fbd4 14.285714285714286%,#a5dbc2 14.285714285714286%,#a5dbc2 28.571428571428573%,#7bbcb0 28.571428571428573%,#7bbcb0 42.857142857142854%,#559c9e 42.857142857142854%,#559c9e 57.142857142857146%,#3a7c89 57.142857142857146%,#3a7c89 71.42857142857143%,#235d72 71.42857142857143%,#235d72 85.71428571428571%,#123f5a 85.71428571428571%,#123f5a 100%)">
<p>DarkMint</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#d3f2a3 0,#d3f2a3 14.285714285714286%,#97e196 14.285714285714286%,#97e196 28.571428571428573%,#6cc08b 28.571428571428573%,#6cc08b 42.857142857142854%,#4c9b82 42.857142857142854%,#4c9b82 57.142857142857146%,#217a79 57.142857142857146%,#217a79 71.42857142857143%,#105965 71.42857142857143%,#105965 85.71428571428571%,#074050 85.71428571428571%,#074050 100%)">
<p>Emrld</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#f7feae 0,#f7feae 14.285714285714286%,#b7e6a5 14.285714285714286%,#b7e6a5 28.571428571428573%,#7ccba2 28.571428571428573%,#7ccba2 42.857142857142854%,#46aea0 42.857142857142854%,#46aea0 57.142857142857146%,#089099 57.142857142857146%,#089099 71.42857142857143%,#00718b 71.42857142857143%,#00718b 85.71428571428571%,#045275 85.71428571428571%,#045275 100%)">
<p>BluYl</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#d1eeea 0,#d1eeea 14.285714285714286%,#a8dbd9 14.285714285714286%,#a8dbd9 28.571428571428573%,#85c4c9 28.571428571428573%,#85c4c9 42.857142857142854%,#68abb8 42.857142857142854%,#68abb8 57.142857142857146%,#4f90a6 57.142857142857146%,#4f90a6 71.42857142857143%,#3b738f 71.42857142857143%,#3b738f 85.71428571428571%,#2a5674 85.71428571428571%,#2a5674 100%)">
<p>Teal</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#b0f2bc 0,#b0f2bc 14.285714285714286%,#89e8ac 14.285714285714286%,#89e8ac 28.571428571428573%,#67dba5 28.571428571428573%,#67dba5 42.857142857142854%,#4cc8a3 42.857142857142854%,#4cc8a3 57.142857142857146%,#38b2a3 57.142857142857146%,#38b2a3 71.42857142857143%,#2c98a0 71.42857142857143%,#2c98a0 85.71428571428571%,#257d98 85.71428571428571%,#257d98 100%)">
<p>TealGrn</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,hsl(290, 59%, 92%) 0,#f3e0f7 14.285714285714286%,#e4c7f1 14.285714285714286%,#e4c7f1 28.571428571428573%,#d1afe8 28.571428571428573%,#d1afe8 42.857142857142854%,#b998dd 42.857142857142854%,#b998dd 57.142857142857146%,#9f82ce 57.142857142857146%,#9f82ce 71.42857142857143%,#826dba 71.42857142857143%,#826dba 85.71428571428571%,#63589f 85.71428571428571%,#63589f 100%)">
<p>Purp</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#f9ddda 0,#f9ddda 14.285714285714286%,#f2b9c4 14.285714285714286%,#f2b9c4 28.571428571428573%,#e597b9 28.571428571428573%,#e597b9 42.857142857142854%,#ce78b3 42.857142857142854%,#ce78b3 57.142857142857146%,#ad5fad 57.142857142857146%,#ad5fad 71.42857142857143%,#834ba0 71.42857142857143%,#834ba0 85.71428571428571%,#573b88 85.71428571428571%,#573b88 100%)">
<p>PurpOr</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#f3e79b 0,#f3e79b 14.285714285714286%,#fac484 14.285714285714286%,#fac484 28.571428571428573%,#f8a07e 28.571428571428573%,#f8a07e 42.857142857142854%,#eb7f86 42.857142857142854%,#eb7f86 57.142857142857146%,#ce6693 57.142857142857146%,#ce6693 71.42857142857143%,#a059a0 71.42857142857143%,#a059a0 85.71428571428571%,#5c53a5 85.71428571428571%,#5c53a5 100%)">
<p>Sunset</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#f3cbd3 0,#f3cbd3 14.285714285714286%,#eaa9bd 14.285714285714286%,#eaa9bd 28.571428571428573%,#dd88ac 28.571428571428573%,#dd88ac 42.857142857142854%,#ca699d 42.857142857142854%,#ca699d 57.142857142857146%,#b14d8e 57.142857142857146%,#b14d8e 71.42857142857143%,#91357d 71.42857142857143%,#91357d 85.71428571428571%,#6c2167 85.71428571428571%,#6c2167 100%)">
<p>Magenta</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#fcde9c 0,#fcde9c 14.285714285714286%,#faa476 14.285714285714286%,#faa476 28.571428571428573%,#f0746e 28.571428571428573%,#f0746e 42.857142857142854%,#e34f6f 42.857142857142854%,#e34f6f 57.142857142857146%,#dc3977 57.142857142857146%,#dc3977 71.42857142857143%,#b9257a 71.42857142857143%,#b9257a 85.71428571428571%,#7c1d6f 85.71428571428571%,#7c1d6f 100%)">
<p>SunsetDark</p>
</div>
</li>
<li>
<div
style="background:linear-gradient(90deg,#ede5cf 0,#ede5cf 14.285714285714286%,#e0c2a2 14.285714285714286%,#e0c2a2 28.571428571428573%,#d39c83 28.571428571428573%,#d39c83 42.857142857142854%,#c1766f 42.857142857142854%,#c1766f 57.142857142857146%,#a65461 57.142857142857146%,#a65461 71.42857142857143%,#813753 71.42857142857143%,#813753 85.71428571428571%,#541f3f 85.71428571428571%,#541f3f 100%)">
<p>BrwnYl</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
</aside>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.voyager,
center: [-88, 37],
zoom: 3
});
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 s = carto.expressions;
function vizFromSettings(settings) {
const stringViz = `
@input: $${settings.input}
@buckets: ${settings.buckets}
@palette: ${settings.palette}
@opacity: ${settings.opacity}
color: opacity(ramp(globalQuantiles(@input, @buckets), @palette), @opacity)
strokeColor: rgba(0,0,0,0.2)
strokeWidth: 1
`
return new carto.Viz(stringViz);
}
// Define layer
const source = new carto.source.Dataset('higher_edu_by_county');
let initialSettings = {
input: 'pct_trump',
buckets: 3,
palette: 'Burg',
opacity: 0.8
}
const viz = vizFromSettings(initialSettings);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
// Basic popup to check the input field values
const popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
const interactivity = new carto.Interactivity(layer);
interactivity.on('featureClick', event => {
if (event.features.length > 0) {
const firstFeature = event.features[0];
const value = firstFeature.variables.input.value.toFixed(2);
popup.setHTML(`<p><strong>${selectedColumnName()}</strong>: ${value}</p>`);
popup.setLngLat([event.coordinates.lng, event.coordinates.lat]);
if (!popup.isOpen()) {
popup.addTo(map);
}
} else {
popup.remove();
}
});
// Update variables with widgets
const $valueSelector = document.getElementById('valueSelector');
const $bucketsSelector = document.getElementById('bucketsSelector');
const $opacitySelector = document.getElementById('opacitySelector');
const $paletteSelectors = document.querySelectorAll('.paletteSelector div');
function selectedColumnName() {
return $valueSelector.options[$valueSelector.selectedIndex].value;
}
function updateViz() {
popup.remove();
const columnName = selectedColumnName();
viz.variables['input'] = s.property(columnName);
viz.variables['opacity'].blendTo(parseFloat($opacitySelector.value));
viz.variables['buckets'] = parseInt($bucketsSelector.value);
const paletteName = document.querySelector('.paletteSelector .selected p').innerText;
viz.variables['palette'] = s.palettes[paletteName.toUpperCase()];
}
// Handle widget changes
$valueSelector.addEventListener('change', () => {
updateViz();
});
$bucketsSelector.addEventListener('input', () => {
document.querySelector('#nBuckets').innerText = `${$bucketsSelector.value} buckets`;
updateViz();
});
$opacitySelector.addEventListener('input', () => {
document.querySelector('#nOpacity').innerText = `${$opacitySelector.value * 100}% opacity`;
updateViz();
});
$paletteSelectors.forEach((p) => p.addEventListener('click', () => {
// clear selected
$paletteSelectors.forEach((s) => s.classList.remove('selected'));
p.classList.add('selected');
updateViz();
}));
</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>US Population by County | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>US Population by county</h1>
</header>
<section>
<p class="description open-sans">This map uses viewportMax to draw symbol sizes proportional to population values in the current viewport and also applies the same to the color and outline width. When you zoom in, you will see the map update all of its symbology with the values in the current viewport</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-99.6404893, 38.5480718],
zoom: 4,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('county_points_with_population');
const viz = new carto.Viz(`
width: 75*sqrt($estimate_total)/sqrt(viewportMax($estimate_total))
color: opacity(ramp(linear($estimate_total,viewportMax($estimate_total),viewportMin($estimate_total)),purpor),0.7)
strokeWidth: 0.05*sqrt($estimate_total/sqrt(viewportMax($estimate_total)))
strokeColor: opacity(ramp(linear($estimate_total,viewportMax($estimate_total),viewportMin($estimate_total)),purpor),0.8)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html>
<head>
<title>Taxi pickups | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/v1.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>Taxi pickups</h1>
</header>
<section>
<p class="description open-sans">Multi-scale animation with color interpolation through time of day and sized by trip distance</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-74.0032059, 40.7482066],
zoom: 12,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('taxi_50k');
const viz = new carto.Viz(`
width: ($fare_amount/15000)*scaled(1)
filter: animation($tpep_pickup_datetime,10,fade(0.2,0.2))
color: rgba(255,255,255,0.2)
strokeColor: ramp(linear($tpep_pickup_datetime,time('2016-05-01T00:08:39Z'),time('2016-05-06T10:29:11Z')),[#CF1C90,#F8CA00,#9BBD4D,#07A5AB,#B100EB])
strokeWidth: ($trip_distance/30000)*scaled(1)
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html>
<head>
<title>Ocean bathymetry | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/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>Ocean bathymetry</h1>
</header>
<section>
<p class="description open-sans">Since the ocean is forever active, and moving, we wanted to demonstrate how we could animate the points to give that sense of movement</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-20, 20],
zoom: 2,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('bathy_points');
const viz = new carto.Viz(`
@speed : 3*now()+$dn
width: 5
color: ramp(linear($dn,0,255),teal)
filter: sin(@speed)*0.5+0.5
strokeWidth: 0
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
<title>Hurricane Harvey | CARTO</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<script src="https://libs.cartocdn.com/carto-vl/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>Hurricane Harvey</h1>
</header>
<section>
<p class="description open-sans">Rainfall totals from Hurricane Harvey aggregated to counties. The animation is
based on total rainfall. Counties with more rain draw first to lower rainfall totals. The opacity is based off
population density (total pop / area). The brighter polygons have higher populations.</p>
</section>
<footer class="js-footer"></footer>
</div>
</aside>
<div id="loader">
<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
</svg>
</div>
</div>
<script>
const map = new mapboxgl.Map({
container: 'map',
style: carto.basemaps.darkmatter,
center: [-96, 30],
zoom: 7,
scrollZoom: false
});
const nav = new mapboxgl.NavigationControl({
showCompass: false
});
map.addControl(nav, 'top-left');
map.addControl(new mapboxgl.FullscreenControl(), 'top-left');
// Define user
carto.setDefaultAuth({
username: 'cartovl',
apiKey: 'default_public'
});
// Define layer
const source = new carto.source.Dataset('table_30');
const viz = new carto.Viz(`
@style: opacity(ramp(linear($sum_qpf,1,120),temps),($e_totpop/$area_sqmi)/500)
color: @style
strokeColor: @style
filter: animation(linear($sum_qpf,144.5, 1.5),5,fade(0,100))+0.1
`);
const layer = new carto.Layer('layer', source, viz);
layer.addTo(map, 'watername_ocean');
layer.on('loaded', hideLoader);
function hideLoader() {
document.getElementById('loader').style.opacity = '0';
}
</script>
</body>
</html>