ramiroaznar/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Feature over/out + popup | CARTO.s v4.1</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://libs.cartocdn.com/carto.js/v4.1.0/carto.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
      }
      body, *{ margin: 0; padding: 0; }
      #map {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <script>
        const map = L.map('map').setView([30, 0], 3);
        map.scrollWheelZoom.disable();

        L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
        maxZoom: 18
        }).addTo(map);

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

        const source = new carto.source.Dataset(`
        ne_10m_populated_places_simple
        `);
        const style = new carto.style.CartoCSS(`
        #layer {
            marker-width: 10;
            marker-fill: #EE4D5A;
            marker-line-color: #FFFFFF;
        }
        `);
        const layer = new carto.layer.Layer(source, style, {
        featureOverColumns: ['name', 'pop_max', 'adm0name']
        });

        client.addLayer(layer);
        client.getLeafletLayer().addTo(map);


        const popup = L.popup({ closeButton: false });

        layer.on('featureOver', function (featureEvent) {
            popup.setLatLng(featureEvent.latLng);
            let name = featureEvent.data.name;
            let population = featureEvent.data.pop_max;
            let country = featureEvent.data.adm0name;
            popup.setContent(`
                <h1 style="font-size: 14px; font-weight: bold;"> ${name} </h1>
                <h3 style="font-size: 12px;"> ${country} </h3>
                <p style="font-size: 12px;"> ${population} inhabitants</p>
            `);
            popup.openOn(map);
        });

        layer.on('featureOut', function (featureEvent) {
            popup.removeFrom(map);
        });
        </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Feature over/out + popup \| CARTO.s v4.1</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://libs.cartocdn.com/carto.js/v4.1.0/carto.min.js"></script>
	<style>
	* {
	box-sizing: border-box;
	}
	body, *{ margin: 0; padding: 0; }
	#map {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 0;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<script>
	const map = L.map('map').setView([30, 0], 3);
	map.scrollWheelZoom.disable();

	L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}.png', {
	maxZoom: 18
	}).addTo(map);

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

	const source = new carto.source.Dataset(`
	ne_10m_populated_places_simple
	`);
	const style = new carto.style.CartoCSS(`
	#layer {
	marker-width: 10;
	marker-fill: #EE4D5A;
	marker-line-color: #FFFFFF;
	}
	`);
	const layer = new carto.layer.Layer(source, style, {
	featureOverColumns: ['name', 'pop_max', 'adm0name']
	});

	client.addLayer(layer);
	client.getLeafletLayer().addTo(map);


	const popup = L.popup({ closeButton: false });

	layer.on('featureOver', function (featureEvent) {
	popup.setLatLng(featureEvent.latLng);
	let name = featureEvent.data.name;
	let population = featureEvent.data.pop_max;
	let country = featureEvent.data.adm0name;
	popup.setContent(`
	<h1 style="font-size: 14px; font-weight: bold;"> ${name} </h1>
	<h3 style="font-size: 12px;"> ${country} </h3>
	<p style="font-size: 12px;"> ${population} inhabitants</p>
	`);
	popup.openOn(map);
	});

	layer.on('featureOut', function (featureEvent) {
	popup.removeFrom(map);
	});
	</script>
	</body>
	</html>