Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar
Created July 18, 2018 11:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ramiroaznar/5a5f50871a9257281e3cd40d47b61f3e to your computer and use it in GitHub Desktop.
Save ramiroaznar/5a5f50871a9257281e3cd40d47b61f3e to your computer and use it in GitHub Desktop.
Click on button to open a Leaflet popup | CARTO.s v4.1
<!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/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>
<!-- 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment