xavijam/.block

## .block
license: mit
border: no
scrolling: yes

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: My first CARTO.js map

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CARTO.js Single layer example</title>
    <!-- Include Leaflet 1.2.0 Library -->
    <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>
    <!-- Include CARTO.js Library -->
    <script src="https://cdn.rawgit.com/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="http://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="http://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>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CARTO.js Single layer example</title>
	<!-- Include Leaflet 1.2.0 Library -->
	<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>
	<!-- Include CARTO.js Library -->
	<script src="https://cdn.rawgit.com/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: '©<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©<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: '©<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, ©<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>