Skip to content

Instantly share code, notes, and snippets.

drag this link to bookmarks bar
<a href='javascript:(function(){var w=window,loc=w.location;try{w.open(loc.origin+"/api/v2/viz/"+loc.pathname.match(/\/viz\/([0-9a-f\-]+)/)[1]+"/viz.json");}catch(e){alert("not an embed")}}())'>VIZ.JSON</a>
@javisantana
javisantana / index.html
Created February 24, 2014 14:45
torque without looping
<!DOCTYPE html>
<html>
<head>
<title>Easy example | CartoDB.js</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" />
<style>
html, body, #map {
height: 100%;
@javisantana
javisantana / cartocss_roads.less
Created March 3, 2014 12:11
cartocss for cartodb dark basemap
/** simple visualization */
#ne_10m_roads::roads{
[zoom >= 6]{
[type = 'Major Highway']{
line-width: .8;
line-color: #E1E1E1;
}
}
[zoom >= 7]{
@javisantana
javisantana / index.html
Created April 22, 2014 07:36
torque - wait until all tiles are loaded to start playing
<!DOCTYPE html>
<html>
<head>
<title>Easy example | CartoDB.js</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" />
<style>
html, body, #map {
height: 100%;
// same than CDB_XYZ_Extent but this does not include the points just
// on the tile border for upper bounds, i.e for resolution=1 and tile_size=256
// the values after normalizing to tile coordinates are in range [0, 255]
function CDB_XYZ_Extent_Without_Upper_Border(x, y, z, resolution) {
var initial_resolution = CDB_XYZ_Resolution(0);
var origin_shift = (initial_resolution * tile_size) / 2.0;
var pixres = initial_resolution / Math.pow(2,z);
var tile_geo_size = tile_size * pixres;

using cartodb.js and mapbox.js

if you want to use all the features of cartodb (infowindows, legends, dynamic layers) with mapbox basemaps

http://bl.ocks.org/javisantana/7200781

if you want to use mapbox.js features and show a cartodb layer (without any cartodb feature)

<!DOCTYPE html>
<html>
<head>
<title>Easy example | CartoDB.js</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" />
<style>
html, body, #map {
height: 100%;
@javisantana
javisantana / style.xml
Created August 18, 2014 15:32
tessera with cartodb style
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE Map[]>
<Map srs="+init=epsg:3857" maximum-extent="-20037508.34,-20037508.34,20037508.34,20037508.34">
<Parameters>
<Parameter name="interactivity_layer">layer1</Parameter>
<Parameter name="interactivity_fields">cartodb_id</Parameter>
</Parameters>
@javisantana
javisantana / index.html
Created September 4, 2014 12:26
add a search box
<!DOCTYPE html>
<html>
<head>
<title>Gmaps example | CartoDB.js</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" />
<style>
html, body, #map {
height: 100%;
/**
* track changes and sync on every model
*/
function instrumentBackbone() {
var events = [];
var eventMap = {}
instrumentBackbone.events = events;
EVENT_SET = "SET";
EVENT_SYNC = "SYNC";