Skip to content

Instantly share code, notes, and snippets.

Last active Apr 5, 2016
What would you like to do?
How to make a fixed infobox with CartoDB.js

This example wants to show how to display data from a layer into a fixed infobox (or sidebar/sidepanel). Much of the code is based on this Oriol's block.

<!DOCTYPE html>
<title>How to make a fixed infobox with CartoDB.js</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="shortcut icon" href="" />
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
/* set infobox styles */
background-color: #FFF!important;
color: #fdb462!important;
border-radius: 25px!important;
/* set styles to the div element with id= box */
position: absolute;
top: 20px;
left: 20px;
width: 200px;
height: 360px;
opacity: 0.9;
padding: 5px 10px 5px 10px;
border-radius: 25px;
background-color: #FFF;
color: #fdb462;
/* set styles to the <h4> tag of the element with id= box */
#box h4{
font-style: italic;
/* set styles to the <p> tag of the element with id= box */
#box p{
text-align: center;
font-size: 18px;
/* change legend's position and style */
right: 20px;
bottom: 50px!important;
width: 90px;
height: auto;
background-color: #FFF;
opacity: 1;
border-radius: 25px!important;
.cartodb-legend ul li{
margin-left: 5px!important;
font-style: italic!important;
font-size: 10px!important;
<!-- include cartodb.js CSS library -->
<link rel="stylesheet" href="" />
<!-- include cartodb.js library -->
<script src=""></script>
<div id="map"></div>
<div id ="box">
<p id="lat">Click on point</p>
<p id="lon">Click on point</p>
<p id="city">Click on point</p>
<h4>Max. Population</h4>
<p id="pop">Click on point</p>
<!-- Create a custom legend -->
<div class='cartodb-legend category'>
<div class="legend-title" style="color:#284a59">Countries</div>
<li><div class="bullet" style="background-color:#fbb4ae"></div>Spain</li>
<li><div class="bullet" style="background-color:#ccebc5"></div>Portugal</li>
<li><div class="bullet" style="background-color:#b3cde3"></div>France</li>
function addCursorInteraction(layer) {
var hovers = [];
layer.bind('featureOver', function(e, latlon, pxPos, data, layer) {
hovers[layer] = 1;
if(_.any(hovers)) {
$('#map').css('cursor', 'pointer');
layer.bind('featureOut', function(m, layer) {
hovers[layer] = 0;
if(!_.any(hovers)) {
$('#map').css('cursor', 'auto');
function main() {
var lat;
var lon;
var city;
var pop;
// define map object
var map = new L.Map('map', {
zoomControl: false,
center: [40, 0],
zoom: 4
/* Define CartoDB layer with createLayer(). More information here: */
cartodb.createLayer(map, {
user_name: 'oboix',
type: 'cartodb',
sublayers: [
type: "http",
urlTemplate: "http://{s}{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
type: "mapnik",
sql: 'select * from populated_places_spf',
cartocss: '#populated_places_spf[adm0name = "Spain"]{ marker-fill: #fbb4ae; marker-allow-overlap: true;}#populated_places_spf[adm0name = "Portugal"]{ marker-fill: #ccebc5; marker-allow-overlap: true;}#populated_places_spf[adm0name = "France"]{ marker-fill: #b3cde3; marker-allow-overlap: true;}',
interactivity: ['cartodb_id','adm0name','name','pop_max']
type: "http",
urlTemplate: "http://{s}{z}/{x}/{y}.png",
subdomains: [ "a", "b", "c" ]
.addTo(map) // add cartodb layer and basemap to map object
.done(function(layer) {
/*Once that the basemap and cartodb layer are added....*/
/* Enable mouse events with CartoDB layers */
// 1- Set CartoDB layer interaction
// 2- Custom click event on CartoDB layers
lat = (latlng[0]).toFixed(2) // show latitude of clicked point in the console
lon = (latlng[1]).toFixed(2) // show longitude of clicked point in the console
city = // show city name of clicked point in the console
pop = data.pop_max // show max. population of clicked point in the console
// 3- Add coordinates, name and max. pop. of the selected geometry in the div element
// with id = "box"
document.getElementById("lat").innerHTML = lat;
document.getElementById("lon").innerHTML = lon;
document.getElementById("city").innerHTML = city;
document.getElementById("pop").innerHTML = pop;
window.onload = main;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment