Last active
March 7, 2023 03:21
-
-
Save datapolitan/0149dc34e88ff647556c to your computer and use it in GitHub Desktop.
A snippet for creating a map with multiple layers in CartoDB
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
// 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: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <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