Created
November 3, 2015 15:03
-
-
Save oriolbx/895ae296f12df15bf4da to your computer and use it in GitHub Desktop.
Custom tooltip/ hover infowindow
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Custom tooltip/ hover infowindow</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="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script> | |
<style> | |
html, body,#map { | |
width:100%; | |
height:100%; | |
padding: 0; | |
margin: 0; | |
} | |
.cartodb-tooltip{ | |
width: 300px; | |
max-width: none!important; | |
border-radius: 25px; | |
} | |
div.cartodb-tooltip-content-wrapper{ | |
padding: 20px; | |
color: #000; | |
max-width:none; | |
background-color: #c3e2d0; | |
} | |
div.cartodb-tooltip-content-wrapper img{ | |
width: 100px; | |
position: relative; | |
left: 70px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id='map'></div> | |
<script type="text/javascript"> | |
function main() { | |
var map; | |
// center and zoom level | |
var options = { | |
center: [20, 20], | |
zoom: 2, | |
}; | |
var map_object = new L.Map('map', options); | |
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' | |
}).addTo(map_object); | |
cartodb.createLayer(map_object, 'https://team.cartodb.com/u/oboix/api/v2/viz/4483a4f8-62c9-11e5-b426-0e0c41326911/viz.json') | |
.addTo(map_object) | |
.on('done', function(layer) { | |
layer.setZIndex(100); | |
var sublayer = layer.getSubLayer(0); | |
sublayer.setInteractivity('cartodb_id,name, area'); | |
// tooltip definition with createLayer | |
var testTooltip = layer.leafletMap.viz.addOverlay({ | |
type: 'tooltip', | |
layer: sublayer, | |
template: '<div class="cartodb-tooltip-content-wrapper"><h3>Country:</h3><p>{{name}}</p><h3>Area:</h3><p>{{area}}</p><img src="https://cartodb-libs.global.ssl.fastly.net/cartodb.com/static/logos_cartofant_cartodb_light.png"></img></div>', | |
width: 200, | |
position: 'bottom|right', | |
fields: [{ name: 'name', area:'area' }] | |
}); | |
$('body').append(testTooltip.render().el); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment