makella · November 4, 2019 22:17
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Equal Earth | CARTO</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="UTF-8">
  <script src="https://libs.cartocdn.com/carto-vl/v1.4.2/carto-vl.min.js"></script>
  <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
  <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
  <link href="https://carto.com/developers/carto-vl/v1.4.2/examples/maps/style.css" rel="stylesheet">
 </head>
 <body>
  <div id="map"></div>
    <aside class="toolbox">
      <div class="box">
        <header>
          <h1>Equal Earth Projection</h1>
        </header>
        <footer class="js-footer"></footer>
      </div>
    </aside>
    <div id="loader">
      <div class="CDB-LoaderIcon CDB-LoaderIcon--big">
        <svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
          <circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
        </svg>
      </div>
    </div>
  <script>
     const map = new mapboxgl.Map({
      container: 'map',
      style: {
        version: 8,
        sources: {},
        layers: [
          {
            id: 'background',
            type: 'background',
            paint: { 'background-color': 'white' }
          }
        ]
      },
      center: [-3.415697, 7.689874],
      zoom: 1.3,
      scrollZoom: true
    });
  

    const nav = new mapboxgl.NavigationControl({
      showCompass: false
    });
    map.addControl(nav, 'top-left');
    map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

    // Define user
    carto.setDefaultAuth({
      username: 'mamataakella',
      apiKey: 'default_public'
    });

    // Define layers
    const oceanSource = new carto.source.SQL(`
      SELECT the_geom, ST_Transform(the_geom, 8857) AS the_geom_webmercator, cartodb_id FROM ne_50m_ocean
    `);
    const oceanViz = new carto.Viz(`
       color: #c4d8d4
       strokeWidth: 0
    `);
    const oceanLayer = new carto.Layer('oceanLayer', oceanSource, oceanViz);

    const landSource = new carto.source.SQL(`
     SELECT the_geom, ST_Transform(the_geom, 8857) AS the_geom_webmercator, cartodb_id FROM ne_50m_land_1
    `);
    const landViz = new carto.Viz(`
      color: #8eb087
      strokeWidth: 0
    `);
    const landLayer = new carto.Layer('landLayer', landSource, landViz);

    landLayer.addTo(map);
    oceanLayer.addTo(map, 'landLayer');
    landLayer.on('loaded', hideLoader);

    function hideLoader() {
      document.getElementById('loader').style.opacity = '0';
    }
  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Equal Earth \| CARTO</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="UTF-8">
	<script src="https://libs.cartocdn.com/carto-vl/v1.4.2/carto-vl.min.js"></script>
	<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script>
	<link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" />
	<link href="https://carto.com/developers/carto-vl/v1.4.2/examples/maps/style.css" rel="stylesheet">
	</head>
	<body>
	<div id="map"></div>
	<aside class="toolbox">
	<div class="box">
	<header>
	<h1>Equal Earth Projection</h1>
	</header>
	<footer class="js-footer"></footer>
	</div>
	</aside>
	<div id="loader">
	<div class="CDB-LoaderIcon CDB-LoaderIcon--big">
	<svg class="CDB-LoaderIcon-spinner" viewBox="0 0 50 50">
	<circle class="CDB-LoaderIcon-path" cx="25" cy="25" r="20" fill="none"></circle>
	</svg>
	</div>
	</div>
	<script>
	const map = new mapboxgl.Map({
	container: 'map',
	style: {
	version: 8,
	sources: {},
	layers: [
	{
	id: 'background',
	type: 'background',
	paint: { 'background-color': 'white' }
	}
	]
	},
	center: [-3.415697, 7.689874],
	zoom: 1.3,
	scrollZoom: true
	});


	const nav = new mapboxgl.NavigationControl({
	showCompass: false
	});
	map.addControl(nav, 'top-left');
	map.addControl(new mapboxgl.FullscreenControl(), 'top-left');

	// Define user
	carto.setDefaultAuth({
	username: 'mamataakella',
	apiKey: 'default_public'
	});

	// Define layers
	const oceanSource = new carto.source.SQL(`
	SELECT the_geom, ST_Transform(the_geom, 8857) AS the_geom_webmercator, cartodb_id FROM ne_50m_ocean
	`);
	const oceanViz = new carto.Viz(`
	color: #c4d8d4
	strokeWidth: 0
	`);
	const oceanLayer = new carto.Layer('oceanLayer', oceanSource, oceanViz);

	const landSource = new carto.source.SQL(`
	SELECT the_geom, ST_Transform(the_geom, 8857) AS the_geom_webmercator, cartodb_id FROM ne_50m_land_1
	`);
	const landViz = new carto.Viz(`
	color: #8eb087
	strokeWidth: 0
	`);
	const landLayer = new carto.Layer('landLayer', landSource, landViz);

	landLayer.addTo(map);
	oceanLayer.addTo(map, 'landLayer');
	landLayer.on('loaded', hideLoader);

	function hideLoader() {
	document.getElementById('loader').style.opacity = '0';
	}
	</script>
	</body>
	</html>