This map visualization shows how to add a click infowindow object with an image to a CartoDB map visualization using CartoDB.js.
Last active
July 29, 2016 19:08
-
-
Save michellechandra/71ba3954302495b2d147 to your computer and use it in GitHub Desktop.
CartoDB.js Click Infowindow Using CreateLayer
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>#DrawDisability</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" /> | |
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css" /> | |
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.js"></script> | |
<style> | |
html, body, #map { | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
} | |
div.cartodb-popup.v2 { | |
width: 180px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="map"></div> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
<script type="infowindow/html" id="infowindow_template"> | |
<div class="cartodb-popup v2"> | |
<div class="infowindow-custom"> | |
<a href="#close" class="cartodb-popup-close-button close">x</a> | |
<div class="cartodb-popup-content-wrapper"> | |
<div class="cartodb-popup-content"> | |
<img width="100%" src="{{content.data._url}}"></src> | |
<!-- content.data contains the field info --> | |
<h4>{{content.data.name}}, {{content.data.age}}, {{content.data.city}}, {{content.data.country}}</h4> | |
</div> | |
</div> | |
</div> | |
<div class="cartodb-popup-tip-container"></div> | |
</div> | |
</script> | |
<script> | |
function main() { | |
var map = L.map('map', { | |
zoomControl: true, | |
center: [0, 0], | |
zoom: 2, | |
search: true | |
}); | |
L.tileLayer('http://{s}.tile.stamen.com/watercolor/{z}/{x}/{y}.png', { | |
attribution: 'Stamen' | |
}).addTo(map); | |
cartodb.createLayer(map, 'https://team.cartodb.com/u/chandra/api/v2/viz/0249d564-6d3a-11e5-a49e-0e5db1731f59/viz.json', {tooltip: false}) | |
.addTo(map) | |
.on('done', function(layer) { | |
var visitLayer = layer.getSubLayer(0); | |
visitLayer.setInteraction(true); | |
cdb.vis.Vis.addInfowindow(map, layer.getSubLayer(0), ['name', 'age', 'city', 'country', '_url'], { | |
infowindowTemplate: $('#infowindow_template').html(), | |
templateType: 'mustache' | |
}); | |
}).on('error', function() { | |
console.log("some error occurred"); | |
}); | |
} | |
window.onload = main; | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment