elenatorro/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <title>Change Projection | CARTO</title>
  <meta name="viewport" content="initial-scale=1.0">
  <meta charset="utf-8">
  <!-- Include Leaflet -->
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
  <link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
  <!-- Include CARTO.js -->
  <script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.6/carto.min.js"></script>

  <style>
    #map {
      background-color: white;
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 0;
    }

    #projection-select {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 20px;
    }
  </style>

</head>

<body>
  <div id="map"></div>
  <select id="projection-select"></select>

  <script>
    const PROJECTIONS = {
      102005: 'USA Contiguous Equidistant Conic',
      102008: 'North America Albers Equal Area Conic',
      102016: 'North Pole Azimuthal Equidistant',
      102031: 'Europe Equidistant Conic',
      15070: 'NAD83 Conus Albers',
      42303: 'Albers Conic Equal Area',
      54024: 'World Bonne',
      54030: 'Robinson',
      953027: 'Sphere Equidistant Conic',
      953027: 'Sphere Equidistant Conic'
    }

    const $projectionSelect = document.getElementById('projection-select');

    for (var projection in PROJECTIONS) {
      var $option = document.createElement('option');
      $projectionSelect.appendChild($option);
      $option.setAttribute('value', projection);
      $option.innerText = PROJECTIONS[projection];
    };

    const map = L.map('map', {
      maxBounds: [
        [-90, -100],
        [90, 100]
      ],
      noWrap: true,
      minZoom: 1
    }).setView([0, 0], 2);

    map.scrollWheelZoom.disable();

    const client = new carto.Client({
      apiKey: 'default_public',
      username: 'elena-carto'
    });

    const generateLayers = function(projectionCode) {
      const oceanSQL = new carto.source.SQL(
        `SELECT cartodb_id, the_geom, ST_Transform(the_geom_webmercator, ${projectionCode}) as the_geom_webmercator, scalerank, featurecla, created_at, updated_at FROM ne_50m_ocean`
      );

      const landSQL = new carto.source.SQL(
        `SELECT cartodb_id, the_geom, ST_Transform(the_geom_webmercator, ${projectionCode}) as the_geom_webmercator, scalerank, featurecla, created_at, updated_at FROM ne_50m_land`
      );

      const dataSQL = new carto.source.SQL(
        `SELECT ST_Transform(the_geom_webmercator, ${projectionCode}) as the_geom_webmercator, cartodb_id, the_geom, pop_2015, continent_name, country_code FROM world_population_by_continent`
      );

      const oceanStyle = new carto.style.CartoCSS(`
          #layer {
            polygon-fill: #9fdaf3;
            polygon-opacity: 1;
            line-width: 1;
            line-color: #FFF;
            line-opacity: 0.5;
          }
        `);

      const landStyle = new carto.style.CartoCSS(
        `
          #layer {
            polygon-fill: #FDF8E6;
            polygon-opacity: 0.9;
            line-width: 0.6;
            line-color: #7E6754;
            line-opacity: 0.7;
            polygon-comp-op: darken;
          }
        `
      );

      const dataStyle = new carto.style.CartoCSS(
        `
          #layer {
            marker-width: ramp([pop_2015], range(5, 35), jenks(5));
            marker-fill: ramp([continent_name], (#75445C, #AF6458, #D5A75B, #4C4E8F, #736F4C, #5b788e), category(6));
            marker-fill-opacity: 0.85;
            marker-allow-overlap: true;
            marker-line-width: 0;
            marker-line-color: #FFF;
            marker-line-opacity: 1;
          }
        `
      );

      const oceanLayer = new carto.layer.Layer(oceanSQL, oceanStyle);
      const dataLayer = new carto.layer.Layer(dataSQL, dataStyle);
      const landLayer = new carto.layer.Layer(landSQL, landStyle);

      client.addLayers([oceanLayer, landLayer, dataLayer]);
      client.getLeafletLayer().addTo(map);
    }

    const removeLayers = function() {
      var layersToRemove = client.getLayers();

      client.getLeafletLayer().removeFrom(map);
      return client.removeLayers(layersToRemove);
    }

    const getSelectedValue = function () {
      var selectedValue;

      $projectionSelect.childNodes.forEach(function (option) {
        if (option.selected) {
          selectedValue = option.value;
        }
      });

      return selectedValue;
    }

    var selectedValue = getSelectedValue();
    generateLayers(selectedValue);

    $projectionSelect.addEventListener('change', function(event) {
      var selectedValue = getSelectedValue();

      removeLayers()
        .then(function () {
          generateLayers(selectedValue);
        });
    })

  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Change Projection \| CARTO</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<!-- Include Leaflet -->
	<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
	<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet">
	<!-- Include CARTO.js -->
	<script src="https://cartodb-libs.global.ssl.fastly.net/carto.js/v4.0.6/carto.min.js"></script>

	<style>
	#map {
	background-color: white;
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 0;
	}

	#projection-select {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 20px;
	}
	</style>

	</head>

	<body>
	<div id="map"></div>
	<select id="projection-select"></select>

	<script>
	const PROJECTIONS = {
	102005: 'USA Contiguous Equidistant Conic',
	102008: 'North America Albers Equal Area Conic',
	102016: 'North Pole Azimuthal Equidistant',
	102031: 'Europe Equidistant Conic',
	15070: 'NAD83 Conus Albers',
	42303: 'Albers Conic Equal Area',
	54024: 'World Bonne',
	54030: 'Robinson',
	953027: 'Sphere Equidistant Conic',
	953027: 'Sphere Equidistant Conic'
	}

	const $projectionSelect = document.getElementById('projection-select');

	for (var projection in PROJECTIONS) {
	var $option = document.createElement('option');
	$projectionSelect.appendChild($option);
	$option.setAttribute('value', projection);
	$option.innerText = PROJECTIONS[projection];
	};

	const map = L.map('map', {
	maxBounds: [
	[-90, -100],
	[90, 100]
	],
	noWrap: true,
	minZoom: 1
	}).setView([0, 0], 2);

	map.scrollWheelZoom.disable();

	const client = new carto.Client({
	apiKey: 'default_public',
	username: 'elena-carto'
	});

	const generateLayers = function(projectionCode) {
	const oceanSQL = new carto.source.SQL(
	`SELECT cartodb_id, the_geom, ST_Transform(the_geom_webmercator, ${projectionCode}) as the_geom_webmercator, scalerank, featurecla, created_at, updated_at FROM ne_50m_ocean`
	);

	const landSQL = new carto.source.SQL(
	`SELECT cartodb_id, the_geom, ST_Transform(the_geom_webmercator, ${projectionCode}) as the_geom_webmercator, scalerank, featurecla, created_at, updated_at FROM ne_50m_land`
	);

	const dataSQL = new carto.source.SQL(
	`SELECT ST_Transform(the_geom_webmercator, ${projectionCode}) as the_geom_webmercator, cartodb_id, the_geom, pop_2015, continent_name, country_code FROM world_population_by_continent`
	);

	const oceanStyle = new carto.style.CartoCSS(`
	#layer {
	polygon-fill: #9fdaf3;
	polygon-opacity: 1;
	line-width: 1;
	line-color: #FFF;
	line-opacity: 0.5;
	}
	`);

	const landStyle = new carto.style.CartoCSS(
	`
	#layer {
	polygon-fill: #FDF8E6;
	polygon-opacity: 0.9;
	line-width: 0.6;
	line-color: #7E6754;
	line-opacity: 0.7;
	polygon-comp-op: darken;
	}
	`
	);

	const dataStyle = new carto.style.CartoCSS(
	`
	#layer {
	marker-width: ramp([pop_2015], range(5, 35), jenks(5));
	marker-fill: ramp([continent_name], (#75445C, #AF6458, #D5A75B, #4C4E8F, #736F4C, #5b788e), category(6));
	marker-fill-opacity: 0.85;
	marker-allow-overlap: true;
	marker-line-width: 0;
	marker-line-color: #FFF;
	marker-line-opacity: 1;
	}
	`
	);

	const oceanLayer = new carto.layer.Layer(oceanSQL, oceanStyle);
	const dataLayer = new carto.layer.Layer(dataSQL, dataStyle);
	const landLayer = new carto.layer.Layer(landSQL, landStyle);

	client.addLayers([oceanLayer, landLayer, dataLayer]);
	client.getLeafletLayer().addTo(map);
	}

	const removeLayers = function() {
	var layersToRemove = client.getLayers();

	client.getLeafletLayer().removeFrom(map);
	return client.removeLayers(layersToRemove);
	}

	const getSelectedValue = function () {
	var selectedValue;

	$projectionSelect.childNodes.forEach(function (option) {
	if (option.selected) {
	selectedValue = option.value;
	}
	});

	return selectedValue;
	}

	var selectedValue = getSelectedValue();
	generateLayers(selectedValue);

	$projectionSelect.addEventListener('change', function(event) {
	var selectedValue = getSelectedValue();

	removeLayers()
	.then(function () {
	generateLayers(selectedValue);
	});
	})

	</script>
	</body>

	</html>