Skip to content

Instantly share code, notes, and snippets.

@andy-esch

andy-esch/index.html

Last active August 29, 2015 14:09
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/f748f793b56822acf6ef to your computer and use it in GitHub Desktop.
Save andy-esch/f748f793b56822acf6ef to your computer and use it in GitHub Desktop.
Download ZIP
CartoDB.js CartoCSS Example
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Lesson 2 | CartoDB.js | CartoDB</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/themes/css/cartodb.css" />
<link rel="stylesheet" href="http://academy.cartodb.com/css/cdbui.css">
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
}
#layer_selector {
background: rgba(255,255,255,0.9);
border-radius: 5px;
position: absolute;
top: 20px;
right: 20px;
padding: 0;
border: 1px solid #999;
width: 250px;
}
#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.selected {
background-color: #EEE;
}
</style>
<script type="text/javascript" src="http://fast.fonts.net/jsapi/b6470a43-5105-49d3-95ae-75217a436bf8.js"></script>
</head>
<body>
<div id="map"></div>
<div id="layer_selector">
<ul>
<li data="colorByEarthquakes">Color earthquakes by reporting station</li>
<li data="colorByMagnitude">Color earthquakes by magnitude</li>
<li data="sizeByMagnitude">Size earthquakes by magnitude</li>
<li data="sizeMagColorDepth">Size earthquakes by magnitude, color by depth</li>
<li data="reset">Reset map</li>
</ul>
</div>
<!-- include cartodb.js library -->
<script src="http://libs.cartocdn.com/cartodb.js/v3/cartodb.js"></script>
<!-- Place your code in the script tags below -->
<script>
window.onload = function() {
// Create layer selector
function createSelector(layer) {
var cartocss = "";
var debug = false;
var $options = $("#layer_selector li");
$options.click(function(e) {
var $li = $(e.target);
var selected = $li.attr('data');
$options.removeClass('selected');
$li.addClass('selected');
if (selected === "colorByEarthquakes") {
cartocss = '#all_day_cdb_gu_l3{marker-fill-opacity:.9;marker-line-color:#FFF;marker-line-width:1.5;marker-line-opacity:1;marker-placement:point;marker-type:ellipse;marker-width:10;marker-allow-overlap:true;}#all_day_cdb_gu_l3[net="nc"]{marker-fill:#A6CEE3;}#all_day_cdb_gu_l3[net="ak"]{marker-fill:#1F78B4;}#all_day_cdb_gu_l3[net="us"]{marker-fill:#B2DF8A;}#all_day_cdb_gu_l3[net="ci"]{marker-fill:#33A02C;}#all_day_cdb_gu_l3[net="nn"]{marker-fill:#FB9A99;}#all_day_cdb_gu_l3[net="hv"]{marker-fill:#E31A1C;}#all_day_cdb_gu_l3[net="uw"]{marker-fill:#FDBF6F;}#all_day_cdb_gu_l3[net="pr"]{marker-fill:#FF7F00;}';
} else if (selected === "colorByMagnitude"){
cartocss = '#all_day_cdb_gu_l3{marker-fill-opacity:.8;marker-line-color:#FFF;marker-line-width:1.5;marker-line-opacity:1;marker-width:10;marker-fill:#ffffb2;marker-allow-overlap:true;}#all_day_cdb_gu_l3 [depth <= 592.9]{marker-fill:#b10026;}#all_day_cdb_gu_l3 [depth <= 508.20000000000005]{marker-fill:#e31a1c;}#all_day_cdb_gu_l3 [depth <= 423.5]{marker-fill:#fc4e2a;}#all_day_cdb_gu_l3 [depth <= 338.8]{marker-fill:#fd8d3c;}#all_day_cdb_gu_l3 [depth <= 254.10000000000002]{marker-fill:#feb24c;}#all_day_cdb_gu_l3 [depth <= 169.4]{marker-fill:#fed976;}#all_day_cdb_gu_l3 [depth <= 84.7]{marker-fill:#ffffb2;}';
} else if (selected === "sizeByMagnitude") {
cartocss = '#all_day_cdb_gu_l3{marker-fill-opacity:.9;marker-line-color:#FFF;marker-line-width:.5;marker-line-opacity:1;marker-placement:point;marker-multi-policy:largest;marker-type:ellipse;marker-fill:#ff5c00;marker-allow-overlap:true;marker-clip:false;}#all_day_cdb_gu_l3 [mag <= 5.7]{marker-width:15.0;}#all_day_cdb_gu_l3 [mag <= 3.54]{marker-width:13.4;}#all_day_cdb_gu_l3 [mag <= 2.63]{marker-width:11.9;}#all_day_cdb_gu_l3 [mag <= 2.1]{marker-width:10.3;}#all_day_cdb_gu_l3 [mag <= 1.81]{marker-width:8.8;}#all_day_cdb_gu_l3 [mag <= 1.5]{marker-width:7.2;}#all_day_cdb_gu_l3 [mag <= 1.21]{marker-width:5.7;}#all_day_cdb_gu_l3 [mag <= 1.02]{marker-width:4.1;}#all_day_cdb_gu_l3 [mag <= .83]{marker-width:2.6;}#all_day_cdb_gu_l3 [mag <= .51]{marker-width:1.0;}';
} else if (selected === "sizeMagColorDepth"){
cartocss = '#all_day_cdb_gu_l3{marker-fill-opacity:.9;marker-line-color:#FFF;marker-line-width:.5;marker-line-opacity:1;marker-placement:point;marker-multi-policy:largest;marker-type:ellipse;marker-fill:#FFFFB2;marker-allow-overlap:true;marker-clip:false;[mag <= 5.7]{marker-width:15.0;}[mag <= 3.54]{marker-width:13.4;}[mag <= 2.63]{marker-width:11.9;}[mag <= 2.1]{marker-width:10.3;}[mag <= 1.81]{marker-width:8.8;}[mag <= 1.5]{marker-width:7.2;}[mag <= 1.21]{marker-width:5.7;}[mag <= 1.02]{marker-width:4.1;}[mag <= .83]{marker-width:2.6;}[mag <= .51]{marker-width:1.0;}}#all_day_cdb_gu_l3 [depth <= 592.9]{marker-fill:#b10026;}#all_day_cdb_gu_l3 [depth <= 508.20000000000005]{marker-fill:#e31a1c;}#all_day_cdb_gu_l3 [depth <= 423.5]{marker-fill:#fc4e2a;}#all_day_cdb_gu_l3 [depth <= 338.8]{marker-fill:#fd8d3c;}#all_day_cdb_gu_l3 [depth <= 254.10000000000002]{marker-fill:#feb24c;}#all_day_cdb_gu_l3 [depth <= 169.4]{marker-fill:#fed976;}#all_day_cdb_gu_l3 [depth <= 84.7]{marker-fill:#ffffb2;}';
} else {
cartocss = '#all_day_cdb_gu_l3{marker-fill:#f60;marker-width:10;marker-allow-overlap:true;}';
}
layer.setCartoCSS(cartocss);
});
}
var layerName = "all_day_cdb_gu_l3";
var layerSource = {
user_name: 'documentation',
type: 'cartodb',
sublayers: [{
sql: "SELECT * FROM " + layerName, // Earthquake data
cartocss: "#all_day_cdb_gu_l3{marker-fill:#f60;marker-width:10;marker-allow-overlap:true;}" // Simple visualization
}]
}
// Instantiate new map object, place it in 'map' element
var map_object = new L.Map('map', {
center: [37.7741154,-122.4437914], // San Francisco
zoom: 4
});
// Pull tiles from OpenStreetMap
L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png').addTo(map_object);
var sublayers = [];
// Add data layer to your map
cartodb.createLayer(map_object,layerSource)
.addTo(map_object)
.done(function(layer) {
sublayers = layer;
for (var i = 0; i < layer.getSubLayerCount(); i++) {
sublayers[i] = layer.getSubLayer(i);
}
createSelector(layer);
})
.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