71 lines
2.4 KiB
HTML
71 lines
2.4 KiB
HTML
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/themes/css/cartodb.css" />
|
|
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.12/cartodb.js"></script>
|
|
<style>
|
|
html, body {width:100%; height:100%; padding: 0; margin: 0;}
|
|
#cartodb-map { width: 100%; height:100%; background: black;}
|
|
</style>
|
|
|
|
<script type="infowindow/html" id="infowindow_template">
|
|
<div class="cartodb-popup">
|
|
<a href="#close" class="cartodb-popup-close-button close">x</a>
|
|
<div class="cartodb-popup-content-wrapper">
|
|
<div class="cartodb-popup-header">
|
|
<img style="width: 100%" src="http://cartodb.com/assets/logos/logos_full_cartodb_light.png"></src>
|
|
</div>
|
|
<div class="cartodb-popup-content">
|
|
<!-- content.data contains the field info -->
|
|
<h4>City: </h4>
|
|
<p>{{content.data.name}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="cartodb-popup-tip-container"></div>
|
|
</div>
|
|
</script>
|
|
|
|
<script>
|
|
var map;
|
|
function init(){
|
|
// initiate leaflet map
|
|
map = new L.Map('cartodb-map', {
|
|
center: [40,-98],
|
|
zoom: 4
|
|
})
|
|
|
|
L.tileLayer('http://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
|
|
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms & Feedback</a>'
|
|
}).addTo(map);
|
|
|
|
var layerUrl = 'https://documentation.cartodb.com/api/v2/viz/236085de-ea08-11e2-958c-5404a6a683d5/viz.json';
|
|
|
|
cartodb.createLayer(map, layerUrl)
|
|
.addTo(map)
|
|
.on('done', function(layer) {
|
|
// change the query for the first layer
|
|
var subLayerOptions = {
|
|
sql: "SELECT * FROM example_cartodbjs_1 where pop_other::float > 1000000",
|
|
cartocss: "#example_cartodbjs_1{marker-fill: #109DCD; marker-width: 5; marker-line-color: white; marker-line-width: 0;}"
|
|
}
|
|
|
|
var sublayer = layer.getSubLayer(0);
|
|
|
|
sublayer.set(subLayerOptions);
|
|
sublayer.infowindow.set('template', $('#infowindow_template').html());
|
|
|
|
sublayer.on('featureClick', function(e, latlng, pos, data) {
|
|
alert("Hey! You clicked " + data.cartodb_id);
|
|
});
|
|
}).on('error', function() {
|
|
//log the error
|
|
});
|
|
}
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body onload="init()">
|
|
<div id='cartodb-map'></div>
|
|
</body>
|
|
</html>
|