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 lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Add layer</title>
<!-- mapbox-gl css ia required by Mapbox GL JS library (which provides the basemaps tech) -->
<link
rel="stylesheet"
type="text/css"
href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
/>
<!-- airship provides CARTO styles used, for example, in the panel -->
<link
rel="stylesheet"
type="text/css"
href="https://libs.cartocdn.com/airship-style/v2.4/airship.min.css"
/>
<!-- css styles to get a 'full-screen' map -->
<style>
body {
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
strong {
color:
}
</style>
</head>
<!-- 'as- classes come from Airship, and they provide help for the layout and basic styles -->
<body class="as-app-body as-app">
<div class="as-content">
<main class="as-main">
<div class="as-map-area">
<!-- map component will be instantiated here -->
<div id="map"></div>
<!-- panel with title and description -->
<div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
<div class="as-panel__element as-p--16 as-body">
<h1 class="as-title">Add layer</h1>
<h4 class="as-subheader as-mb--12">
Add one CARTO layer to your map with <em>carto.viz.createMap</em> and <em>carto.viz.Layer</em>
</h4>
</div>
</div>
</main>
</div>
<!-- mapbox-gl js, the corresponding JavaScript for the Mapbox GL library -->
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
<!-- deck.gl library -->
<script src="https://unpkg.com/deck.gl@8.2.0/dist.min.js"></script>
<!-- CARTO Web SDK library -->
<script src=https://libs.cartocdn.com/web-sdk/v1.0.0-alpha.3/index.min.js></script>
<script>
function initialize() {
/*
Set default credentials to access datasets in the CARTO platform, in this case from the 'public' user.
You can use your own user account here (there's a free plan available at https://carto.com/signup/)
*/
carto.auth.setDefaultCredentials({ username: 'public' });
/*
If apiKey is the default for public, it can be ommitted, so the previous is equivalent to:
`carto.auth.setDefaultCredentials({ username: 'public', apiKey: 'default_public' });`
*/
/*
This creates a simple world map, but it can be further configured (zoom, center, basemap...). Check the reference
and other examples.
*/
const deckMap = carto.viz.createMap();
/*
Create a layer with the whole dataset and add it to the map.
You can browse available datasets for the account in https://public.carto.com/datasets/
*/
const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries');
countriesLayer.addTo(deckMap);
}
initialize();
</script>
</body>
</html>
|
