Skip to content

Instantly share code, notes, and snippets.

View index.html
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 Feb 24, 2014
torque without looping
View index.html
<!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 Mar 3, 2014
cartocss for cartodb dark basemap
View cartocss_roads.less
/** simple visualization */
#ne_10m_roads::roads{
[zoom >= 6]{
[type = 'Major Highway']{
line-width: .8;
line-color: #E1E1E1;
}
}
[zoom >= 7]{
@javisantana
javisantana / index.html
Created Apr 22, 2014
torque - wait until all tiles are loaded to start playing
View index.html
<!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%;
View new_torque_query.js
// 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;
View cartodb_and_mapbox.md

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)

View index.html
<!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 Aug 18, 2014
tessera with cartodb style
View style.xml
<?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 Sep 4, 2014
add a search box
View index.html
<!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%;
View instrument_backbone.js
/**
* track changes and sync on every model
*/
function instrumentBackbone() {
var events = [];
var eventMap = {}
instrumentBackbone.events = events;
EVENT_SET = "SET";
EVENT_SYNC = "SYNC";