Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Creating sublayers
<!DOCTYPE html>
<html><head>
<!-- saved from url=(0093)http://cartodb.github.io/cartodb.js/examples/tutorials/tutorial-toggle_map_view-template.html -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.11/themes/css/cartodb.css">
<script src="./tutorial-toggle_map_view-template_files/cartodb.js"></script><style></style>
<style>
html, body {width:100%; height:100%; padding: 0; margin: 0;}
#map { width: 100%; height:100%; background: black;}
#menu { position: absolute; top: 5px; right: 10px; width: 400px; height:60px; background: transparent; z-index:10;}
#menu a {
margin: 15px 10px 0 0;
float: right;
vertical-align: baseline;
width: 70px;
padding: 10px;
text-align: center;
font: bold 11px "Helvetica",Arial;
line-height: normal;
color: #555;
border-radius: 4px;
border: 1px solid #777777;
background: #ffffff;
text-decoration: none;
cursor: pointer;
}
#menu a.selected,
#menu a:hover {
color: #F84F40;
}
</style>
<script>
var map;
function init(){
// initiate leaflet map
map = new L.Map('map', {
center: [20,-20],
zoom: 3
})
L.tileLayer('https://dnv9my2eseobd.cloudfront.net/v3/cartodb.map-4xtxp73f/{z}/{x}/{y}.png', {
attribution: 'Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a>'
}).addTo(map);
var layerUrl = 'http://documentation.cartodb.com/api/v2/viz/9af23dd8-ea10-11e2-b5ac-5404a6a683d5/viz.json';
var theLayer;
var sublayers = [];
cartodb.createLayer(map, layerUrl)
.addTo(map)
.on('done', function(layer) {
theLayer = layer;
// change the query for the first layer
var subLayerOptions = {
sql: "SELECT * FROM ne_10m_populated_places_simple",
cartocss: "#ne_10m_populated_places_simple{marker-fill: #F84F40; marker-width: 8; marker-line-color: white; marker-line-width: 2; marker-clip: false; marker-allow-overlap: true;}"
}
var sublayer = layer.getSubLayer(0);
sublayer.set(subLayerOptions);
sublayers.push(sublayer);
}).on('error', function() {
//log the error
});
//we define the queries that will be performed when we click on the buttons, by modifying the SQL of our layer
var LayerActions = {
all: function(){
sublayers[0].setSQL("SELECT * FROM ne_10m_populated_places_simple");
return true;
},
capitals: function(){
sublayers[0].setSQL("SELECT * FROM ne_10m_populated_places_simple WHERE featurecla = 'Admin-0 capital'");
theLayer.createSubLayer({
sql: "SELECT * FROM ne_10m_populated_places_simple WHERE megacity = 1",
cartocss: '#table_name {marker-fill: #F00000;}'
});
return true;
},
megacities: function() {
sublayers[0].set({
sql: "SELECT * FROM ne_10m_populated_places_simple WHERE megacity = 1",
//as it is said, you can also add some CartoCSS code to make your points look like you want for the different queries
// cartocss: "#ne_10m_populated_places_simple{ marker-fill: black; }"
});
return true;
}
}
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).addClass('selected');
//this gets the id of the different buttons and calls to LayerActions which responds according to the selected id
LayerActions[$(this).attr('id')]();
});
}
</script>
</head>
<body onload="init()" data-feedly-mini="yes" cz-shortcut-listen="true">
<div id="map" class="leaflet-container leaflet-fade-anim" tabindex="0" style="position: relative;"><div class="leaflet-map-pane" style="transform: translate3d(0px, 0px, 0px);"><div class="leaflet-tile-pane"><div class="leaflet-layer"><div class="leaflet-tile-container"></div><div class="leaflet-tile-container leaflet-zoom-animated"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3.png" style="height: 256px; width: 256px; left: 578px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4.png" style="height: 256px; width: 256px; left: 578px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(1).png" style="height: 256px; width: 256px; left: 834px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2.png" style="height: 256px; width: 256px; left: 578px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(2).png" style="height: 256px; width: 256px; left: 322px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(1).png" style="height: 256px; width: 256px; left: 322px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(1).png" style="height: 256px; width: 256px; left: 322px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(2).png" style="height: 256px; width: 256px; left: 834px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(2).png" style="height: 256px; width: 256px; left: 834px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(3).png" style="height: 256px; width: 256px; left: 1090px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5.png" style="height: 256px; width: 256px; left: 578px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(4).png" style="height: 256px; width: 256px; left: 66px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1.png" style="height: 256px; width: 256px; left: 578px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(1).png" style="height: 256px; width: 256px; left: 322px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(3).png" style="height: 256px; width: 256px; left: 66px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(4).png" style="height: 256px; width: 256px; left: 1090px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(3).png" style="height: 256px; width: 256px; left: 1090px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(4).png" style="height: 256px; width: 256px; left: 66px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(1).png" style="height: 256px; width: 256px; left: 834px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(2).png" style="height: 256px; width: 256px; left: 834px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(2).png" style="height: 256px; width: 256px; left: 322px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(3).png" style="height: 256px; width: 256px; left: 66px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(3).png" style="height: 256px; width: 256px; left: 1090px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(4).png" style="height: 256px; width: 256px; left: 1090px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(4).png" style="height: 256px; width: 256px; left: 66px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(5).png" style="height: 256px; width: 256px; left: 1346px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/3(6).png" style="height: 256px; width: 256px; left: -190px; top: 467px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(5).png" style="height: 256px; width: 256px; left: -190px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/4(6).png" style="height: 256px; width: 256px; left: 1346px; top: 723px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(5).png" style="height: 256px; width: 256px; left: 1346px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/2(6).png" style="height: 256px; width: 256px; left: -190px; top: 211px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(5).png" style="height: 256px; width: 256px; left: -190px; top: 979px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(5).png" style="height: 256px; width: 256px; left: 1346px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/1(6).png" style="height: 256px; width: 256px; left: -190px; top: -45px;"><img class="leaflet-tile leaflet-tile-loaded" src="./tutorial-toggle_map_view-template_files/5(6).png" style="height: 256px; width: 256px; left: 1346px; top: 979px;"></div></div></div><div class="leaflet-objects-pane"><div class="leaflet-shadow-pane"></div><div class="leaflet-overlay-pane"></div><div class="leaflet-marker-pane"></div><div class="leaflet-popup-pane"></div></div></div><div class="leaflet-control-container"><div class="leaflet-top leaflet-left"><div class="leaflet-control-zoom leaflet-bar leaflet-control"><a class="leaflet-control-zoom-in" href="http://cartodb.github.io/cartodb.js/examples/tutorials/tutorial-toggle_map_view-template.html#" title="Zoom in">+</a><a class="leaflet-control-zoom-out" href="http://cartodb.github.io/cartodb.js/examples/tutorials/tutorial-toggle_map_view-template.html#" title="Zoom out">-</a></div></div><div class="leaflet-top leaflet-right"></div><div class="leaflet-bottom leaflet-left"></div><div class="leaflet-bottom leaflet-right"><div class="leaflet-control-attribution leaflet-control"><a href="http://leafletjs.com/" title="A JS library for interactive maps">Leaflet</a> | Mapbox <a href="http://mapbox.com/about/maps" target="_blank">Terms &amp; Feedback</a></div></div></div></div>
<div id="menu">
<a href="#megacities" id="megacities" class="button megacities">MEGACITIES</a>
<a href="#capitals" id="capitals" class="button capitals">CAPITALS</a>
<a href="#all" id="all" class="button all">ALL CITIES</a>
</div>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.