Skip to content

Instantly share code, notes, and snippets.

@andy-esch

andy-esch/index.html

Created August 19, 2015 22:10
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 andy-esch/e5e438b4e83a4c1d12e9 to your computer and use it in GitHub Desktop.
Save andy-esch/e5e438b4e83a4c1d12e9 to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB.js demo for Girl Develop It
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>
GDI BikeLane Demo
</title>
<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" />
<link rel="stylesheet" href="http://libs.cartocdn.com/cartodb.js/v3/3.14/themes/css/cartodb.css" type="text/css" />
<link rel="stylesheet" href="http://academy.cartodb.com/css/cdbui.css" type="text/css" />
<style type="text/css">
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#cartocss {
position: absolute;
top: 20px;
right: 20px;
}
#sql {
position: absolute;
top: 20px;
right: 292px;
}
.layer_selector {
background: rgba(255,255,255,0.9);
border-radius: 5px;
padding: 0;
border: 1px solid #999;
width: 250px;
}
.layer_selector > p {
padding: 15px 30px;
border-bottom: 1px solid #999;
}
.layer_selector ul {
padding: 0; margin: 0;
list-style-type: none;
}
.layer_selector li {
padding: 15px 30px;
font-family: Helvetica, Arial;
font-size: 13px;
color: #444;
cursor: pointer;
}
.layer_selector li:not(:last-child) {
border-bottom: 1px solid #999;
}
.layer_selector li:hover {
background-color: #F0F0F0;
cursor: pointer;
}
.layer_selector li.sql_selected,
.layer_selector li.cartocss_selected {
background-color: #A6CEE3;
}
</style>
<style type="cartocss/html" id="simple">
#nyc_bikelanes{
line-color: #FF6600;
line-width: 2;
line-opacity: 0.7;
}
</style>
<style type="cartocss/html" id="category">
/** category visualization */
#nyc_bikelanes {
line-width: 2;
line-opacity: 0.7;
}
#nyc_bikelanes[category="cyclelane"] {
line-color: #A6CEE3;
}
#nyc_bikelanes[category="cyclepath"] {
line-color: #1F78B4;
}
#nyc_bikelanes[category="cycleroute"] {
line-color: #B2DF8A;
}
#nyc_bikelanes[category="cycletrail"] {
line-color: #33A02C;
}
#nyc_bikelanes[category="greenway"] {
line-color: #FB9A99;
}
#nyc_bikelanes[category="walk_with_bike"] {
line-color: #E31A1C;
}
</style>
<style type="cartocss/html" id="category_in_source">
/** category visualization */
#nyc_bikelanes {
line-width: 2;
line-opacity: 0.7;
}
#nyc_bikelanes[category_in_source="0"] {
line-color: #A6CEE3;
}
#nyc_bikelanes[category_in_source="I"] {
line-color: #1F78B4;
}
#nyc_bikelanes[category_in_source="I,II"] {
line-color: #B2DF8A;
}
#nyc_bikelanes[category_in_source="I,III"] {
line-color: #33A02C;
}
#nyc_bikelanes[category_in_source="II"] {
line-color: #FB9A99;
}
#nyc_bikelanes[category_in_source="II, III"] {
line-color: #E31A1C;
}
#nyc_bikelanes[category_in_source="II,III"] {
line-color: #FDBF6F;
}
#nyc_bikelanes[category_in_source="III"] {
line-color: #FF7F00;
}
#nyc_bikelanes[category_in_source="L"] {
line-color: #CAB2D6;
}
#nyc_bikelanes[category_in_source="S"] {
line-color: #6A3D9A;
}
</style>
<style type="cartocss/html" id="bike_dir">
/** category visualization */
#nyc_bikelanes {
line-width: 2;
line-opacity: 0.7;
}
#nyc_bikelanes[bike_dir=""] {
line-color: #A6CEE3;
}
#nyc_bikelanes[bike_dir="0"] {
line-color: #1F78B4;
}
#nyc_bikelanes[bike_dir="1"] {
line-color: #B2DF8A;
}
#nyc_bikelanes[bike_dir="2"] {
line-color: #33A02C;
}
#nyc_bikelanes[bike_dir="5"] {
line-color: #FB9A99;
}
#nyc_bikelanes[bike_dir="L"] {
line-color: #E31A1C;
}
#nyc_bikelanes[bike_dir="R"] {
line-color: #FDBF6F;
}
</style>
<style type="cartocss/html" id="shape_leng">
/** choropleth visualization */
#nyc_bikelanes{
polygon-opacity: 0;
line-color: #FFFFCC;
line-width: 1;
line-opacity: 0.8;
}
#nyc_bikelanes [ shape_leng <= 27575.2910809] {
line-color: #0C2C84;
}
#nyc_bikelanes [ shape_leng <= 1097.33278789] {
line-color: #225EA8;
}
#nyc_bikelanes [ shape_leng <= 630.24058738] {
line-color: #1D91C0;
}
#nyc_bikelanes [ shape_leng <= 483.40528265] {
line-color: #41B6C4;
}
#nyc_bikelanes [ shape_leng <= 279.911043135] {
line-color: #7FCDBB;
}
#nyc_bikelanes [ shape_leng <= 230.320420587] {
line-color: #C7E9B4;
}
#nyc_bikelanes [ shape_leng <= 227.405164395] {
line-color: #FFFFCC;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="cartocss" class="layer_selector">
<p>Style Changers</p>
<ul>
<li data="category" data-type="cartocss">Category
</li>
<li data="category_in_source" data-type="cartocss">Category in Source
</li>
<li data="bike_dir" data-type="cartocss">Bike Direction
</li>
<li data="shape_leng" data-type="cartocss">Shape Length
</li>
<li data="simple" data-type="cartocss">Reset CartoCSS
</li>
</ul>
</div>
<div id="sql" class="layer_selector">
<p>Data Changers</p>
<ul>
<li data=" WHERE bike_dir IN ('0','1','2')" data-type="sql">Bike Direction is 0, 1, or 2
</li>
<li data=" WHERE category = 'greenway'" data-type="sql">Bikelane is a Greenway
</li>
<li data=" WHERE lanecount > 2" data-type="sql">Number of Lanes is 3 or greater
</li>
<li data="" data-type="sql">Reset SQL</li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/3.14/cartodb.js" type="text/javascript"></script>
<!-- Place your code in the script tags below -->
<script type="text/javascript">
window.onload = function() {
// var tableName = "all_day_cdb_gu_l3";
var tableName = "nyc_bikelanes";
var layerSource = {
user_name: 'eschbacher',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM " + tableName, // NYC bike lane data
cartocss: $("#simple").html() // Simple visualization
}]
}
// Instantiate new map object, place it in 'map' element
var map_object = new L.Map('map', {
center: [40.7127,-73.9], // NYC
zoom: 11
});
// Create layer selector
function createSelector(layer) {
var condition = "";
var $options = $(".layer_selector").find("li");
$options.click(function(e) {
var $li = $(e.target);
var selected = $li.attr('data');
var type = $li.data('type');
if (type === "cartocss") {
$options.removeClass('cartocss_selected');
if (selected !== "simple") {
$li.addClass('cartocss_selected');
}
condition = $('#'+selected).text();
layer.setCartoCSS(condition);
} else {
$options.removeClass('sql_selected');
if (selected !== "") {
$li.addClass('sql_selected');
}
layer.setSQL("SELECT * FROM " + tableName + selected);
}
});
}
// Pull tiles from CartoDB's basemaps
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map_object);
// for storing sublayer outside of createlayer
var sublayers;
// Add data layer to your map
cartodb.createLayer(map_object,layerSource)
.addTo(map_object)
.done(function(layer) {
sublayer = layer.getSubLayer(0);
createSelector(sublayer);
})
.error(function(err) {
console.log("error: " + err);
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment