CARTO.js is a JavaScript library that interacts with different CARTO APIs. It is part of the CARTO Engine ecosystem.
To understand the fundamentals of CARTO.js, read the guides or the release announcement. To view the source code, browse the open-source repository in Github and contribute. Otherwise, view examples with Leaflet and Google Maps, read the full reference API, or find different support options.
Quick reference guides for learning how to use CARTO.js features.
Browse the interactive API documentation to search for specific CARTO.js methods, arguments, and sample code that can be used to build your applications.
Check Full Reference API
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Create new client
var client = new carto.Client({
apiKey: 'YOUR_API_KEY_HERE',
username: 'YOUR_USERNAME_HERE'
});
// Add a dataview to the client
client.addDataview(dataview)
.then(() => {
console.log('Dataview added');
})
.catch(cartoError => {
console.error(cartoError.message);
});
// Add a layer to the client
client.addLayer(layer)
.then(() => {
console.log('Layer added');
})
.catch(cartoError => {
console.error(cartoError.message);
});
Play with real examples and learn by doing.
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>Change order | CARTO</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<!-- Include Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAORE5iCjgLb4sMcWfmyRJgtP9VwfOrbJM&v=3.30"></script>
<!-- Include CARTO.js -->
<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.0-beta.25/carto.min.js"></script>
<style>
* {
box-sizing: border-box;
}
body, *{ margin: 0; padding: 0; }
#map {
position: absolute;
height: 100%;
width: 100%;
z-index: 0;
}
#controls {
position: absolute;
padding: 20px;
background: white;
top: 12px;
right: 12px;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.12);
border-radius: 4px;
width: 200px;
color: #2E3C43;
z-index: 2;
}
#controls li {
list-style-type: none;
margin: 0 0 8px 0;
display: flex;
vertical-align: middle;
}
#controls li input {
margin: 0 8px 0 0;
}
#controls li label {
font: 12px/16px 'Open Sans';
cursor: pointer;
}
#controls li:last-child {
margin-bottom: 0;
}
#controls li:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="controls">
<ul>
<li onclick="bringToBack()">
<input type="radio" name="style" id="bringToBack">
<label for="bringToBack">Bring to back</label>
</li>
<li onclick="bringToFront()">
<input type="radio" name="style" checked id="bringToFront">
<label for="bringToFront">Bring to front</label>
</li>
</ul>
</div>
<script>
const map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 30, lng: 0},
zoom: 3
});
// Hide the map labels and geometry strokes
map.set('styles', [{
elementType: 'labels',
stylers: [{ visibility: 'off' }]
}, {
elementType: 'geometry.stroke',
stylers: [{ visibility: 'off' }]
}]);
const client = new carto.Client({
apiKey: 'YOUR_API_KEY',
username: 'cartojs-test'
});
const spainCitiesSource = new carto.source.Dataset(`
ne_10m_populated_places_simple
`);
const spainCitiesStyle = new carto.style.CartoCSS(`
#layer {
marker-width: 7;
marker-fill: #EE4D5A;
marker-line-color: #FFFFFF;
}
`);
const spainCitiesLayer = new carto.layer.Layer(spainCitiesSource, spainCitiesStyle);
const europeCountriesSource = new carto.source.Dataset(`
ne_adm0_europe
`);
const europeCountriesStyle = new carto.style.CartoCSS(`
#layer {
polygon-fill: #826DBA;
polygon-opacity: 0.8;
::outline {
line-width: 1;
line-color: #FFFFFF;
line-opacity: 0.8;
}
}
`);
const europeCountriesLayer = new carto.layer.Layer(europeCountriesSource, europeCountriesStyle);
client.addLayers([europeCountriesLayer, spainCitiesLayer]);
map.overlayMapTypes.push(client.getGoogleMapsMapType(map));
function bringToBack() {
spainCitiesLayer.bringToBack();
// or
// spainCitiesLayer.setOrder(0);
// or
// client.moveLayer(spainCitiesLayer, 0);
}
function bringToFront() {
spainCitiesLayer.bringToFront();
// or
// spainCitiesLayer.setOrder(1);
// // or
// client.moveLayer(spainCitiesLayer, 1);
}
</script>
</body>
</html>
Get help or learn about known issues.
