Skip to content

Instantly share code, notes, and snippets.

@datapolitan
Last active March 7, 2023 03:21
Show Gist options
  • Save datapolitan/0149dc34e88ff647556c to your computer and use it in GitHub Desktop.
Save datapolitan/0149dc34e88ff647556c to your computer and use it in GitHub Desktop.
A snippet for creating a map with multiple layers in CartoDB
// the center point of the map on load. Change this to adjust the center point of the map.
var map_centerpoint = [40.712784, -74.005941];
// zoom level of the map on load. Higher number zooms the map in closer
var zoom_level = 11
// your visualization layer from CartoDB
var myVizLayer = 'https://richard-datapolitan.cartodb.com/api/v2/viz/c35e85b2-5370-11e5-b844-0e9d821ea90d/viz.json';
// the name of the CartoDB table you want to query against
var point_table_name = 'map_data_sgr';
var line_table_name = 'nyct_routes_1';
var sublayers=[];
////////// End of key parameters ///////////////
// create the map object
function init(){
var map = new L.Map('map', {
center: map_centerpoint, //center of map
zoom: zoom_level //zoom level of map
});
// initializes the basemap. This uses the basic positron background
var basemap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png',{
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);
var myLayer = cartodb.createLayer(map, myVizLayer)
.addTo(map)
.done(function(layer) {
for (var i = 0; i < layer.getSubLayerCount(); i++) {
sublayers[i] = layer.getSubLayer(i);
}
layer.setInteraction(true);
layer.on('error', function(err) {
console.log('error: ' + err);
});
});
} //end function init
init();
$(document).ready(function() {
$(".subway-route").click(function(event) {
var route = event.target.id;
var pt_sql,rt_sql;
if (route == 'reset'){
pt_sql = "SELECT * FROM " + point_table_name;
rt_sql = "SELECT * FROM " + line_table_name;
} else {
pt_sql = "SELECT * FROM " + point_table_name + " WHERE numbers_letters ILIKE '%" + route + "%'";
rt_sql = "SELECT * FROM " + line_table_name + " WHERE route_id ILIKE '%" + route + "%'";
};
// console.log(pt_sql);
sublayers[2].setSQL(pt_sql);
// console.log(rt_sql);
sublayers[0].setSQL(rt_sql);
sublayers[1].setSQL(rt_sql);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment