ramiroaznar · July 18, 2018 11:17
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Click on button to open a Leaflet popup | CARTO.s v4.1</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <!-- Include jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Include Leaflet -->
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
    <!-- Include CARTO.js -->
    <script src="https://libs.cartocdn.com/carto.js/v4.1.0/carto.min.js"></script>
    <!-- Include AXIOS -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
      }
      body, *{ margin: 0; padding: 0; }
      #map {
        position: absolute;
        height: 100%;
        width: 100%;
        z-index: 0;
      }
      button{
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 999;
        width: 100px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>

    <button>Madrid</button>

    <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: 'y8kDqEnbt5OY0A133UE4DQ',
        username: 'ramirocartodb'
        });

        const source = new carto.source.Dataset(`populated_places`);
        const style = new carto.style.CartoCSS(`
            #layer {
            marker-width: 7;
            marker-fill: #EE4D5A;
            marker-line-color: #FFFFFF;
            }
        `);
        const layer = new carto.layer.Layer(source, style);

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

        const $button = $('button');
            
        /* create an axios client to the SQL API */
        const API_KEY = 'y8kDqEnbt5OY0A133UE4DQ',
                USER_NAME = 'ramirocartodb',
                SQL_CLIENT = axios.create({
                    method: 'get',
                    url: 'https://' + USER_NAME + '.carto.com/api/v2/sql?',
                    params: {
                        api_key: API_KEY
                    }
                });

        $button.on('click', function(){

            let city = $button.text()
            console.log(city);

            /* make a request and put callbacks for success and error events */
            SQL_CLIENT.request({
                    params: {
                        q: `SELECT * FROM populated_places where name = '${city}'`
                    },
                })
                .then(function (response) {
                    if (response && response.data) {
                        data = response.data;
                        console.log(data);
                        lat = data.rows[0].latitude;
                        long = data.rows[0].longitude;
                        coords = [lat, long];
                        pop = data.rows[0].pop_max;
                        country = data.rows[0].adm0name;
                        console.log(coords, pop, country);
                        
                        let popup = L.popup({ closeButton: true });
                        popup.setLatLng(coords);
                        popup.setContent(`
                            <h1 style="font-size: 14px; font-weight: bold;"> ${city} </h1>
                            <h3 style="font-size: 12px;"> ${country} </h3>
                            <p style="font-size: 12px;"> ${pop} inhabitants</p>
                        `);
                        popup.openOn(map);

                    } else {
                        alert('Check the console, something happened');
                    }
                })
                .catch(function (error) {
                    alert('Check the console, something happened');
                    console.log(error);
                });

        });

        </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Click on button to open a Leaflet popup \| CARTO.s v4.1</title>
	<meta name="viewport" content="initial-scale=1.0">
	<meta charset="utf-8">
	<!-- Include jQuery -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- Include Leaflet -->
	<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
	<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet">
	<!-- Include CARTO.js -->
	<script src="https://libs.cartocdn.com/carto.js/v4.1.0/carto.min.js"></script>
	<!-- Include AXIOS -->
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<style>
	* {
	box-sizing: border-box;
	}
	body, *{ margin: 0; padding: 0; }
	#map {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 0;
	}
	button{
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 999;
	width: 100px;
	height: 50px;
	}
	</style>
	</head>
	<body>
	<div id="map"></div>

	<button>Madrid</button>

	<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: 'y8kDqEnbt5OY0A133UE4DQ',
	username: 'ramirocartodb'
	});

	const source = new carto.source.Dataset(`populated_places`);
	const style = new carto.style.CartoCSS(`
	#layer {
	marker-width: 7;
	marker-fill: #EE4D5A;
	marker-line-color: #FFFFFF;
	}
	`);
	const layer = new carto.layer.Layer(source, style);

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

	const $button = $('button');

	/* create an axios client to the SQL API */
	const API_KEY = 'y8kDqEnbt5OY0A133UE4DQ',
	USER_NAME = 'ramirocartodb',
	SQL_CLIENT = axios.create({
	method: 'get',
	url: 'https://' + USER_NAME + '.carto.com/api/v2/sql?',
	params: {
	api_key: API_KEY
	}
	});

	$button.on('click', function(){

	let city = $button.text()
	console.log(city);

	/* make a request and put callbacks for success and error events */
	SQL_CLIENT.request({
	params: {
	q: `SELECT * FROM populated_places where name = '${city}'`
	},
	})
	.then(function (response) {
	if (response && response.data) {
	data = response.data;
	console.log(data);
	lat = data.rows[0].latitude;
	long = data.rows[0].longitude;
	coords = [lat, long];
	pop = data.rows[0].pop_max;
	country = data.rows[0].adm0name;
	console.log(coords, pop, country);

	let popup = L.popup({ closeButton: true });
	popup.setLatLng(coords);
	popup.setContent(`
	<h1 style="font-size: 14px; font-weight: bold;"> ${city} </h1>
	<h3 style="font-size: 12px;"> ${country} </h3>
	<p style="font-size: 12px;"> ${pop} inhabitants</p>
	`);
	popup.openOn(map);

	} else {
	alert('Check the console, something happened');
	}
	})
	.catch(function (error) {
	alert('Check the console, something happened');
	console.log(error);
	});

	});

	</script>
	</body>
	</html>