Skip to content

Instantly share code, notes, and snippets.

@Xatpy

Xatpy/index.html

Last active August 29, 2015 14:11
Show Gist options
  • Save Xatpy/b920a662e3e6e05f6a17 to your computer and use it in GitHub Desktop.
Save Xatpy/b920a662e3e6e05f6a17 to your computer and use it in GitHub Desktop.
Download ZIP
Tooltips custom (max. population)
Raw
index.html
<!DOCTYPE html">
<html>
<head>
<title>
Tooltips | CartoDB
</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 type="text/css">
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
</style>
<link rel="stylesheet" href=
"http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" type="text/css">
</head>
<body>
<div id="map"></div>
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js" type="text/javascript"></script>
<script type="text/javascript">
function main() {
// Initiate Leaflet Map
map = new L.Map('map', {
zoomControl: true,
center: [39.35129035526705, -97.97607421875],
zoom: 5
});
dataLayer = null;
// Add a baselayer to the map
L.tileLayer('https://cartocdn_{s}.global.ssl.fastly.net/base-midnight/{z}/{x}/{y}.png').addTo(map);
cartodb.createLayer(map, 'http://team.cartodb.com/api/v2/viz/cbde4208-6b41-11e4-8819-0e9d821ea90d/viz.json', {
})
.addTo(map)
.on('done', function(layer) {
layer.tooltip.el.style.maxWidth = '100%';
layer.getLayer(0).tooltip.template = '<div class="cartodb-tooltip-content-wrapper"><div class="cartodb-tooltip-content" style="text-align: center;"><b>Name:</b> {{name}} <br> <b>Pop.max:</b> {{pop_max}} <br> <img src="http://ona13.journalists.org/wp-content/uploads/2013/10/cartodb1-300x297.png"></img></div></div>';
})
.on('error', function() {
console.log("some error occurred");
});
}
window.onload = main;
</script>
</body>
</html>
Raw
thumbnail.png
updating with vizjson
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment