Skip to content

Instantly share code, notes, and snippets.

@clhenrick

clhenrick/index.html

Last active Aug 29, 2015
Embed
What would you like to do?
Example showing how to load layers in Cartodb and turn them on / off.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CartoDB.JS Demo</title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<style type="text/css">
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
ul {
position: absolute;
top: 5%; right: 5%;
}
li {
margin: -1px;
padding: 10px;
border: 1px solid #fff;
background: #000;
list-style: none;
font: bold 16pt helvetica;
color: #fff;
text-align: center;
letter-spacing: 1px;
}
a {
text-decoration: none;
color: #fff;
}
#bike-routes {
}
#truck-routes {
}
</style>
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" />
</head>
<body>
<div id="map"></div>
<div id="layer-control">
<ul>
<li id="bike-routes"><a href="#">Bicycle Routes</a></li>
<li id="truck-routes"><a href="#">Truck Routes</a></li>
</ul>
</div>
<!-- Javascripts -->
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<script type="text/javascript">
// set up the leaflet map object
var map = new L.Map('map', {
center: [40.7127, -74.0059],
zoom: 12
});
// variables to store cartodb layers in later
var bike_routes = null,
truck_routes = null;
/* add the Stamen Toner basemap layer */
L.tileLayer('http://tile.stamen.com/toner/{z}/{x}/{y}.png', {
attribution: 'Stamen'
}).addTo(map);
// instantiate some cartodb layers
var cartodbLayers = cartodb.createLayer(map, {
user_name: 'chenrick',
type: 'cartodb',
sublayers: [{
sql : 'SELECT * FROM nyc_bike_routes_4326',
cartocss : '#nyc_bike_routes_4326 { line-width: 2; line-color: #00a9ff; }'
}, {
sql : 'SELECT * FROM all_truck_routes_nyc_2011_april',
cartocss : '#all_truck_routes_nyc_2011_april { line-width: 2; line-color: #ff0098; }'
}]
})
.on('done', function(layer){
bike_routes = layer.getSubLayer(0); // assign the bike routes layer
truck_routes = layer.getSubLayer(1); // assign the truck routes layer
})
.addTo(map); // add them to the map
/* UI interaction*/
// state variable for layer visibility
var visible = {
bikes : true,
trucks : true
};
// bike button toggle
$('#bike-routes').on('click', function(e) {
if (visible.bikes){
bike_routes.hide();
visible.bikes = false;
} else if (!visible.bikes){
bike_routes.show();
visible.bikes = true;
}
return false;
});
// truck button toggle
$('#truck-routes').on('click', function(e) {
if (visible.trucks) {
truck_routes.hide();
visible.trucks = false;
} else if (!visible.trucks) {
truck_routes.show();
visible.trucks = true;
}
return false;
});
</script>
</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.