My first CARTO.js map

forked from anonymous's block: My first CARTO.js map

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CARTO.js Single layer example</title>
    
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    
    <script src="https://cdn.jsdelivr.net/gh/cartodb/cartodb.js/@4.0.0-alpha.test2/carto.js"></script>
    <style>
      html, body { margin: 0; padding: 0; }
      #map { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // 1. Setting up the Leaflet Map
      // 1.1 Creating the Leaflet Map
      var map = L.map('map').setView([58.722598828043395, 18.544921875000004], 4);
      // 1.2 Adding basemap and labels layers
      // Adding Voyager Basemap
      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy;<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<a href="https://carto.com/attribution">CARTO</a>'
      }).addTo(map);
      // Adding Voyager Labels
      L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_only_labels/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '&copy;<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;<a href="https://carto.com/attribution">CARTO</a>',
        zIndex: 100
      }).addTo(map);
      // 2 Defining a carto.Client
      var client = new carto.Client({
        apiKey: '84fdbd587e4a942510270a48e843b4c1baa11e18',
        username: 'cartojs-test'
      });
      // 3. Displaying countries on the map
      // 3.1 Defining the layers
      // European Countries layer
      var europeanCountriesDataset = new carto.source.Dataset('ne_adm0_europe');
      var europeanCountriesStyle = new carto.style.CartoCSS(`
        #layer {
          polygon-fill: #162945;
          polygon-opacity: 0.5;
          ::outline {
            line-color: #FFFFFF;
            line-width: 1;
            line-opacity: 0.5;
          }
        }`);
      var europeanCountries = new carto.layer.Layer(europeanCountriesDataset, europeanCountriesStyle);
      // 3.2 Adding the layers to the client
      client.addLayer(europeanCountries);
      // 3.3. Adding the layers to the map
      client.getLeafletLayer().addTo(map);
    </script>
  </body>
</html>

Updated missing url https://cdn.rawgit.com/CartoDB/cartodb.js/@4.0.0-alpha.test2/carto.js to https://cdn.jsdelivr.net/gh/cartodb/cartodb.js/@4.0.0-alpha.test2/carto.js

https://unpkg.com/leaflet@1.2.0/dist/leaflet.js

https://cdn.rawgit.com/CartoDB/cartodb.js/@4.0.0-alpha.test2/carto.js