Skip to content

Instantly share code, notes, and snippets.

@ramiroaznar

ramiroaznar/README.md

Last active April 5, 2016 13:53
Show Gist options
  • Save ramiroaznar/56e28cabc9cad4c9af0f to your computer and use it in GitHub Desktop.
Save ramiroaznar/56e28cabc9cad4c9af0f to your computer and use it in GitHub Desktop.
Download ZIP
How to make a fixed infobox with CartoDB.js
Raw
README.md

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.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<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="http://cartodb.com/assets/favicon.ico" />
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
/* set infobox styles */
.cartodb-infobox{
opacity:0.9;
background-color: #FFF!important;
color: #fdb462!important;
border-radius: 25px!important;
}
/* set styles to the div element with id= box */
#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;
color:red;
}
/* change legend's position and style */
.cartodb-legend{
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;
}
</style>
<!-- include cartodb.js CSS library -->
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
</head>
<body>
<div id="map"></div>
<div id ="box">
<h4>Latitude</h4>
<p id="lat">Click on point</p>
<h4>Longitude</h4>
<p id="lon">Click on point</p>
<h4>City</h4>
<p id="city">Click on point</p>
<h4>Max. Population</h4>
<p id="pop">Click on point</p>
</div>
<!-- Create a custom legend -->
<div class='cartodb-legend category'>
<div class="legend-title" style="color:#284a59">Countries</div>
<ul>
<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>
</ul>
</div>
<script>
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:
http://docs.cartodb.com/cartodb-platform/cartodb-js/api-methods/#cartodbcreatelayermap-layersource--options--callback */
cartodb.createLayer(map, {
user_name: 'oboix',
type: 'cartodb',
sublayers: [
{
type: "http",
urlTemplate: "http://{s}.basemaps.cartocdn.com/dark_nolabels/{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}.basemaps.cartocdn.com/dark_only_labels/{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
layer.setInteraction(true);
addCursorInteraction(layer);
// 2- Custom click event on CartoDB layers
layer.on('featureClick',function(e,latlng,pos,data){
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 = data.name // 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;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment