Skip to content

Instantly share code, notes, and snippets.

@oriolbx
Last active January 18, 2016 12:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save oriolbx/688c63b865e7045e9f90 to your computer and use it in GitHub Desktop.
Save oriolbx/688c63b865e7045e9f90 to your computer and use it in GitHub Desktop.
cartodb.js: named maps, toggle layers and hover infowindow
{
"version": "0.0.1",
"name": "toggle_named_maps_multilayer",
"auth": {
"method": "open"
},
"placeholders" : {
"layer0": {
"type": "number",
"default": 1
},
"layer1": {
"type": "number",
"default": 1
},
"layer2": {
"type": "number",
"default": 1
}
},
"layergroup": {
"version": "1.0.1",
"layers": [
{
"type": "cartodb",
"options": {
"cartocss_version": "2.1.1",
"cartocss": "#european_1_copy{polygon-fill: #FF6600;polygon-opacity: 0.7;line-color: #FFF;line-width: 0.5;line-opacity: 1;}",
"sql": " SELECT * FROM european_1_copy where <%= layer0 %> = 1",
"interactivity": ["cartodb_id", "admin"]
}
},
{
"type": "cartodb",
"options": {
"cartocss_version": "2.1.1",
"cartocss": "#world_borders_hd{polygon-fill: #136400;polygon-opacity: 1;line-color: #FFF;line-width: 0.5;line-opacity: 1;}",
"sql": "SELECT * FROM world_borders_hd where <%= layer1 %> = 1"
}
},
{
"type": "cartodb",
"options": {
"cartocss_version": "2.1.1",
"cartocss": "#world_borders_hd{polygon-fill: #FF0000;polygon-opacity: 1;line-color: #FFF;line-width: 0.5;line-opacity: 1;}",
"sql": "SELECT * FROM world_borders_hd where <%= layer2 %> = 1 AND cartodb_id = 43"
}
}
]
}
}
<!DOCTYPE html>
<html>
<head>
<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>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
.buttons {
height: 50px;
width: 100px;
background: rgba(0,255,255,0.8);
position: absolute;
top: 20px;
right: 20px;
padding: 5px;
border: 1px solid #FFF;
border-radius: 5px;
cursor: pointer;
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.15/themes/css/cartodb.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" />
<![endif]-->
</head>
<body>
<div id="map"></div>
<div id="layer0" class="buttons" data="0">Show/hide Europe</div>
<div id="layer1" class="buttons" data="1" style="top: 102px; background: rgba(0,255,0,0.8);">Show/hide World</div>
<div id="layer1" class="buttons" data="2" style="top: 160px; background: rgba(255,0,0,0.8);">Show/hide China</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.15/cartodb.js"></script>
<script>
function main() {
// create leaflet map
var map = L.map('map', {
zoomControl: false,
scrollWheelZoom: false,
center: [43, 0],
zoomControl: true,
zoom: 2
})
// add a base layer
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
var namedLayerSource = {
user_name: 'oboix',
type: 'namedmap',
named_map: {
name: "toggle_named_maps_multilayer",
layers: [{
layer_name: "europe"
},
{
layer_name: "world"
},
{
layer_name: "world_1"
}
]
}
}
// add cartodb layer with one sublayer
cartodb.createLayer(map, namedLayerSource)
.addTo(map)
.done(function(layer) {
// Enable interactions events for all sublayers
for (var i = 0; i < layer.getSubLayerCount(); ++i ) {
layer.getSubLayer(i).on('featureOver', function(e, pos, pixel, data) {
console.log("Event #" + data.cartodb_id + ", name " + data.admin);
});
// infowindow
cdb.vis.Vis.addInfowindow(map,layer.getSubLayer(i),['cartodb_id','name']);
// tooltip definition with createLayer
var testTooltip = layer.leafletMap.viz.addOverlay({
type: 'tooltip',
layer: layer.getSubLayer(i),
template: '<div class="cartodb-tooltip-content-wrapper"><p>{{cartodb_id}}</p></div>',
width: 200,
position: 'bottom|right',
fields: [{ name: 'cartodb_id' }]
});
$('body').append(testTooltip.render().el);
}
console.log(layer.getSubLayerCount());
var toggle = false;
$(".buttons").on('click', function(e) {
var layerNum = $(e.target).attr('data');
toggle = layer.getSubLayer(layerNum).toggle();
console.log("layer " + layerNum + " toggled: " + toggle);
});
})
.error(function(err) {
console.log("error: " + err);
});
}
window.onload = main;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment