71 lines
2.0 KiB
HTML
71 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Tooltip on hover with createLayer() | 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="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
|
|
<script src="https://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
|
|
|
|
<style>
|
|
html, body,#map {
|
|
width:100%;
|
|
height:100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<script type="tooltip/html" id="tooltip_template">
|
|
<div class="cartodb-tooltip-content-wrapper">
|
|
<div class="cartodb-tooltip-content">
|
|
<h3>Name</h3>
|
|
<p>{{name}}</p>
|
|
<h3>Population</h3>
|
|
<p>{{pop2005}}</p>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|
|
<div id='map'></div>
|
|
|
|
<script type="text/javascript">
|
|
function main() {
|
|
|
|
var map = new L.Map('map', {center: [20, 20], zoom: 2});
|
|
|
|
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution/">CartoDB</a>'
|
|
}).addTo(map);
|
|
|
|
cartodb.createLayer(map, 'http://documentation.cartodb.com/api/v2/viz/2b13c956-e7c1-11e2-806b-5404a6a683d5/viz.json')
|
|
.addTo(map)
|
|
.on('done', function(layer) {
|
|
//do stuff
|
|
var sublayer = layer.getSubLayer(0);
|
|
|
|
sublayer.setInteractivity('cartodb_id, name, pop2005');
|
|
|
|
// tooltip definition for createLayer()
|
|
var testTooltip = layer.leafletMap.viz.addOverlay({
|
|
type: 'tooltip',
|
|
layer: sublayer,
|
|
template: $('#tooltip_template').html(),
|
|
width: 200,
|
|
position: 'bottom|right',
|
|
fields: [{ name: 'name', population: 'pop2005' }]
|
|
});
|
|
$('body').append(testTooltip.render().el);
|
|
|
|
});
|
|
}
|
|
window.onload = main;
|
|
</script>
|
|
</body>
|
|
</html>
|